AWS[EC2] REACT 프로젝트 배포

AWS EC2 인스턴스 생성 및 배포

react 프로젝트를 배포하면서 익힌 배포 프로세스를 정리해보자.

1. 인스턴스 유형 선택
   인스턴스 시작하기 버튼을 누르면 사용가능한 인스턴스 리스트가 나온다.
   나는 Amazon Linux 2AMI(HVM), SSD Volume Type을 선택했다.
   해당 인스턴스는 프리티어 사용이 가능한 인스턴스로 프리티어로 인스턴스를 만들었다.
2. ssh Key Pair
   인스턴스 시작하기 버튼을 누르면 Key Pair 관련창이 나오는데, ssh로 접속을 위해서 새로운 .pem파일을 생성한다. 나는 관리차원에서 프로젝트 이름으로 키를 생성 후 다운로드를 받았다.
3. ssh 접속
   위의 ssh 접속 키를 만들었지만, 이번 프로젝트는 putty나 mac 터미널에서 ssh로 접속하지 않고, 아마존에서 제공되는 ssh로 접속했다.
4. ec2 대시보드에서 방금 만든 인스턴스 좌측의 체크박스를 체크하면 연결 버튼이 활성화 된다.
   클릭후 EC2 인스턴스 연결 탭에서 연결 버튼을 누르면 웹페이지에서 ssh 연결이 가능하다.
5. node, nginx 설치하기 및 배포
   ssh 접속후

리눅스 업데이트

sudo yum update

git 설치

sudo yum install git

nginx설치

sudo amazon-linux-extras install ngin1.12

yarn 설치

curl -o- -L https://yarnpkg.com/install.sh | bash

환경변수 재설정

source ~/.bashrc

NVM설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

nvm 활성화

. ~/.nvm/nvm.sh

nodejs 설치

nvm install node

 

원하는 디렉토리 위치에서 git clone

git clone [레파지토리주소]

yarn install

yarn run build 명령어를 통해 프로젝트를 빌드할 수 있는데, 만약 여기서 빌드가 안 될 경우, 
npm, node 버전이 현재 리눅스에 설치된 버전과 프로젝트 작업을 진행한 로컬의 버전이 다를 경우일 가능성이 매우 크다.

 

만약 위와 같이 빌드 에러가 날 경우
$ export NODE_OPTIONS=--openssl-legacy-provider
위의 명령어를 입력 후 다시 yarn run build 를 진행해보자

nginx.conf파일 수정

nginx server쪽 재설정을 위한 폴더 생성

sudo mkdir /etc/nginx/sites-available
suco mkdir /etc/nginx/sites-enabled

설정파일 생성

sudo vi /etc/nginx/sites-available/[프로젝트 이름].conf

INSERT 모드 활성화 후
server {
	listen 80;
    location / {
      root /home/ec2-user/[프로젝트 이름]/build;
      index index.html index.htm;
      try_files $uri $uri/ /index.html;
    }
}

root는 아까 깃을 통해 클론하여 build한 절대 경로를 입력해야 한다.
모두 작성 후 INSERT모드에서 빠져나온 후 :wq 를 통해 파일을 저장한다.

sites-enabled 폴더로 symbolic link 설정

 

sudo ln -s /etc/nginx/sites-available/[프로젝트이름].conf /etc/nginx/sites-enabled/[프로젝트이름].conf
위의 명령어 실행 후
sudo nginx -t 명령어를 실행했을 때 successful이라고 나오면 정상적으로 설정이 된 것
이후
sudo systemctl restart nginx 명렁어를 통해 nginx를 재실행하면 배포가 완료된다.

만약 퍼블릭 IPv4 주소로 접속했을때 접속이 안 된다면
AWS 사이트에서 보안 그룹 > 인바운드 규칙 추가 > HTTP 규칙 추가 후 저장하면 배포가 끝이 난다.