Hero img
Nextjsを永続化させる

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

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


目次

  • 目標
  • 環境
  • 永続化方法
  • インストール
  • nextjs
  • node_modules
  • 通常実行をしてみる
  • 永続化させる
  • pm2コマンド
  • 起動ポート
  • nginxプロキシ設定
  • nextjsアプリが複数ある場合
  • build後転送がめんどくさい
  • まとめ

目標

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アプリがが1サーバに対して一つの場合はこれだけで十分なのですが複数あった場合は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 usernames@120.111.111.11:/home/usernames/next.tar"
  },

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

まとめ

nextjsをpm2で起動する方法の紹介でした。参考までに

関連記事

コメント

コメントを書く

質問や、間違いがありましたら、お気軽にどうぞ

※お名前とコメントの内容を入力してください。
※全てこのブログ上に公表されます。
※許可なく管理者によって修正・削除する場合がございます。 詳しくはプライバシーポリシーを参照ください