Nextjsとpm2を使って永続化させる

Nextjsをpm2で使用する方法をいつも忘れてしまうので備忘録として書いておきます。

目標

Nextjsを永続化させる

環境

AlmaLinux 9.1
node 16.17.1
pm2 @5.2.2
nginx web server

永続化方法

nodejsの永続化モジュールにはpm2とforeverの二つがありますが、pm2の方が良いとのことでpm2を使用してnextjsのプロジェクトを永続化させます。

インストール

pm2のインストールは-gでグローバルにインストールします。

npm install pm2@latest -g

nextjs

Nextjsがssrなので.nextフォルダー一つでは起動しません。そのため他のライブラリーも必要とします。
起動するにあたって必要なものは

.next
package.json
pacage-lock.json
public
その他 prisma等

不要な物は

.env
srcフォルダー
node_modules
.babelrc.js
○○config.js等

とりあえず.next,package.json,package-lock.jsonがあれば一旦動くには動くはず。

node_modules

開発環境と本番環境でハードウェアが異なるときファイルをコピー、転送する必要がありますが、node_modulesを送るの時間がかかるのでとてもしんどい、クローズド環境でなければnode_modulesは転送しない事をオススメします。そのためpackage.json ,pacage-lock.jsonファイル転送後モジュールは

npm install

を一回実行してしまえば必要なモジュール関係は全てダウンロードされる。

通常実行をしてみる

まずは通常起動するかどうかを確認します。起動方法は npx next startで実行されます。
package.jsonに起動スクリプトがあればnpm run startとかで起動します。

永続化させる

今回本題の永続化について.
コマンドは　

pm2 start npm --name "hoge" -- start

hogeは何を起動しているのかを分かるような名前にしてください。起動して正常に動作している場合は status onlineとなっています。 next-pm2-status

pm2コマンド

pm2で最低限使うものとして

pm2 ls
pm2 stop name
pm2 restart name
pm2 delete name

あと必要になれば

pm2 monitor
pm2 logs name
pm2 show name

nameはアプリ名を指定してください。

起動ポート

nextjsはデフォルトで3000ポートで起動します。が、http httpsは 80,443ポートなのでプロキシ設定をしてあげる必要があります。

nginxプロキシ設定

私の場合nginxウェブサーバを使用しています。詳しいnginxのインストールはこちら

server {
server_name u-serverdomain.com;
   listen 80;
return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    ssl_certificate     hoge.pem;
    ssl_certificate_key privkey.pem;
    server_name u-serverdomain.com;
    access_log  /var/log/nginx/test.access.log;
    location / {
        proxy_pass http://127.0.0.1:3000;
    }
}

最低限のコードconfigのみになっています。重要部分はlocation proxy_passです。
ここでポート3000に転送しています。

nextjsアプリが複数ある場合

nextjsアプリがが１サーバに対して一つの場合はこれだけで十分なのですが複数あった場合はnextjsの起動ポートを3000から変更する必要があります。その場合はnextjsのpackage.jsonを修正してあげます。

  "scripts": {
    "start": "npx next start -p 3002",
    ...build等
  },

また同様にnginxプロキシパスも3000から3002等に変更します。

build後転送がめんどくさい

私の環境はwindwos 10からscpを使ってファイルを転送していますが、毎回必要なファイルをまとめ、転送をする必要があったので。非常に面倒な作業でした。少しでも楽をするためにnpm scriptを使用しました。

  "scripts": {
    "start": "npx next start -p 3000",
    "build": "npx next build & npm run build:clear ",
    "build:clear": "npm run build:7z ",
    "build:7z": "7z a hoge.tar ./.next/ ./public/ package.json ./prisma & npm run build:csp",
    "build:csp": "scp hoge.tar [email protected]:/home/usernames/next.tar"
  },

私の場合はbuildスクリプトを走らせるとbuild後必要なファイルをtarで纏めてscpで転送をしています。
tar圧縮は7zを使用しており、7zはパスを通してあります。