Nuxt.js3 外部IPから接続可能にする

Nuxt.js3 外部IPから接続可能にする

デフォルトの状態だと、localhostからしかアクセスできないので、ipアドレスを指定して接続できるように設定します。

環境

  • OS  ubuntu23.10
  • node v20.13.1
  • npm 10.8.0
  • Nuxt.js v3.11.2

設定

プロジェクト配下のpackage.jsonに「NUXT_HOST=ipアドレス NUXT_PORT=ポート番号」を追加してあげることで可能です。ここでは「npm run dev」コマンドに追加してます。
※ここでは「0.0.0.0」に設定してます。

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "NUXT_HOST=0.0.0.0 NUXT_PORT=3000 nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.11.2",
    "vue": "^3.4.27",
    "vue-router": "^4.3.2"
  },
  "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "3000"
    }
  }
}

「npm run dev」と実行すると外部から接続できることが確認できます。