AWS EC2 vite react 배포

마조리카·2023년 5월 31일
0

aws

목록 보기
1/2

react를 공부하면서 실 배포를 경험해보고자 route53와 ec2를 이용해서 배포를 시도해 보았다.

1. AWS

우선 aws에 가입후 Region을 서울로 골라줘야 한다. 전 회사에서 이거로 벙찐기억이 있다.

2. ROUTE53

우선 내 프로젝트를 배포하기 위해서는 도메인이 필요하니 구매를 해주자 13달러 정도 하였다.
추후 EC2 인스턴스를 만들면 IPv4 퍼블릭 IP주소를구매한 도메인 레코드에 입력해줘야한다.
연결할때 도메인에 www.를 붙인것과 안붙인것 두개다 올려놓자.

3. EC2

  1. ec2로 접근후 인스턴스를 만들었다.
  2. 운영체제는 Ubuntu를 사용했다.
  3. 그중 인스턴트 유형은 프리티어(무료)로 설정하였다.
    ->t2.micro
  4. 키페어 생성

    키페어는 한번만 발급 가능하니 잘 보관해야한다.

  • 이름을 설정하고 유형 RSA, 형식 pem으로 설정했다.(변경 안했음)
  1. *중요 네트워크 설정
  • 이부분에서 포트를 열고 닫는것을 설정해야해서 중요하다.
    기본적으로 22번 포트가 설정되어 있고
    80번(http)포트와 443(https)포트를 0.0.0.0/0으로 열어주자.
    또, 내 프로젝트 포트도 열어주도록 하자 (나는 8080)
  1. 스토리지는 30기가 까지 무료이니 30기가까지 꼭 채워주자

4. 터미널작업

내 컴퓨터 터미털에서 이제 생성된 ec2의 컴퓨터에 접속해서 작업을 진행한다.

1.

ssh -i ~/Desktop/sample-key.pem ubuntu@ec2-1-11-11-11.ap.northeast-2.compute.amazonaws.com

~/Desktop/sample-key.pem부분을 본인의 pem 경로로 지정해서 접속해주자.

위와같이 나오면 성공이다.

2. 이제 클론 복사를 할차례이다.

mkdir ~/git
cd ~/git
git clone 내프로젝트 주소

클론 복사가 완료 되었다.

3.ec2 컴퓨터 셋팅

ec2 컴퓨터엔 node도 없고 기본설정이 안되어있다.
설치를 진행해주자.

sudo apt-get update

이 명령어는 패키지 목록을 업데이트한다.
시스템에 설치된 패키지와 새로운 패키지 업그레이드를 위한 최신 패키지 정보를 가져온다.

sudo apt-get install -y build-essential

이 명령어는 소프트웨어 빌드에 필요한 필수 패키지를 설치한다.
-y 옵션은 설치 과정에서 나오는 모든 확인 메시지에 자동으로 "yes"를 응답.

sudo apt-get install curl

이 명령어는 curl 패키지를 설치.
curl은 명령 줄에서 HTTP 요청을 보내는 도구로, 파일 다운로드, API 호출, 네트워크 연결 테스트 등에 자주 사용됨.

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash --

이 명령어는 지정된 URL에서 Node.js 설치 스크립트를 가져옵니다.
-s 옵션은 curl 명령어를 조용하게 실행하여 진행 상황을 출력하지 않습니다.
-L 옵션은 제공된 URL이 리디렉션을 포함하는 경우 리디렉션을 따라갑니다.
| 기호는 파이프로, curl 명령의 출력을 다음 명령의 입력으로 전달합니다.
sudo -E는 다음 명령(bash)이 현재 환경 변수를 유지한 채로 슈퍼유저 권한으로 실행되도록 합니다.

sudo apt-get install -y nodejs

이 명령어는 시스템에 Node.js 런타임을 설치합니다.
Node.js 패키지를 소스에서 가져와 설치합니다.
-y 옵션은 설치 과정에서 나오는 모든 확인 메시지에 자동으로 "yes"를 응답합니다.

sudo npm install yarn --location=global

yarn 전역으로 설치해준다.

4. 프로젝트 빌드

  1. 내프로젝트로 진입해서
yarn install
yarn bulid
yarn preview

주의사항!!
vite react에서

    "preview": "vite preview --host 0.0.0.0 --port 8080"

로 변경해줘야한다.
외부에서 localhost로 접근이 불가능하므로 내 프로젝트의 host가 0.0.0.0으로 되어야 접근이 가능하다.

5. ec2 ubuntu 포트 확인

netstat -tnlp

8080이 열려있는지 확인
일반서버는 443(https)
그외 80(http)

6. pm2 사용 무중단 관리

sudo npm i pm2 --location=global
pm2 start yarn --preview

0개의 댓글