Azure Static Web Appsのエンタープライズレベルのエッジ機能の有効化に失敗する場合がある

2022.04.10

いわさです。

Azure Static Web Appsにはエンタープライズレベルのエッジという機能があります。
本日時点でまだプレビューですが、この機能を使うとキャッシュやセキュリティ対策など様々な恩恵を受けることが出来ます。

有効化するには、カスタムドメインを設定した上でエンタープライズレベルのエッジを有効化操作を行うだけなのですが、試してみたところ失敗しました。
気づいてみれば、たしかにそれは失敗するかもな...という感じではあるのですが、ドキュメントに記載がなかったのでこういった点も注意が必要ですねという点を共有しておきたいと思います。

有効化の流れ

まず、エンタープライズレベルエッジの有効化の前提条件に、カスタムドメインが構成済みであることが含まれています。
カスタムドメインが設定されていない状態だと、以下のエラーとなります。

エラーによりエッジを有効にできませんでした: Cannot enable enterprise grade CDN on the static web app because hoge-static-iwasa does not have any custom domains.

おそらくAzure Front Door(?)でSSL証明書を構成しているようなのですが、本機能で有効化したCDNは個別の設定は出来ません。
その兼ね合いでデフォルトドメインではダメなのだと思います。

なので、カスタムドメインをまず設定します。

ホスト部にwwwと表示されるのですが、無視して指定したドメイン名(ここでは"static")で名前解決出来るようにCNAME(or TXT)レコードを登録します。
私は検証用のDNSサーバーはAWSのRoute 53を使っているのでそちらに登録します。
外部のDNSサーバーでも問題なく本機能は動作しました。

失敗する

カスタムドメインを有効化したあとは有効化操作を行い少し待つだけです。
AzureポータルからGUIで操作する方法と、Azure CLIで操作する方法があります。

ポータル

有効化操作をして30分くらい経過したあとに、通知上は「成功」と出るのですが、画面をリフレッシュさせると有効化されていません。

また、その後はCLIからの有効化も受け付けない状態になってしまいました。

PS /home/iwasa_takahito> az staticwebapp enterprise-edge enable -n hoge-static-iwasa -g 20220410
Command group 'staticwebapp enterprise-edge' is in preview and under development. Reference and support levels: https://aka.ms/CLI_refstatus
For optimal experience and availability please check our documentation https://aka.ms/swaedge
Bad Request({"Code":"BadRequest","Message":"Cannot enable enterprise grade CDN on static web app hoge-static-iwasa because the disablement operation of an enterprise grade CDN is in progress for this site.","Target":null,"Details":[{"Message":"Cannot enable enterprise grade CDN on static web app hoge-static-iwasa because the disablement operation of an enterprise grade CDN is in progress for this site."},{"Code":"BadRequest"},{"ErrorEntity":{"ExtendedCode":"59355","MessageTemplate":"Cannot enable enterprise grade CDN on static web app {0} because the disablement operation of an enterprise grade CDN is in progress for this site.","Parameters":["hoge-static-iwasa"],"Code":"BadRequest","Message":"Cannot enable enterprise grade CDN on static web app hoge-static-iwasa because the disablement operation of an enterprise grade CDN is in progress for this site."}}],"Innererror":null})

CLI

Azureポータルを介さずにCLIから有効化も出来ます。
拡張機能のインストールと有効化操作を行います。

PS /home/iwasa_takahito> az extension add -n enterprise-edge
The installed extension 'enterprise-edge' is in preview.
PS /home/iwasa_takahito> az staticwebapp enterprise-edge enable -n hoge-static-iwasa2 -g 20220410

経過についてはshowコマンドで確認が出来ます。

PS /home/iwasa_takahito> az staticwebapp enterprise-edge show -n hoge-static-iwasa2 -g 20220410
Command group 'staticwebapp enterprise-edge' is in preview and under development. Reference and support levels: https://aka.ms/CLI_refstatus
For optimal experience and availability please check our documentation https://aka.ms/swaedge
{
  "enterpriseGradeCdnStatus": "Enabling"
}
PS /home/iwasa_takahito> az staticwebapp enterprise-edge show -n hoge-static-iwasa2 -g 20220410
Command group 'staticwebapp enterprise-edge' is in preview and under development. Reference and support levels: https://aka.ms/CLI_refstatus
For optimal experience and availability please check our documentation https://aka.ms/swaedge
{
  "enterpriseGradeCdnStatus": "Disabled"
}

こちらも30分ほど経過した後にEnablingからDisabledになってしまいました。

原因

色々と問題を切り分けしていくうちに私のケースの原因を見つけました。
私は以前Static Web AppsのIPアドレス制限の記事を書いたことがあります。

その時のリポジトリを使っていまして、意図せず構成ファイルでIPアドレス制限を行ってしまっていました。

staticwebapp.config.json

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

有効化時の検証などに失敗するケースとか全然有り得そうです。
また、有効化出来たとしてもこのままだとエッジからアクセスが出来ない気もします。

再度、有効化と確認

上記のIPアドレス制限を削除し、再度有効化したところ、今度は数分ですぐに有効化が出来ました。

$ nslookup static.tak1wa.com
Server:        192.168.0.1
Address:    192.168.0.1#53

Non-authoritative answer:
static.tak1wa.com    canonical name = lively-wave-011fda810.1.azurestaticapps.net.
lively-wave-011fda810.1.azurestaticapps.net    canonical name = staticwebappsfbc9c5216da241078cfd4b1da19dd8ba.z01.azurefd.net.
staticwebappsfbc9c5216da241078cfd4b1da19dd8ba.z01.azurefd.net    canonical name = star-azurefd-prod.trafficmanager.net.
star-azurefd-prod.trafficmanager.net    canonical name = dual.part-0018.t-0009.t-msedge.net.
dual.part-0018.t-0009.t-msedge.net    canonical name = part-0018.t-0009.t-msedge.net.
Name:    part-0018.t-0009.t-msedge.net
Address: 13.107.246.46
Name:    part-0018.t-0009.t-msedge.net
Address: 13.107.213.46

TrafficManagerがエッジを向けるように名前解決してくれていますね。
HTTPクライアントでアクセスしたところ、問題なくページへアクセスすることが出来ました。

さいごに

本日はAzure Static Web Apps で エンタープライズレベルのエッジ機能が有効化できないケースを紹介しました。

Static Web AppsのIssueにはFront Doorに先に割り当て済みだったカスタムドメインを再利用する場合に問題が起きる場合があるという情報を確認しました。staticwebapp.config.jsonが怪しくなさそうな方はそちらも見直してみてください。

エッジ機能を有効化出来たけど正しくアクセス出来ないケースの場合も一度staticwebapp.config.jsonを見直してみてください。
条件付きのroute設定などでオリジンからコンテンツを取得出来ないケースとかは普通にありそうです。