Azure Static Web Appsを試してみた

はじめに

以前より気になっていたサーバーレスの Web アプリ ホスティング サービスである、
「Azure Static Web Apps」が2021年05月12日にGAされました。
どんなものか触ってみようと思います。

リソースの作成

ポータルでの作成

Visual Studio Codeの拡張機能でも出来るのですが、今回はいつもとおり、Azureポータルを利用してリソースを作成したいと思います。

1. ポータルのリソース作成から「Static Web Apps」を選択します。
   

2. 必要事項の入力
   必要を事項を入力し、リソースを作成します。

• 静的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の場合
  • https://ランダムな文字列.azurestaticapps.net

その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との連携を試してみようと思います。