사용자 지정 VPS에 NextJS 앱을 배포하는 방법

동기 부여

Next JS 앱을 개발하고 배포를 시작할 때마다 가장 먼저 떠오르는 것은 Vercel입니다. 요즘에는 해당 플랫폼에서 Next JS를 지원하는 수많은 호스팅 제공업체가 있습니다. 하지만 최근에는 클라이언트가 다른 곳에 배포하는 것이 편하지 않아 VPS 서버에 NextJS SSR 앱을 배포해야 하는 프로젝트를 진행하고 있었습니다. 그것을 찾아 보았고 그것을하는 방법에 대한 적절한 지침이 없었습니다.

전제 조건

배포를 시작하기 전에 우선 이를 위한 VPS가 필요합니다. Node js 서버 설정 시리즈의 파트 1을 읽어보세요.

1단계 - 앱 생성

먼저 서버에 New Next JS APP를 만들고 있습니다.

npx create-next-app@latest awesome-app

또는 git에서 기존 저장소를 복제할 수 있습니다.

git clone awesome-app.git

그런 다음 방금 만든 폴더로 이동해야 합니다.

cd awesome-app

git에서 앱을 복제한 경우 종속성을 설치하려면 추가 앱을 수행해야 합니다.

npm install 
#or 
yarn 

2단계 - 생산을 위한 구축

NextJS는 빌드 스크립트와 함께 제공되므로 실행하기만 하면 됩니다.

npm run build
#or 
yarn build

사전에 모든 정적 페이지를 생성한 것처럼 프로젝트의 프로덕션 빌드를 생성하는 데 시간이 걸립니다.

3단계 - 포트 설정(선택 사항)

기본적으로 Next JS는 포트 3000에서 실행되지만 서버에서는 이미 3000에서 앱을 실행하고 있으므로 4400과 같은 새 포트에서 Production 앱을 시작하려면 package.json을 업데이트해야 합니다.

{
  "name": "awesome-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 4400", // or whatever port you want 
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.2.5",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "eslint": "8.22.0",
    "eslint-config-next": "12.2.5"
  }
}

4단계 - PM2로 앱 시작

PM2로 앱을 시작하려면 다음을 실행해야 합니다.

pm2 start npm --name "awesome-app" -- start

이렇게 하면 NGINX로 SSL 및 역방향 프록시를 추가하려는 경우 포트 4400에서 앱이 시작됩니다. 기존 NGINX 구성 양식 VPS 설정에 새 앱을 추가해야 합니다.

5단계 - NGINX로 역방향 프록시 추가

서버를 업데이트하려면 먼저 구성을 엽니다.

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

이 새 블록을 서버 블록의 위치 부분에 추가합니다.

    server_name awesomeapp.com.com www.awesomeapp.com.com;

    location / {
        proxy_pass http://localhost:4400; 
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

하위 도메인에서 두 번째 앱을 호스팅하려는 경우 yourdomain2.com를 api2.yourdomain.com와 같은 하위 도메인으로 바꾸십시오.

그런 다음 NGINX를 확인하고 다시 시작하십시오.

# Check NGINX config
sudo nginx -t

# Restart NGINX
sudo service nginx restart

도메인이 지정되면 포트 80에서 앱이 작동하는 것을 볼 수 있습니다. SSL을 추가하는 단계가 한 단계 더 있습니다.

6단계 - 두 번째 APP용 SSL 추가

이미 certbot이 설치되어 있으므로 추가 도메인을 추가하는 것은 문제가 되지 않습니다.

sudo certbot --nginx -d awesomeapp.com -d www.awesomeapp.com

그게 전부입니다. 새 앱은 SSL을 사용하여 새 도메인에서 라이브여야 합니다.

문제가 발생하면 알려주세요. 감사합니다.