Static Web Apps

Static Web Apps はお手軽に静的な Web サイトを提供するだけでなく、API もデプロイできます。

API をデプロイした場合、Azure の他のリソースにアクセスする処理が必要なケースが多いと思います。

API から他のリソースにアクセスするには接続情報を環境変数に持たせる手もありますが、マネージド ID を使用するとより安全でスマートなコードが組めるので良いですよね。

Static Web Apps の API は 2 種類

Static Web Apps の API は マネージド関数 と 独自の関数 の使用という 2 つの構成が存在します。 マネージド関数の方がお手軽に使えますが、下記の表にあるようにマネージド ID（現状の和訳だと「管理対象 ID」になっている）が使えません。

https://docs.microsoft.com/ja-jp/azure/static-web-apps/apis

このため、 独自の関数の使用 を選択する必要があります。

・・・とキレイに書いてみましたが、実際はこの仕様を知らず、Static Web Apps のマネージド ID を有効化して IAM 設定をして「動かないなぁ。。」と悩んでいました。 マネージド関数でマネージド ID を使おうとして、169.254.169.254:80 にアクセスできない旨のエラーを見て気づきました。 上記 IP アドレスは下記のドキュメント等に登場しますが、Azure に対する何らかの問い合わせに使われる IP アドレスです。

https://docs.microsoft.com/ja-jp/azure/active-directory/managed-identities-azure-resources/how-to-use-vm-token

独自の関数の使用

下記のドキュメントを参考に、Azure ポータルからポチポチ設定すれば連携できます。

https://docs.microsoft.com/ja-jp/azure/static-web-apps/functions-bring-your-own

ドキュメントを見なくてもできちゃうくらい簡単です。 まずはマネージド ID を有効化した Functions を用意し、その後 Static Web Apps の「関数」のところからリンクすれば OK です。

Static Web Apps (静的 Web アプリ) って便利ですよね！ 単品のリソース構築で、CDN、Web サーバー、API サーバー、カスタムドメイン with HTTPS、アプリの自動デプロイが一気に実現できるので、これからどんどん活用したいです。

ただ私はまだ慣れていないので、アプリを検証用の GitHub リポジトリで用意してインフラを作り、後から参照する GitHub リポジトリを差し替えたくなりました。 その手順が簡単に分からなかったので、本記事で整理したいと思います。

概要

az staticwebapp disconnect してから az staticwebapp update しましょう。

手順

Azure CLI で対応できました。 まずはいつも通り、Azure CLI で Azure にログインします。

az login -t tenant-id
az account set -s subscription-id

続いて、az staticwebapp disconnect を使用して Static Web Apps を GitHub リポジトリから切断します。

az staticwebapp disconnect --name static-web-app-name

この状態で Azure ポータルから Static Web Apps の概要画面を眺めると、確かに GitHub リポジトリとの関連が無くなっていることが分かります。

最後に az staticwebapp update を実行して、目的の GitHub リポジトリと接続してあげましょう。 GitHub の Personal Access Token が必要です。 (記事執筆時点では –login-with-github のオプションは指定できませんでした)