このエントリは2025/03/26現在の情報に基づいています。将来の機能追加や変更に伴い、記載事項からの乖離が発生する可能性があります。
問い合わせ
最近Azure Static Web Apps (SWA) を使い始めたいつもの主から、以下のような問い合わせが届いた。
現在SWAで静的Webアプリを作っている。GitHub上に、開発系 (dev)、検証系 (staging)、本番系 (main) というブランチを切って､開発を進めているのだが、本番系以外は公開を制限したい。質問は以下の3点。
- Free Planを使っていて実現する方法はあるか？
- Standard Planを使った場合、選択できるオプションは増えるか？
- 開発系・検証系・本番系でわかりやすいFQDNを使いたい、つまりカスタムドメインを付けたいのだが、可能か？
「Free Planでなんとかしたいが、選択できるオプションがない場合にはStandard Planを選択することもやむを得ない」ということのよう。ドキュメントに書いてある通り、Preview環境使えば丸く収まりそうに思うが、そうはいかないのは、SWAのドキュメントをごらんになったことがある方ならわかるはず。
解決策
下表の通り、Standard Planであれば、一部を除き要求を満たすことができる。Free Planだと実現が難しい。
1. Preview環境
https://learn.microsoft.com/azure/static-web-apps/preview-environments
| Free | Standard |
|---|---|
| ✅ | ✅ |
2. ネットワークアクセス制限
| Free | Standard | |
|---|---|---|
| 1) Private Endpoint https://learn.microsoft.com/azure/static-web-apps/private-endpoint | ❌ | ✅ |
2) allowIpRangeでの許可https://learn.microsoft.com/azure/static-web-apps/configuration#networking | ❌ | ✅ |
| 3) Front Doorの組合せ https://learn.microsoft.com/azure/static-web-apps/front-door-manual | ✅ | ✅ |
3. カスタムドメイン
https://learn.microsoft.com/azure/static-web-apps/custom-domain
| Free | Standard | |
|---|---|---|
| 1) Preview環境でのカスタムドメインの利用 | ❌ | ❌ |
| 2) 本番系でのカスタムドメインの利用 | ✅ | ✅ |
詳細
1. Preview環境
これはドキュメントにある通りで、プランに関わらず、Pull Request環境、ブランチ環境、名前付き環境を構成できる。今回の問い合わせ主の環境は以下のようなので、ブランチ環境がわかりやすそうである。
- dev branch (development)
- staging branch (QA, staging)
- main branch (release)
Azure Static Web Apps でブランチ プレビュー環境を作成する / Create branch preview environments in Azure Static Web Apps
https://learn.microsoft.com/azure/static-web-apps/branch-environments
SWAを構成したタイミングでGitHub Actionsのワークフローが生成されるので、ドキュメントの記述に従って少々手直しをする必要がある。FQDNは
<DEFAULT_HOST_NAME>-<branch名>.<LOCATION>.azurestaticapps.net
という形式。以下は、East AsiaのSWAにdevブランチを使ってPreview環境にデプロイした例。
本番系 (mainブランチ) だと、-dev.eastasiaがないことがわかる。
2. ネットワークアクセス制限
Front Doorの組合せ以外は、Standard Planでのみサポートされている構成。
1) Private Endpoint
プレビュー環境はFQDNでPublic IPをlookupすると、本番系とは異なるPublic IPなので、それぞれの環境に対してPrivate Endpointが作成される。
この方法だと、確かにVNETもしくはExpressRouteやVPNで接続しているリモートからのみにアクセスを制限できる。ただ、本番系、プレビュー環境ひっくるめてPrivate Endpointを構成してしまうため、本番系でGlobal distributionを使いたい場合には、期待した構成にならないことに注意が必要。
2) allowIpRangeでの許可
このプロパティはstaticwebapp.config.jsonで設定できるもので、CIDR表記でIPv4アドレスブロックを指定する。以下は設定の例。
{
"networking": {
"allowedIpRanges": [
"10.0.0.0/24",
"100.0.0.0/32",
"192.168.100.0/22"
]
}
}
この設定はStandard planでのみ利用可能だが、プレビュー環境でも利用可能なので、例えばブランチプレビュー環境のdev、stagingではIPアドレスで制限し、本番系では制限しない、という構成が可能。以下は本番系 (calm-hill-06b8e2300.6.azurestaticapps.net) は制限を外し、ブランチプレビュー環境 (calm-hill-06b8e2300-dev.eastasia.6.azurestaticapps.net) は特定のIPアドレスで制限している例。左側は表示できているが、右側では403でアクセスできなくなっていることがわかる。
3) Front Doorとの組合せ
Front Doorを組み合わせることで、アクセス元の制限やWAFも利用できるが、お財布には優しくはない。Private Linkを使ったFront DoorからSWAへの接続は現時点ではサポートされていないため、Front Doorからのみアクセスを許可するのであれば、以下のいずれかを構成する必要がある。
forwardingGateway.allowedForwardedHostsとforwardingGateway.requiredHeadersをstaticwebapp.config.jsonに指定する- Application Gatewayを挟む
前者は、SWAへのアクセスを特定のFront Doorに限定するしくみ。以下のドキュメントに記載がある。
静的 Web アプリの構成を更新する / Update static web app configuration
https://learn.microsoft.com/azure/static-web-apps/front-door-manual?tabs=azure-portal&pivots=swa-afd-manual-afd#update-static-web-app-configuration
以下はstaticwebapp.config.jsonの構成例。networking.allowedIpRangesにサービスタグを指定し、forwardingGateway.allowedForwardedHostsとしてFront DoorのFQDN、forwardingGateway.requiredHeadersにはX-Azure−FDIDを指定する。
{
"$schema": "https://json.schemastore.org/staticwebapp.config.json",
"networking": {
"allowedIpRanges": ["AzureFrontDoor.Backend"]
},
"forwardingGateway": {
"allowedForwardedHosts": [
<Front DoorのFQDN>
],
"requiredHeaders": {
"X-Azure-FDID": "Front Doorで発行されるユニークなID"
}
}
}
後者はVNetに引き込んでからさらにPrivate Endpointでアクセスするしくみなので、1) に書いた通り。こちらはかなりゴージャスな構成になってしまうことから、お財布には優しくない。本当に必要になるケースがあるかどうかは十分な吟味が必要。
3. カスタムドメイン
カスタムドメインはドキュメントにも記載の通り、プレビュー環境には指定できない。
Note
Adding a custom domain to a preview environment is not supported. Unicode domains, including Punycode domains and the
xn--prefix are also not supported.
プレビュー環境へのカスタム ドメインの追加はサポートされていません。 Punycode ドメインや
xn--プレフィックスを含む Unicode ドメインもサポートされていません。
https://learn.microsoft.com/azure/static-web-apps/custom-domain
更問が届く
例によって更問が届いた。
ほかにアクセスを制限する方法はあるか？
Previewではあるがパスワード保護を利用できる。ただこれもStandard Planのみであり、Free planでは使えない。
パスワード保護を構成する (プレビュー) / Configure password protection (preview)
https://learn.microsoft.com/azure/static-web-apps/password-protection
構成自体はSettings > ConfigurationのPassword protectionから。
設定後、プレビュー環境（stagingとdev）はパスワードが必要になっていることがわかる。
Logico Inside 