Nuxtのlocalhostをhttps://ローカルIP:portにする

Nuxt.jsの起動コマンドnpm run devを実行すると
http://localhost:3000 で開発サーバが立ち上がります。

localhostをローカルIPに変更

ネットワークグループ内でWi-fi接続しているスマートフォンでも開発しながら表示確認を行いたいので
ホスト名をデフォルトのlocalhostから192.168.1.*などのローカルIPに変更します。

"scripts": {
  "dev": "nuxt"
}

package.jsonscriptsへ登録されている起動コマンドへ
このように↓設定を追記するとホスト名とポート番号を変更できます。

"scripts": {
  "dev": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt"
}

ホスト名は0.0.0.0にしておくと、自動でローカルIPに置き換えてくれます。

参考:
ホストとポート番号を変更するには?

SSLを設定

これだけではhttpからはじまるアドレスなので、
navigator.geolocationなど
httpsはじまりのアドレスでないと差し支えのある技術が使えず面倒です。

Nuxtをhttpsで起動させたい場合は、
起動スクリプトを設置して、npm run dev経由で実行されていたnuxtのかわりに実行します。

証明書(*.ket,*.crt)は、opensslコマンドやmkcertなどを利用して生成し
開発環境内の任意の場所へ置いておきます。

起動スクリプト内で証明書を参照している箇所があるので、パスが合うよう修正しておきます。

  const options = {
    key: fs.readFileSync('XXXX.key'),
    cert: fs.readFileSync('XXXX.crt')
  };

package.jsonscriptを追加します。
server.jsという名前で起動スクリプトを設置し、nodeで実行する場合はこうなります。

"scripts": {
  "devHttps": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 node server.js",
  "dev": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt"
}

Node.jsがES2015書式に対応していなかった

さっそくnpm run devHttpsを実行すると…

起動スクリプトがインポートしているnuxt.config.js内のexport defaultでエラーになって実行できない!

調べてみると、Node.jsがES2015の書式を実行できないのが原因でした。

nodeのスクリプトをbabelでトランスパイルしてくれる@babel/nodeをインストール

$npm install -D @bable/node

@bable/nodeを使うために、nodebabel-nodeと書き換えます。

"scripts": {
  "devHttps": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 babel-node server.js",
  "dev": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt"
}

これで、npm run devHttpsを実行すると
https://192.168.1.1:3333 のようhttps://ローカルIP:portでアクセスできるNuxtを起動できました!

関連記事