Next.jsで作ったアプリを公開、SSL対応、永続化するためのメモ。
nowじゃなくて普通に自前のLinuxサーバーに載せることを考えます。
気持ち的にはNext.jsプロジェクトの初期設定の続きです。
HTTPポート設定
Next.jsのポート番号設定でやったようにnextjsのデフォルトサーバーでもHTTPポートで起動できます。
|
1 2 |
npx next build sudo npx next start -p 80 |
カスタムサーバーを使っている場合はPORTオプションを変えるだけです。
場合によってはこれと永続化だけで十分。
HTTPSポート設定
現在ならSSL化はわりと必須な感じがします。
個人利用ならLet’s Encryptを使うのが常道なのでCertbotのドキュメントを見て認証。
ここで作成した証明書のファイルを使ってサーバーを起動します。
デフォルトサーバーの場合、next/dist/compiled/arg/index.jsあたりを見るとサーバーオプションを-p, -H, -h以外の引数で渡せそうなので>next start -key keyファイルの中身 -cert certファイルの中身 で出来そうな気もしたんですが、そもそもhttpモジュールなので無理そう。
カスタムサーバー
デフォルトサーバーではSSL対応が難しそうなので導入。
Custom Serverやcustom-server-express/server.jsなどを参考に適当に作る。
環境変数
process.env.NODE_ENVなどの変数をどうするかですが、nodeプロセスの変数にセットする処理とwebpackでdefineする処理を考える。
package.jsonのconfigなんかに書くprocess.env.npm_package_config_XXXで参照
NODE_ENV=production node ...のように起動する- OS間の差異を吸収するにはcross-envが便利
- 次の永続化で書いたpm2を使うとさらに便利
next.config.jsで書く- next管理下で扱える変数(実際には定数として書き換えられる)
- １、２の変数はサーバーサイドでのみ参照可能のためここで再定義するとブラウザ処理でも使えるようになる
永続化
nodeで動くものだしsystemctlとか使うのもなんか変な感じがする。
foreverを使おうかと思いましたがscriptsで動かそうと思うと少し使いにくいです。
pm2というのがより高性能で人気があるようなのでこちらを使ってみます。
使い方に関しては公式のQuick startがわかりやすいです。
|
1 2 3 4 5 |
windows > npm install pm2 -g linux > sudo npm install pm2 -g |
これを使うと以下のように書けますがWindowsだとSyntaxError: Invalid or unexpected tokenが起きます。回避方法もありますがめんどくさそう。
|
1 2 3 4 |
"scripts": { "dev": "node src/express.js", "pm2:dev": "pm2 start yarn --name next-dev -- dev", } |
ecosystem.config.jsをECOSYSTEM FILEを参考に作成します。
pm2 ecosystemで自動作成もできます。
環境変数にcross-envを使うつもりだったけど必要がなくなった。
scriptsも簡単に書けるようになりました。
|
1 2 3 4 |
"scripts": { "pm2:dev": "pm2 start ecosystem.config.js", "pm2:start": "next build && pm2 start ecosystem.config.js --env production", } |
ただしこのデフォルトのやり方だと開発と本番を同時に動かせないため、appsを複数用意してonlyで起動するようにします。
|
1 2 3 4 |
"scripts": { "pm2:dev": "pm2 start ecosystem.config.js --only dev-app", "pm2:start": "next build && pm2 start ecosystem.config.js --only prod-app", } |
インスタンス再起動時の起動設定も簡単です（STARTUP）。
pm2 startupで表示されるコマンドを実行、自動起動してほしいプロセスを起動した状態でpm2 saveするだけ。