What

Nuxt 3をAzure Static Web Appsにアップし、IP制限をかける際に少し詰まったのでそのメモ。

結論としては、

• IP制限の設定をしたstaticwebapp.config.jsonをpublic/以下に置く

ことで実現できる。

Azure Static Web AppsのIP制限

以下のページに記載されているようにstaticwebapp.config.jsonという名前のJSONファイルで指定する。プランは有料のStandardが必要で、無料プランでは不可。
見たところ、管理コンソールでは設定箇所が見当たらない。

https://learn.microsoft.com/ja-jp/azure/static-web-apps/configuration#networking

たとえば以下。

{
  "networking": {
    "allowedIpRanges": [
      "10.0.0.0/24",
      "100.0.0.0/32",
      "192.168.100.0/22"
    ]
  }
}

注意1: JSONの名称

JSONの名称はstaticwebapp.config.json。static.webapp.config.jsonではない。

注意2: JSONファイルの置き場所

以下に記載あり。

staticwebapp.config.json の推奨される場所は、ワークフロー ファイルで app_location として設定されたフォルダー内です。 しかし、app_location として設定されたフォルダー内の任意のサブフォルダーにファイルを配置できます。 さらに、ビルド ステップがある場合は、ビルド ステップによってファイルが output_location のルートに出力されることを確かめる必要があります。

https://learn.microsoft.com/ja-jp/azure/static-web-apps/configuration#file-location

Nuxt 3の場合のポイントは、ビルド ステップがある場合は、ビルド ステップによってファイルが output_location のルートに出力されることを確かめる必要があります。の部分。

Nuxt3のoutput_locationはデフォルトでは.output/public。プロジェクトのルートにstaticwebapp.config.jsonを置いてもここには入らない。

結論としては、staticwebapp.config.jsonはpublic/に入れる。

https://nuxt.com/docs/guide/directory-structure/public

Nuxt 2では相当するフォルダはstaticだったので混同に注意。