はじめに
以前より気になっていたサーバーレスの Web アプリ ホスティング サービスである、
「Azure Static Web Apps」が2021年05月12日にGAされました。
どんなものか触ってみようと思います。
リソースの作成
ポータルでの作成
Visual Studio Codeの拡張機能でも出来るのですが、今回はいつもとおり、Azureポータルを利用してリソースを作成したいと思います。
-
ポータルのリソース作成から「Static Web Apps」を選択します。
-
必要事項の入力
必要を事項を入力し、リソースを作成します。
- 静的Webアプリの詳細
- Static Web Appsの名前
- ホスティングプラン
- Free/Standardが利用可能
- Free/Standardの違いについてはこちらをご確認ください
- Azure Functions とステージングの詳細（リージョン
- 2021/6/14 時点では「Central US」「East US」「East Asia」「West Europe」「West US」が選択可能なようです。（日本リージョンは未対応）
- デプロイの詳細
- GitHubアカウントと連携し、リポジトリーを紐づけます。
- ビルドの詳細
- フロントエンドに採用しているFWを選択します（今回はAngular
- アプリの場所(必須)
- 規定値（/）
- API の場所
- 空白
- 出力先
- Buildで出力されるディレクトリ(今回はdist/App名）
動作確認
作成されたAzure Static Web Appsのリソースに行くと、概要のURLの欄にいつものルールとは異なるURLが払出されています。
- Web Appsの場合
- https://{webappsの名前*}.azurewebsites.net
- Static Web Appsの場合
そのURL「https://ランダムな文字列.azurestaticapps.net」をクリックすると、GitHubに登録してある資材で画面が表示されます。
せっかくなので、ng newで作成したAngularのひな形プロジェクトをポータルで設定したブランチにPUSHしてみようと思います。
すると・・・
ビルド後のAngularのひな形ページが表示されています。
どうも、Static Web Appsを作成した際に指定したリポジトリーの情報と採用したフレームワーク(Angular)で自動Buildと自動Deployを行っているようです。
Build/Deployのルールはyamlファイルとして、リソース作成時にAzureからGitHub上のリポジトリーにPUSHされていました。
また、Build/Deployの履歴もGitHub Actionに履歴として保存されていました。
まとめ
Azure Static Web Appsのさわりだけ試してみましたが、GitHubとの連携含めて自動Build/DeployまでをUI上だけで実現できるのは、非常に優秀で可能性を感じました。
次回は、GitHub以外でのリポジトリーやFunctionsとの連携を試してみようと思います。