mintsu's blog

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

2020-08-04 12:00:00
フロントエンド

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

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

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

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

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

目次

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

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

ホストとポート番号を変更するには? - NuxtJS

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

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

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

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

ホスト(IP)指定の方法

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

  • package.json に記載する方法
  • 環境変数を使う方法
  • nuxt.config.jsに記載する方法

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

package.json に指定する方法

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

nuxt.config.js に記載する方法

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