Azure Static Web Apps の閉域化について改めて整理・検証してみた

こんにちは、MS開発部の渋谷です。

クラウドネイティブ開発が当たり前になった今、Webアプリケーションに求められる要件は、高パフォーマンスや迅速なデプロイだけではありません。

企業システムとして運用するためには、どれだけシンプルにセキュアな環境を構成できるかが重要です。

Azure Static Web AppsはAzureに用意された静的Webサイトのホスティングサービスです。

サーバーレスでWebアプリが簡単にホストできる一方で、閉域化については少々ややこしい部分があります。

本記事ではあらためてAzure Static Web Appsの閉域化方法を調査し、実際に検証してみることにしました。

Azure Static Web Appsとは？

Azure Static Web Apps（略称: SWA）は、静的なフロントエンドとサーバーレス API を組み合わせたモダン Web アプリを、シンプルな構成で高速に公開できるフルマネージドサービスです。リポジトリへの変更をトリガーに、自動ビルド&デプロイ（CI/CD）が実行され、開発から公開までの流れをスムーズにします。

静的アセットはグローバルに分散配置され、高速に配信されます。対応するフレームワークも React、Vue、Angular、Next.js など多岐にわたり、開発者は普段使いのツールでそのまま利用できます。

設定面では、ルーティングやリダイレクト・認証/認可の制御が可能で、アプリの振る舞いを柔軟にカスタマイズできます。また、ローカル開発にはSWA CLIが用意され、認証・API・ルーティングなどを手元でエミュレーションしながら開発できます。

さらに、必要に応じてAzure Functionsと統合したバックエンドAPIを簡単に追加でき、静的サイト+サーバーレスAPIという構成を自然に取り込めるのも大きな特徴です。

実際に試してみた

ステップバイステップで整理をしながら理解を進めていきます。

まずはAzureポータルでAzure Static Web Appsを作成します。以下のように1つのStatic Web Appsリソースが作成されます。

アプリが正常にデプロイされていれば、発行されたURLからアプリにアクセスすることができます。

Static Web Appsの内部構成は以下のようになっています。Functionsはリソースとして表示はされていないので、サービスに内包されているようです。(=マネージド関数と公式ドキュメントには記載されています)

Static Web Appsの設定画面からPrivate Endpointをデプロイします。

先ほどと同じURL(=Public IP)からアクセスしようとすると403エラーがでます。Private Endpointで設定されたPrivate Endpoint経由でしかアクセスできない状態になりました。

ここまでの設定を整理すると以下の図のイメージになります。

つまり、ここまでで分かったことは以下の2つです。

1. 静的コンテンツへのアクセスはPrivate Endpointで閉じることができた
2. マネージド関数でホストされている部分は見ることができないので、Private Endpointが置けない

Static Web Appsの「API」セクションを開くと、マネージド関数ではない個別に作ったAzure Functionsの呼び出し設定ができます。

Azure Functionsを外出し(=Bring Your Own Functions)すればPrivate Endpointを置けそうですが、公式ドキュメントには以下のように書かれています。

つまり、以下のような構成は作ることができないことが分かります。

まとめと回避策

ここまでの調査・検証結果を整理すると以下のようになります。

• Static Web AppsサービスのPrivate Endpoint: サポート中
• マネージド関数のPrivate Endpoint: 不可
• 個別に作ったAzure FunctionsのPrivate Endpointとの連携: 不可

公式ドキュメントの最終更新も2023年11月で止まっているため、すべてのリソースをPrivate Endpointを用いて閉域化できるのは当面先のサポートになりそうです。

もしどうしても閉域化をしたい、しなければならない場合にはApp Service上でFunctionsをホストするという方法があるようですが、実際の運用においては検証が必要です。

さいごに

今回はAzure Static Web Appsの閉域化について整理・調査・検証をしました。

本記事の内容は記事作成時点での情報を基にしています。最新情報は必ずマイクロソフトの公式ドキュメントをご参照ください。

皆様の業務に少しでもお役に立つ情報をお届けできていれば幸いです。