aws ec2사용하기 2편-ec2로 next js 배포해보기

이번에는 1편에서 터미널을 키는 방법을 알았으니 2편에서는 ec2로 next js 프로젝트를 배포하는 방법에 대하여 알아본다.

next js icon

0. ubuntu update

여기선 참고로 ubuntu 터미널을 사용한다.

sudo apt update
sudo apt upgrade

입력

ec2터미널에서 

1. next js 프로젝트 생성(미리 만들어둔 next js 프로젝트가 있다면 생략하기)

로컬 컴퓨터 또는 ec2 터미널에서 

npx create-next-app --typescript ./

하고 자신이 원하는 프로젝트 방향에 맞게 옵션을 선택해주면 되겠다.

만약 로컬 컴퓨터에서 프로젝트를 생성했다면 git의 ssh clone 을 통해 ec2터미널에 올려주면 되겠다. (https://velog.io/@717lumos/Git-GitHub-%EC%82%AC%EC%9A%A9%EB%B2%952-SSH-%EC%9B%90%EA%B2%A9-%EC%A0%91%EC%86%8D%EA%B3%BC-Git-Clone-Private-%EC%A0%80%EC%9E%A5%EC%86%8C 참고)

2. node 설치

여기서부터는 계속 ec2 터미널에서 진행한다.

sudo su를 통해 root권한을 얻는다. 나중에 빌드시에 root권한이 필요하기 때문.

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

. ~/.nvm/nvm.sh
nvm install node
node -v

위 명령어로 결과적으로 node의 버전이 출력되면 노드가 설치된 것이다.

3. pm2 설치

pm2는 node.js 프로젝트를 관리해주는 프로그램이다.

pm2를 통해 node.js 프로젝트를 실행하고 멈출 수 있다.

cd [프로젝트폴더]
npm install -g pm2
pm2 start npm --name "next" --run dev

이렇게 하여 프로젝트가 잘 실행되면 된 것이다.

이 후 프로젝트 실행이 확인되었으면 

pm2 kill

pm2 kill 로 프로세스를 종료해줘야 한다. (나중에 프로젝트를 빌드해서 실행할 것이기 때문이다.)

4.nginx 설치

nginx는 nginx 웹 서버 관리 프로그램으로 모든 웹 사이트를 배포할려면 nginx나 apache같은 웹 서버 관리 프로그램이 꼭 필요하다. 필자는 주로 nginx를 사용한다.

sudo apt-get update -y
sudo apt install nginx
sudo systemctl start nginx

5. yarn 설치

yarn은 자바스크립트 패키지 매니저이다. 빌드하여 배포할려면 npm으로 해도되지만 yarn이 주로 배포속도가 살짝 더 빠르다.

그래서 yarn을 사용해볼 것이다.

npm install -g yarn
yarn install

6. nginx 파일 설정

sudo vim /etc/nginx/sites-available/default

sudo vim /etc/nginx/sites-available/default 후에 아래 글을 추가해준다.
server {
        listen 80 default_server; 
        listen [::]:80 default_server;

        server_name <도메인 주소>; #도메인 사면 수정해야하는 부분!

        location / {
                proxy_pass http://127.0.0.1:3000;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
        }
}
이후 :wq

nginx -t

nginx -t 로 문법 검사를 해준다.

이후 괜찮다고 뜨면

systemctl restart nginx

systemctl restart nginx 으로 nginx를 재시작해준다.

7. yarn build

제목그대로 yarn을 이용해 build를 하는 것인데 더 빠르게 하기 위해 esbuild-loader을 설치해준다.

npm i -D esbuild-loader

후에 yarn build를 해준다.

여기서 에러가 뜬다면 코드에 문제가 있거나 ec2컴퓨터의 성능 이슈일 것이다. 

ec2컴퓨터의 성능 이슈라면 여기 참고-https://sundries-in-myidea.tistory.com/102

AWS EC2 프리티어에서 메모리 부족현상 해결방법

빌드 성공 시

pm2 start yarn -- start

을 입력해주면 잘 실행되는 것을 확인 할 수 있다.

 

8. 이 후 코드에 변경사항이 있을때

git pull
yarn build
pm2 restart yarn -- start

을 하면 사이트에 잘 적용되는 것을 확인 할 수 있다.

 

번외. https 적용

1. 도메인 사기

2. snap을 이용하여 core 설치 후 certbot 설치

sudo snap install core
sudo snap refresh core
sudo apt remove certbot
sudo snap install --classic certbot
ln -s /snap/bin/certbot /usr/bin/certbot

3. certbot 실행

sudo certbot --nginx

구입한 도메인을 입력 후에 certbot이 시키는 대로 수행하면 자동으로 nginx https 설정까지 해준다.

 

인증서는 3개월이 지나면 만료되기 때문에 3개월마다 갱신해줘야한다.

(자동 갱신 방법은 https://devlog.jwgo.kr/2019/04/16/how-to-lets-encrypt-ssl-renew/ 참고)