Nuxt.js の起動時に外部アクセス可能なIPを指定する

VirtualBoxなどを使ってゲストOSでNuxtのアプリケーションを起動して、ホストからブラウザで参照する際に外部アクセス可能なIPを指定してNuxtのアプリケーションを起動する必要があります。

普通にyarn run devデフォルトで起動するとlocalhostになり、外部からアクセスはできません。

このことに気づかず結構時間を取られてしまったので備忘録として解決策を残しておきます。

やりたいこととしては 192.168.*.*などのプライベートIPを使ってブラウザからアクセスすることとなります。

ホストを指定して起動する

このことは公式ドキュメントにも記載されています。

デフォルトではlocalhostが指定されていて、外部からはアクセスはできません。

公式ドキュメントに記載されている通り0.0.0.0を指定するのが便利です。

ホストの 0.0.0.0 は、ホストマシンの外部の接続（例えば LAN）にアクセス可能なホストアドレスを解決するよう Nuxt に伝えるためにデザインされています。

ちなみに0.0.0.0の意味は0.0.0.0 - Wikipediaこのあたりを参照。

指定する方法はいくつかあります

いずれも同じ結果は同じです。

package.json にhost指定します。

"config": {
  "nuxt": {
    "host": "0.0.0.0",
    "port": "3000"
  }
},

この状態でyarn run devなどで通常通り起動するとlocalhostでもアクセスできますし、プライベートIP指定でアクセスすることができるようになります。

例:
http://localhost:3000/
http://192.168.56.2:3000/

HOST=0.0.0.0 yarn run dev

export default {
  server: {
    port: 8000, // デフォルト: 3000
    host: '0.0.0.0' // デフォルト: localhost
  }
  // ~ 省略 ~
}