Next.js + React를 AWS EC2로 배포하기(2) - 어플리케이션 무중단 배포

저번 포스트에서 EC2 Instance 생성 및 내 컴퓨터에서 접근까지 해보았다! 이번 포스트에서 내 터미널에서 접근한 EC2 Instance에 React 어플리케이션 무중단 배포를 정리해볼까 한다.

 

Next.js + React를 AWS EC2로 배포하기(1) - EC2 인스턴스 생성 

React 어플리케이션 무중단 배포

1. 내 프로젝트 clone 받기

배포 할 프로젝트를 클론받자.

 

2. Clone 받은 폴더로 이동 후, yarn(or npm)을 설치

를 하려하니 에러가 뜬다 🥲

 

 

우분투 내에서 yarn을 설치 할 경우에 Node가 다운되어 있지 않아 오류가 발생한다. Node부터 설치해보자.

3. nodejs 설치

아래의 명령어로 Node를 설치하자

 

$ sudo apt-get update

$ sudo apt-get install -y build-essential

$ sudo apt-get install curl

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

$ sudo apt-get install -y nodejs

 

이렇게 하고 node와 npm yarn 버전을 확인해봤다.

 

 

뭔가 이상하다. node만 깔렸따. 그래서 추가로 npm을 설치 후 yarn도 설치 했다.

 

$ sudo apt install npm

$ npm install –g yarn

 

$ yarn

 

그런데 이렇게 하니깐 npm은 잘 설치가 되었는데 yarn이 설치가 안되었다. → yarn 이 아닌 sudo yarn을 햇어야했다 ^^

(어디서부터 잘못된걸까)

 

$ sudo yarn

 

 

쥬륵 😭 드디어 yarn이 실행된다. 그런데 node 버전이 너무 낮다고 한다. 업데이트 해주자.. (8.10.0이라니 ㄷㄷ)

4. Node 버전 업데이트

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

$ nvm install node

 

이렇게 하고 다시 노드 버전을 확인해보니 v16.10.0이었다.

 

그런데 다시 클론받은 폴더로 돌아가서 sudo 없이 yarn만 쳤는데....yarn이 잘 설치된다......뭐지..? (일단 기뻤다)

5. React 어플리케이션을 빌드 후 서버 켜기

$ yarn build

$ yarn start

 

참고로 내 package.json은 이렇다!

 

// package.json

"scripts": {
  "build": "next build",
  "start": "next -p 8080",
 }

 

원래 서버를 켜면 포트 번호가 3000이었는데, 현재 EC2 보안그룹에서 열어둔 포트번호가 8080이다. 얘랑 맞춰야해서 서버 포트 번호를 8080으로 바꿔서 켜주는 작업을 했다.

 

이렇게 하고 내 EC2주소:8080으로 들어가니 내 어플리케이션이 잘 뜬다 ㅎㅎ. 참고로 내 EC2 주소는 내 EC2 Instance의 Public IPv4 DNS이다.

 

 

그런데 이렇게 하니깐 노트북이 꺼지면 아래처럼 서버도 꺼지는 것을 발견했다.

 

 

그렇다고 1년 내내 노트북을 켜놓을 수는 없다. 그래서 말로만 듣던 무중단 배포를 해야겠다는 생각을 했다. pm2를 이용했다.

6. pm2 설치

$ npm install pm2 -g

$ pm2 list

 

pm2를 설치하고 현재 가동중인 pm2 목록을 확인해보자.

 

 

아직 아무것도 실행 안시켜서 아무것도 없다.

7. pm2 실행

$ pm2 --name ec2-deploy start npm -- start

 

내 어플리케이션 디렉토리에서 위의 명령어를 쳐보니 다음처럼 pm2에 새로운 목록이 하나 생겼다. 

 

 

이거 자체로 내 어플리케이션은 무중단 배포가 실행된 것이다! 난 또 뭐 따로 켜야하는줄 알고 헤맸당 ㅎㅎ

 

실제로 yarn start 해서 켜진 내 EC2주소:8080에 들어가면 잘 돌아가고있음을 확인할 수 있다!

 

 

🧐 느낀점

AWS의 Cloudfront, S3로 처음 배포했던 때에 너무 힘들었던 기억이 있다. 뭔가 AWS라는 단어 자체가 좀 벽이 높아보이면서 막연한 두려움이 있었다. 그러나 크루들의 도움으로 차근차근 따라하고 다시 정리하면서 AWS랑 친해질 수 있었다. 덕분에 이번 EC2배포를 할 때는 좀 편안한 마음으로 도전했던 것 같다. AWS가 처음에는 두려움의 대상이었는데 계속 시도해보고 경험해보니, 내가 공부할 수 있는 부분이 꽤 많고 재밌는 설정도 많았다. 공부거리가 생긴것 같아서 즐겁당!

 

EC2의 경우는 처음이라서 거의 따라하기 수준으로 배포를 시도했다. 차차 자세한 설정들을 알아봐야겠다! 👍🏻