Azure Static Web AppsでIPアドレスによるアクセス制限が出来るようになった

いわさです。

Azure Static Web AppsでIPアドレスでのアクセス制限機能がGAになりました。
認証機能以外で、Webサイトへのアクセス制限を行う場合は以前ご紹介させて頂いたプライベートエンドポイントを使う方法が考えられましたがVNET作成して外部からの穴を空けてなど考えると、アクセス元を制限するだけと考えたときにちょっとオーバースペックかなぁと思っていました。

今回IPアドレス制限を行うことが出来るようになったことでよりライトな制限を行うことが出来るようになりました。
ただし、このネットワーク構成機能を使うためには、プランがStandardである必要があります。

ネットワーク構成は、Azure Static Web Apps Standard プランでのみ使用できます。

Azure Static Web Apps を構成する | Microsoft Docs

価格については以下を参照してください。

ネットワーク構成を設定する

Azure Static Web Appsでは構成ファイルを配置することでアプリケーション設定を制御することが可能です。
今回のネットワーク制御についても、Azureポータル上ではなく構成ファイルで設定を行う必要があります。

staticwebapp.config.json の推奨される場所は、ワークフロー ファイルで app_location として設定されたフォルダー内です。 ただし、このファイルは app_location として設定されたフォルダー内の任意のサブフォルダーに配置できます。

構成ファイルの格納先はルールがあるので、まずはapp_locationを確認します。
GitHub Actionsのworkflow yamlを確認します。

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_BEACH_013205E10 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_BEACH_013205E10 }}
          action: "close"

ありました。
特に変更してなかったので、デフォルトの/が設定されています。 こちらに構成ファイルを格納します。

推奨はルートのようです、任意のサブフォルダでも良いとのこと。
今回はためしにサブフォルダーに置いてみました。

設定ファイルに許可するIPアドレスレンジをCIDR形式で記述します。

staticwebapp.config.json

{
    "networking": {
        "allowedIpRanges": [
            "111.222.333.444/32"
        ]
    }
}

configサブフォルダ内に作成しました。
連携済みのリモートリポジトリを更新してワークフローを動かします。

デプロイされました。
アクセスして確認してみます。

許可された接続元

期待どおりアクセス出来ます。

許可されていない接続

403 Forbiddenになりました。
良いですね。

さいごに

Azureポータルから直接設定出来ないのと構成ファイルを用意する必要があり、gitを介したデプロイが必要なので若干手順は多いですが簡単に設定出来る部類だと思います。

ステージングだけIP制限したいなどの要望も出てきそうです。
物理ファイルの有無で制御しているのでGitHubのワークフローでどうにか制御出来るだろうかちょっと試したみようかなと思います。