AWS[EC2] REACT 프로젝트 배포

BigChoi·2021년 11월 2일
2
post-thumbnail

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

혹시 리눅스의 현재 경로가 root가 아니라면 cd /home/ec2-user/ 후 프로젝트를 클론한다.

git 클론
$ 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 규칙 추가 후 저장하면 배포가 끝이 난다.

profile
천천히 한 걸음씩

0개의 댓글