Next.js 설치 및 linux(ubuntu)에 배포하기

배포 환경

linux(ubuntu), nginx

 

*react설치 방법과 다르게 처음부터 linux에서 작업이 시작됩니다.

 

1. Node 설치 

Node.js는 Node Version Manager를 통해서 설치하는 것이 편리하므로, NVM을 설치한다. 먼저, 다음의 명령어로 설치 스크립트를 다운로드 받아서 실행한다.

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

nvm이 잘 설치되었다면 다음 명령어를 입력했을 때 nvm이 출력될 것이다. 만약 뜨지 않는다면 다시 접속하거나 Bash를 다시 실행해서 시도해본다. (source .bashrc)

command -v nvm

Node.js 홈페이지에 들어가 현재 버전을 확인하고, 해당 버전으로 설치한다. 프로젝트 배포 시 타겟 버전이 있다면, 해당 버전으로 설치한다.

nvm install 14.18.0
nvm use 14.18.0

Yarn을 설치해야 한다면 Yarn도 설치한다.

npm i -g yarn
yarn --version # yarn이 잘 설치되었는지 확인한다

 

2. nginx 설치 && 리버스 프록시 설정

$ sudo apt-get install nginx -y
nginx -v # 잘 설치되었는지 확인한다.
/*
* next.js는 node서버를 사용합니다. 하지만 저희는 nginx서버 위에 node서버를 띄워야하므로
* nginx에서 리버스 프록시를 설정해야합니다. 3000포트로 리버스를 설정한 이유는 
* next start시 3000포트로 노드서버가 오픈되기 때문입니다.
*/
sudo vim /etc/nginx/sites-available/default # 실행 후 아래 부분으로 수정
server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/<디렉토리>;
        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;
        }
}
$ sudo systemctl restart nginx

3. next.js 설치

원하는 디렉토리로 이동 후 아래 명령어를 실행합니다. 저는 /var/www 위치에서 실행했습니다.

npx create-next-app <디렉토리명>

4. next 빌드 -> pm2 설치 -> next 배포

cd <해당디렉토리> #next가 설치 된 디렉토리로 이동
npm i 
npm run build

pm2란 Node.js의 프로세스 매니저이며 Node.js 애플리케이션을 무중단으로 운영할 수 있는 기능을 제공하고 있습니다.

저희는 앞서 말했 듯이 nginx서버에 node서버를 띄워야 하는 상황인데 ssh접속을 닫았을 때 nginx는 계속 실행되겠지만 pm2 설정을 안했을 시에는 node서버는 죽게됩니다. 이러한 문제를 해결하고자 pm2를 이용합니다.

• 백그라운드에서도 실행을 유지시켜준다.
• 에러가 발생해도 자동으로 다시 시작된다.
• 클러스터 모드를 통해 실행하면, CPU 코어 수만큼 프로세스가 생성되어, 싱글 스레드인 Node.js에서도 최대 코어 수만큼 요청을 처리할 수 있게 설정된다.

npm i -g pm2
pm2 start yarn -w -i 0 --name "<pm2실행 이름>" -- start

# -w : 파일의 변경 시 자동으로 재시작되는 옵션
# -i 0 : CPU 코어 수만큼 프로세스를 생성하는 클러스터 모드

 

커맨드에서 pm2 list 로 현재 등록 된 pm2목록을 조회 할 수 있습니다.

이제 해당 서버에 접속 시 정상적으로 배포가 되었는지 확인해 보시면 됩니다.

80포트 3000포트 둘 다 열리게 될겁니다. 

이렇게 배포를 진행하면서 들었던 두 가지 의문점이 생겼는데 

1. nginx를 사용하지 않고 처음부터 pm2로 port만 80으로 바꿔 노드서버를 구동하면 되지 않을까?

2. 리버스 프록시를 하게되면 ssl설정은 문제가 되지않을까?

이 부분은 다른 글에서 작성하도록 하겠습니다.