[aws] ec2 인스턴스에 next.js 배포하기 (feat. pm2 nginx ) in Ubuntu

기본적으로 제공하는 next 프로젝트에 대해 배포해보기.

1. npx create-next-app

2. npm run build 

3. next.js를 배포하면 build 폴더를 따로 제공하지 않고 .next 폴더 안에 생성 됨. => 숨겨져 있어서 ls 통해서 봐도 안보임. cd .next 하면  입장 가능

4. nginx 를 통해 포트에 대해 우회할것이므로 해당 next 프로젝트의 pacakge 파일안에서 npm start 시 포트 지정해줄 필요 x

5. nginx, pm2는 이미 설치되어있다고 가정

6. 도메인 접속 시(퍼블릭 ip) next 빌드로 우회 하기 위해 root경로에서 /etc/nginx/sites-available 폴더 안에 default 파일 생성 해서 아래와 같이 입력

server {
  listen 80 default;
  listen [::]:80 default;
  server_name [domain] www.[domain];

  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;
  }
}

7. sites-available 폴더 안에 생성한 것에 대해 nginx의 엔진이 실행할 때 사용할 환경변수를 잡아주기 위해 site-enable 안에 링크를 심어줌

sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enable/default

 위의 명령어를 심어주면 sites-availble 안에 파일의 내용을 수정할 시 자동적으로 enable과 링크가 연결된 파일도 함께 수정 됨( ln 은 link를 뜻함. -s는 심볼을 뜻함) 

8. sudo nginx -t 를 통해 위와 같이 설정한 것에 대해 문법적 오류가 없는지 체크

9. ok가 떴다면 sudo service nginx start ( 이미 실행중이었다면 sudo service nginx restart) 

10. pm2 를 통해 next 프로젝트를 지속적으로 실행하게 하는 환경을 만들어준다

pm2 --name myapp start npm -- start

myapp은 내가 만든 프로젝트의 폴더 이름

11. pm2 status를 통해 해당 플젝이 online 상태가 맞는지 체크

이제 나의 도메인(퍼블릭 ip) 을 통해 접속해 보면 next app 의 기본 프로젝트가 렌더링 됨.

만약 502 게이트가 떴다면 루트에 chmod 711 /root/ubuntu를 통해 권한을 줘보거나

ec2 인스턴스 보안그룹에 들어가봐서 80번이나 내가 지정한 포트에 대한 접근 권한을 줬는지 체크해보기