BlazorとAzure Static Web Appsが気になってたのでやってみました。
GitHubにリポジトリ作成
Azure Static Web Appsにデプロイする際のソースとしてGitHubのリポジトリを使うので、Blazorで作った
WebアプリのソースをGitHubに上げておきます。
今回はBlazor Web Assemblyで作成した素のプロジェクトを使っていきます。そしてリポジトリの作成ですが、
GitHubのアカウントさえあれば、Visual Studio上でアカウントの連携やらリポジトリの作成までできてしまいました。便利ですね。
Visual Studio 2019のVersion 16.9.3を使ってます。
Azure Static Web Appsの作成
AzureポータルでAzure Static Web Appsのリソースを作成します。
「デプロイの詳細」の「ソース」はGitHubでさきほど作成したリポジトリを選択します。「ビルドのプリセット」はBlazorを選択して、「アプリの場所」はプロジェクト名を入れます。APIの場所、出力先はデフォルトのままにしておきます。これで作成すると、Webアプリのビルドとデプロイが始まります。
デプロイされたWebアプリの確認
作成したAzure Static Web Appsのリソースに移動して、↓のURLをクリックするとデプロイされたWebアプリを見ることができます。
ちゃんとデプロイされてますね。アプリ名が長いから見切れてます。
CI/CD
Azure Static Web Appsのリソースを作成したときにGitHub Actionsにビルドとデプロイをやってくれるワークフローが作られていました。
Azure Static Web Apps CI/CDという名前のやつですね。
ワークフローファイルを確認すると、masterブランチがpushされるとビルドとデプロイが実行されるようになっていました。試しに適当にファイルを修正してpushしたらビルドとデプロイが始まって、Webアプリが自動的に更新されました。
まとめ
所要時間約30分ほどでWebアプリの作成からデプロイまでできました。Azure Static Web Appsはまだプレビュー版ですが無料で簡単に作れるお手軽感がかなり良かったです。
