何故か Build 2021 の開催 2 週間前という謎のタイミングで Static Web Apps が GA したので、Hack Azure! #6 として三宅さんを中心に話す会を開催しました。App Service / Azure Functions チームとほぼ同じ中の人なので、リリースをイベントに合わせる必要はないという認識のようです。
今回は女性エンジニアを応援するコミュニティの Code Polaris と初の共同開催となりました。
静的サイトジェネレーター周りに関しては三宅さんや松井さんといった有識者に任せるとして、主に Static Web Apps に関連する部分をまとめることにしました。
- Twitter まとめと YouTube アーカイブ
- GA での変更点や CLI など
- リージョンとアーキテクチャの再確認
- ビルドのカスタマイズ
- staticwebapp.config.json の設定ミスを減らす
- GitHub Codespaces を使ったデバッグ
- 独自の Azure Functions を持ち込む
- カスタム認証プロバイダーを利用
- Terraform を使って SWA をデプロイ
今回はフォローアップを書く前にスピーカーの皆様がブログを公開してくれていたので楽が出来ました。
Twitter まとめと YouTube アーカイブ
配信中のツイートまとめと YouTube での配信アーカイブは既に公開されているので、見逃した方やその時の雰囲気を知りたい方はそれぞれを参照してください。
前半の Nuxt.js を使ってアプリケーションを作成しつつ、SWA CLI でローカル実行する部分はデモ映えして良いですね。自分のターンは基本的に地味な部分なので、とりあえずやりたいことを詰め込みました。
GA での変更点や CLI など
Static Web Apps が GA して何が変わったのかと、CLI については三宅さんがとっくの昔に公開してくれているので、ありがたく参照しておきます。
Standard Plan やカスタム認証プロバイダーの対応が重要なポイントかなと思います。Free Plan でも Zone Apex ドメインが利用可能*1なので、多くのケースでは Free で十分なのではないかと思います。
リージョンとアーキテクチャの再確認
Twitter を見ていて多かった質問はリージョンに関する部分だと思います。Static Web App の作成時に指定するリージョンは GA 少し前に表示が変わって、Azure Functions と Staging が置かれる場所と明記されました。
流石に Azure Functions を勝手にグローバルにデプロイするのは無理な話ですが、静的コンテンツであれば CDN を使って配信するのが当たり前なのでリージョンを意識する必要が無いのは自然です。ただし現状の Static Web Apps は CDN ではなく、各リージョンに用意された ASE でホストされている形になっているので、CDN と異なりリージョンが若干少ないです。
この辺りに関しては以前書いたアーキテクチャと変わっていないようなので、興味ある方は参照してください。ぶっちゃけ裏側を知らなくても十分使えるサービスです。
デプロイが Pull 型になっているので、今後 Japan East が追加された場合には自動的にデプロイされて使えるようになるのだと思います。とはいえ CDN があった方が嬉しいですが、Zone Apex や証明書周りで若干難がありそうなので対応するとしても時間はかかりそうです。
ビルドのカスタマイズ
プレビューの頃はビルドを完全にデプロイタスクに任せる必要があったので、カスタマイズ性が低かったですが少し前からアプリケーション側のビルドをスキップするオプションが追加されました。
ビルドコマンドだけのカスタマイズしか出来なかったのが、ビルドをスキップするオプションによってデプロイだけさせるように出来るので、比較的柔軟に扱えるようになったかと思います。
Azure Functions に関しては独自の Function を持ち込むことで完全なカスタマイズが可能です。
staticwebapp.config.json の設定ミスを減らす
デモ中でも若干はまっていましたが staticwebapp.config.json に関しては Schema Store で JSON Schema が公開されているので、これと対応したエディタを利用することでミスを減らすことが出来ます。
JSON Schema の指定は JSON ファイルの先頭に $schema というプロパティを追加するだけです。VS Code などの対応したエディタではグローバル設定などでルールを追加できるようです。
{ "$schema": "https://json.schemastore.org/staticwebapp.config.json", "routes": { ... } }
実際に JSON Schema を追加すると VS Code で入力補完が聞くようになるのでサクサク書けます。
現在 Schema Store で公開されている JSON Schema は auth が定義されていない GA 前のバージョンですが、今後更新されるかと思います。特に OpenID Connect 周りの設定は JSON Schema があった方が楽です。
GitHub Codespaces を使ったデバッグ
飛び入りで horihiro さんに見せていただいた GitHub Codespaces を使った Static Web Apps の開発とデバッグはなかなかインパクトがあったと思います。
外出先で iPad しかないような状況でも、サクッと不具合対応などが行えそうです。
独自の Azure Functions を持ち込む
自分が担当したデモの部分です。基本的にはドキュメント通りかつ、Azure Functions 自体はこれまで通りなので /api prefix でルーティングが固定されることだけ注意しておけば問題ありません。
Azure Functions を Static Web App にリンクすると、自動的に特殊な App Service Authentication の Identity Provider が追加されるため、基本的には SWA 経由のアクセスしか出来なくなります。
配信では Azure Portal からの設定は無理と言いましたが、実際には App Service Authentication の設定から変更可能でした。なので開発中に制限を緩くすることも出来ますが、基本的には推奨されません。
ちなみに ARM Explorer で見ると Identity Provider は以下のように設定されていました。
この辺りの対応は ARM レベルで行われるのか、それとも Portal が複数の API を呼び出すことで行われているのかが分からないため、Terraform などで使う場合にネックとなりそうです。
カスタム認証プロバイダーを利用
プレビュー中は Azure 側が用意済みのアプリケーションにユーザーを招待する形での認証が使えましたが、Standard Plan では独自の AAD や OpenID Connect などのプロバイダーが使えるようになっています。要するに App Service Authentication と同じです。
この辺りは横浜さんが既にブログで Azure AD B2C の設定方法、所謂 OpenID Connect を使った方法を書いてくれているので、そちらを参照してください。OIDC に関してはドキュメントに問題があります。
認証プロバイダーに関連して、謎の NuGet パッケージも公開されているようですが、ドキュメントが無くサンプルコードしかないので興味のある方は覗いてみてください。
パッと見は Blazor WebAssembly 向けっぽいので、そっち方面に強い人に試してもらいたいです。
Terraform を使って SWA をデプロイ
GA 後少ししてから Terraform でも Static Web Apps のデプロイに対応したようです。Bicep とは違い ARM を直接叩くものではないので対応に時間がかかりますが、ARM は癖のある仕様が多いので Terraform とかで綺麗に使えた方が幸せです。
この辺りに関しても既に大平さんが Zenn に記事を書いてくれているので、Terraform を使った Static Web Apps のデプロイに興味がある方はぜひ参照してください。
予想はしていましたが API キーの扱いだけは少し面倒ですね。流石に Terraform から GitHub の Secrets に自動登録させるのも現実的ではないので、手動が嫌な場合は Key Vault に入れるのが良さそうです。
*1:ただし Alias record (CNAME Flattening) へ対応した DNS プロバイダーが必要
