Michi's Tech Blog

一人前のWebエンジニアを目指して

WindowsでNext.jsの環境構築をするときのTips

JavaScript/TypeScript React

こんにちは！
スマレジ テックファームのMichiです！

先日、WindowsでNext.jsの環境構築をしているときに、いくつかOS起因で詰まったところがあったので、メモとして残しておきます。

環境

opensslコマンドがない

NextAuth.jsを使用する際、シークレットキーとしてNEXTAUTH_SECRETの環境変数を設定します。

その際、通常はopensslコマンドを使用しますが、Windows PowerShell、およびコマンドプロンプトにはopensslコマンドが存在しません。

正攻法はWindowsにopensslをインストールすることです。

oji-cloud.net

ですが、「シークレットキーを設定するためだけにわざわざopensslをインストールするのがめんどくさい！」という方のために、今回は別の解決法を用意します。

解決法

CrypTool-Onlineというサービスがあります。

www.cryptool.org

リンク先から真ん中の「OpenSSL」をクリックします。

CLIが現れるので、openssl rand -base64 32のようにコマンドを入力すると、ランダムな値を生成してくれます。

このサービスを使えば、OSにopensslをインストールしなくても簡単にシークレットキーを作成することができます。

「'NODE_OPTIONS' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。」

package.jsonのscripts.devにNODE_OPTIONSを指定するとき、Windowsだとエラーが出てうまくいきません。

package.json

"scripts": {
    "dev": "NODE_OPTIONS='--inspect' next dev",
  },

"NODE_OPTIONS='--inspect'" は、Node.jsプロセスをデバッグモードで起動するためのものです。

ちなみに、"NODE_ENV=productionのように、NODE_ENVを指定した場合も同様のエラーが発生します。

PowerShell

PS C:\Users\michi\Develop\sample> yarn dev
yarn run v1.22.19
$ NODE_OPTIONS='--inspect' next dev -p 4000
'NODE_OPTIONS' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

解決法

win-node-envというパッケージを入れることで解決します。

以下のコマンドでwin-node-envをグローバルにインストールします。

npm install -g win-node-env

これでyarn dev(npm run dev)が通るようになります。

このようなエラーが起こる原因としては、「bableコマンドを実行する前にNODE_ENVを設定しても、Windowsでは動作しないから」ということらしいです。

環境変数からポート番号を認識してくれない

次のように、package.json内でNext.jsが使用するポート番号を指定します。

なお、Next.jsは.envファイルから環境変数を読み込めないので、事前にシェル上で環境変数PORTをエクスポートしておきます。

PowerShell

$env:PORT = 4000

package.json

"scripts": {
    "dev": "NODE_OPTIONS='--inspect' next dev -p $PORT",
  }

ですがこれはうまくいきません。
エラー文を読んでみると、環境変数が読み込めていないようです。

PowerShell

PS C:\Users\michi\Develop\sample> yarn dev
yarn run v1.22.19
$ NODE_OPTIONS='--inspect' next dev -p $PORT
Debugger listening on ws://127.0.0.1:9229/1d961b41-8158-48f8-a63b-18435e632ad2
For help, see: https://nodejs.org/en/docs/inspector
RangeError [ERR_SOCKET_BAD_PORT]: options.port should be >= 0 and < 65536. Received type number (NaN).

-- （省略）--

at async nextDev (C:\Users\michi\Develop\sample\node_modules\next\dist\cli\next-dev.js:498:9) {
code: 'ERR_SOCKET_BAD_PORT'
}
Note: This command was run via npm module 'win-node-env'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

解決法

結論として、現時点ではWindowsから環境変数を使ってNext.jsのポート番号を指定する方法あありません。（cross-envを使えばできるという説もありますが、自分の環境ではうまくいきませんでした。）

ここはおとなしく、package.json内でポート番号を直接指定するしかありません。

"scripts": {
    "dev": "NODE_OPTIONS='--inspect' next dev -p 4000",
  }

参考

github.com

まとめ

Unix系とWindowsで結構な環境差分があることがわかったので、特に理由がない限りはMacで環境構築したほうがよさそうです。もしくは、WindowsでWSLを使うとか。