NextJS를 PM2로 올리기

우선 해결한 방법부터 정리하고자 한다.

front의 package.json 설정

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Nginx 설정

sudo nano /etc/nginx/sites-available/default 설정

server {
  listen 80 default;
  listen [::]:80 default;

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

yarn start 대신 PM2로 실행

pm2 start yarn --name "nextjs" --interpreter bash -- start

❌ pm2 --name "nextjs" yarn -- start 작동 안함

NextJS는 추가로 --interpreter bash를 붙여줘야 정상작동 한다.
참고자료

bash는 쉘의 종류로, NextJS는 bash 기반, PM2는 node 기반이다보니 서로 알아먹질 못했던 것이다.
그러니 계속해서 pm2로 실행을 해도 설정하지도 않은 엉뚱한 80포트로 띄우려고 하는 것이었다.

사건의 발단

여기서부터는 사건의 전개

1. React앱을 배포하던 방식 그대로 Nginx를 설치하고, root로 build파일을 설정하고, 차근차근 진행하려함

2. Nginx가 계속 403, 404, Bad Gateway 에러를 냄

3. 왜 그럴까 아하 프론트가 NextJS를 사용하는구나!

• 1️⃣ 시도1. NextJS는 특이하게 .next (숨김)폴더에 빌드가 된다해서 sudo nano /etc/nginx/sites-available/default 설정파일 내의 root를 해당 .next 위치로 설정함 -> 작동안함ㅎ

• 2️⃣ 시도2. NextJS는 자체서버가 Nginx의 80포트로 띄우는 기능을 지니고 있다고 한다.
  그러니 Nginx를 지우고 NextJS 자체를 pm2에 올려 start 하자! 시도하기로 함
  👉 프론트의 package.json 내 scripts start에 -p 80 추가.

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start -p 80",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

하지만 yarn start 에러 발생🤦

4. 80포트 연결 이슈

80포트 연결
1024 이하의 포트의 경우 Well known 포트라고 해서, 일반 사용자 권한으로 실행이 불가능합니다.
그래서 실행할 때 sudo를 붙여서 실행해야 합니다.
👉 Priviliged ports
👉 permission denied 0.0.0.0:80 에러 발생시 해결법

아하, 1024 이하의 포트는 sudo를 붙여서 start를 실행해야하는구나!

5. 근데 그sudo yarn start가 안되는 이슈
결론부터 말하자면: root와 elice의 node 버전이 달랐음
elice 노드는 v16, root 노드는 v10으로 꼬임.
그러니 sudo를 붙여도 먹히지 않았던것.(sudo 붙이면 root의 것에 설치가 됨)
👉 root의 노드버전을 업그레이드하니 해결!

6. 정석대로 가자는 코치님의 조언: Nginx를 다시깔자!
이에 가장 위의 해결방식대로 진행하여 애증의 NextJS 배포 마무리!

참고

vi package.json

vi package.json을 통해 터미널에서 파일 수정이 가능하다.

• i 눌러 수정가능하고 (insert)
• esc -> :wq 통해서 빠져나오기 가능

VM내에서 수정된 파일을 git으로 올리는 방법

• 우선 VM내의 git config mail, username이 되어있어야 한다!(내가 한 실수ㅎ)
• 기존의 add, commit, push의 과정 진행
• 바로 해당 브랜치의 파일을 수정하기보단, git branch 생성(ex. git checkout -B change-next-port)-> Merge Request -> Merge의 과정을 단계별로 진행하자