Next.jsは基本ポート:3000
で起動します。
これを定義1つで起動ポートから、プログラムからの参照(自身のAPIアクセスなどで)までするためのメモ。
next.config.jsドキュメントを見るといつも通り基本的な部分しか乗っていません。
定義ソースを見ろとあるので見てみますがポート関連の設定はなさそうです。
CLIのヘルプを見てみると-p
オプションでポート設定が可能なようです。
1 2 3 4 5 6 |
> next dev -h #or > next start -h ... Options --port, -p A port number on which to start the application --hostname, -H Hostname on which to start the application --help, -h Displays this message |
ソース(next-start.ts, start-server.ts)を追ってみると単純にポート設定しているだけなので他からポート番号を取得できなさそう。
というかhttp
モジュールで走ってたんですね。
http
やexpress
でカスタムサーバーを作ってそっちをいじるのが正攻法かもしれないですが今回はnextメインで進めます。
今回はまずpackage.json
でポート番号を設定。
1 2 3 4 5 6 7 8 9 10 |
{ "scripts": { "dev-win": "next dev -p %npm_package_config_PORT%", "dev-linux": "next dev -p $npm_package_config_PORT", ... }, "config": { "PORT": 8008 } } |
これでプログラム内でもprocess.env.npm_package_config_PORT
でポート番号にアクセス可能ですが、使えるのはサーバーサイド処理のみです。
そこでnext.config.jsonでポート番号を再定義します。
1 2 3 4 5 |
module.exports = { env: { PORT: process.env.npm_package_config_PORT, }, } |
これで処理主体に関わらずprocess.env.PORT
でポート番号を参照できるようになりました(同じようにprocess.env
にアクセスしているように見えますが、DefinePluginによる書き換えなので完全に別物です)。
まあ通常使用だとポートを変えることもあまりないので、どっち(scripts, config)も平文で書いておいても同じ結果になります。
若干見た目がよくないのでnuxtみたいにconfig.js
のserver.port
に設定するだけにならないかな。