昨年、ASP.NET Core の Web アプリを Azure Web Apps でデプロイしました。
今回は Blazor アプリを使用してみたいと思います。
必要なもの
- Github アカウント
- Azure アカウント
- Visual Studio / VSCode などの開発環境
学生の方は Azure for Students で登録すると 100 ドル分のクレジットがもらえます。（今回作るものは無料でできます。）
1. Blazor アプリを作る
表示させたい Blazor アプリを作成します。
Visual Studio にて 新しいプロジェクトの作成 を選択し、テンプレートの検索 に Blazor と入れます。一覧に Blazor アプリ が表示されるので、これを選択します。
プロジェクト名とソリューション名は自由に決めて、作成 をクリックします。Blazor WebAssembly App を選択して 作成 します。（プロジェクト名はこの後使うので分かりやすい名前をおススメします。）
今回はサンプルのままビルドして動作確認し、Github リポジトリにプッシュします。プライベートリポジトリのままで大丈夫です。
これで Web アプリ側の準備は整いました。次に Azure でリソースを作っていきます。
2. リソースを作る
まずは新規のリソースを作成します。
検索欄に Static Web App と入力し、 Static Web App (preview) を選択します。
作成 をクリックして、必要事項を記入します。
Github アカウントのサインイン をクリックして、サインインします。サインインが完了すると、リポジトリが選択できるようになっているので、組織 リポジトリ 分岐 を選択してください。ビルドの詳細では ビルドのプリセット を Blazor とし、アプリの場所 はプロジェクト名 （Blazor アプリ作成時の名前）を入れます。 あとはそのままにします。
このように記入できたら、確認および作成 をクリックします。
内容に間違いがないことを確認して、作成 をクリックします。
デプロイが完了したら リソースに移動 をクリックします。
Webアプリの概要ページが表示されます。
Github Actions にてビルドとデプロイが完了していればチェックマークがつきます。
あとは Azure Static Web Apps の概要ページに表示されている URL にアクセスすると、デプロイした Blazor アプリが表示されます。
修正したあとは再度プッシュすると、自動でビルドされて常に最新状態になります。
参考サイト
参考になったサイトです。ありがとうございます。
