Next.js Amazon EC2 배포(2)

Next.js Amazon EC2 배포(1) 에서 진행한 인스턴스 생성에 이어서 인스턴스에 접속 & 무중단 배포에 대해 정리해보았다.

 

인스턴스에 접속

.pem파일을 저장해둔 곳으로 가서 ssh 접속을 해야한다.

 

생성한 인스턴스에 들어가서 우측 상단에 있는 연결 버튼을 누른다.

인스턴스에 연결 중 페이지에 있는 탭 중 SSH 클라이언트 클릭해 예로 있는 명령어를 .pem 파일이 위치한 터미널에 들어가 명령어를 사용한다.

// 예
ssh -i ".pem파일이름" ubuntu@ec2-00-000-00-000.ap-northeast-2.compute.amazonaws.com

접속에 성공하면 yes를 입력하고 ubuntu@ip 라는 초록 글씨가 나오면 성공적으로 접속이 된 것이다.

Git & Node

아래 명령어를 입력해 ubuntu 관리 버전을 업데이트 시켜준다.

sudo apt-get update

 

nvm 설치

만약 설치 후 command -v nvm 입력해서 nvm이 안 나오면 터니널을 재 실행해보면 나온다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
command -v nvm /** 버전 확인 */

 

Node 설치

20.11.0 버전으로 설치했다.

nvm install "20.11.0"
nvm use "20.11.0"

// 설치 후 확인은 아래 명령어
npm -v
node -v

 

Git Clone

.pem 파일이 있는 폴더에 배포할 프로젝트를 git 에서 클론 받는다.

git clone https://github.com/.../....git

클론 후 프로젝트에 들어가서 npm install 진행 후 .env파일 추가해주고 npm run build 실행해준다.

 

자주 쓰일 명령어

ls : 현재 위치에서 하위 폴더, 파일 확인 명령어

ls -a : 숨김 파일/폴더를 모두 확인 가능

cd 폴더 or 파일이름 : 해당 파일로 이동

nano 파일이름 : 해당 파일 수정

cat 파일이름 : 해당 파일 생성

브라우저에서 실행 확인

성공적으로 build가 되었다면 프로젝트에서 package.json 파일로 가서 scripts에 있는 start에가서 사용할 포트를 추가한다. 3000번 사용예시 ) "start": "next start -p 3000"

그 후 npm run start 를 실행해본다.

실행이 잘 되면 인스턴스의 '퍼블릭 IPv4 주소:3000' 으로 브러우저에 들어갈 수 있다.

여기서 문제는 인스턴스와 연결을 종료하거나 컴퓨터를 종료하면 그대로 앱이 종료되어 버린다. 그래서 24시간 무중단으로 인스턴스를 사용하기 위해 pm2를 사용해야한.

 

pm2 설치

npm i -g pm2
pm2 list

 

애플리케이션을 클러스터 모드로 실행 하기 위해서 프로젝트 루트 폴더에 ecosystem.config.js 파일을 저장한다. ecosystem.config.js 파일은 PM2 프로세스 매니저가 사용하는 설정 파일이다.

module.exports = {
  apps: [{
      name: 'minsunblog', 
      cwd: './',
      script: 'node_modules/next/dist/bin/next',
      args: 'start',
      exec_mode: 'cluster', 
      instances: 0, 
      autorestart: true, 
      listen_timeout: 50000,
      kill_timeout: 5000
  }]
}

• name: 애플리케이션의 이름을 지정합니다.
• cwd: 현재 작업 디렉토리를 지정합니다. 일반적으로 실행 파일이 있는 디렉토리를 가리킨다.
• script: 실행할 스크립트 파일을 지정합니다. 여기서는 Next.js의 실행 파일 경로를 지정하고 있다.
• args: 스크립트에 전달할 인자를 지정합니다. start를 전달하여 Next.js 애플리케이션을 시작한다.
• exec_mode: PM2에서 애플리케이션을 실행하는 모드를 지정한다. cluster 모드를 사용하고 있으며, 이는 멀티 프로세스 클러스터 모드를 의미한니다.
• instances: 클러스터 모드에서 실행할 인스턴스 수를 지정한니다. 여기서는 0을 설정하여 CPU 코어 수에 따라 자동으로 인스턴스를 할당하도록 합니다.
• autorestart: 애플리케이션의 비정상 종료 시 자동으로 다시 시작할지 여부를 지정한다.
• listen_timeout: 애플리케이션 시작 후 대기할 수 있는 시간을 지정합니다.
• kill_timeout: 프로세스 종료를 위해 대기할 시간을 지정합니다.

프로젝트폴더로 이동해서 아래 명령어 실행하면 배포가 된다.

pm2 start ./ecosystem.config.cjs

 

NginX

일반적인 웹사이트들이 자신들이 설정한 포트를 80포트를 사용해서 뒤에 포트를 감춰버리는 포트포워딩이 여기서도 필요하다. NginX를 이용하여 리버스 프록시를 적용 할 수 있다.

 

NginX 설치

설치하면서 나오는 글 enter하면된다.

sudo apt-get install nginx -y	/** NginX 설치 */
nginx -v 	/** 잘 설치 되어 있는지 확인 */

 

nginx.conf 에 들어가 설정을 추가해준다.

nano /etc/nginx/nginx.conf

include 바로 아래에 다음 코드를 추가해준다.

server {
       server_name 도메인이름
       listen 80;
       location / {
                proxy_set_header HOST $host;
                proxy_pass http://127.0.0.1:3000;
                proxy_redirect off;
       }
}

 

이제 포트 번호를 기입하지 않고 페이지에 들어갈 수 있다.

 

NginX 서비스 재시작

sudo nginx -t
sudo systemctl reload nginx

 

HTTPS 적용

https로 설정하기 위해서는 인증서가 필요해서 Let's Encrypt에서 무료로 발급해주는 인증서를 활용 하면된다.

 

이전에 설치되어있던 certbot 삭제 (충돌 방)

sudo apt-get remove certbot

 

certbot 설치

sudo snap install certbot --classic
/** certbot 설치 */
sudo certbot --nginx
/** SSL 인증서 발급 */

 

설치하면 안내 글이 나오는데

Enter email address 가 나오면 이메일을 적고 넘어가면 된다.

 

Certbot으로 자동 갱신 설정

설정 파일 들어가서 1번 “/bin/nano” 를 선택하면 된다.

sudo crontab -e

하단에 아래 코드 적고 Ctrl + X -> y -> Enter로 나오면된다.

매월 1일 오후 6시마다 인증서를 갱신하고 NGINX를 재시작하는 명령어가 실행된다.

0 18 1 * * certbot renew --renew-hook="sudo systemctl restart nginx"

 

배포 완료