たくのろじぃのメモ部屋

プログラミング・数学・マイクラなどの内容を備忘録として残すブログ。

Azure Static Web App を使って Blazor アプリをデプロイする

昨年、ASP.NET Core の Web アプリを Azure Web Apps でデプロイしました。

blog.takunology.jp

今回は Blazor アプリを使用してみたいと思います。

必要なもの

学生の方は Azure for Students で登録すると 100 ドル分のクレジットがもらえます。(今回作るものは無料でできます。)

azure.microsoft.com

1. Blazor アプリを作る

表示させたい Blazor アプリを作成します。

Visual Studio にて 新しいプロジェクトの作成 を選択し、テンプレートの検索Blazor と入れます。一覧に Blazor アプリ が表示されるので、これを選択します。

f:id:takunology:20210111110636p:plain

プロジェクト名とソリューション名は自由に決めて、作成 をクリックします。Blazor WebAssembly App を選択して 作成 します。(プロジェクト名はこの後使うので分かりやすい名前をおススメします。)

f:id:takunology:20210116165852p:plain

今回はサンプルのままビルドして動作確認し、Github リポジトリにプッシュします。プライベートリポジトリのままで大丈夫です。

これで Web アプリ側の準備は整いました。次に Azure でリソースを作っていきます。

2. リソースを作る

まずは新規のリソースを作成します。

f:id:takunology:20210111111630p:plain

検索欄に Static Web App と入力し、 Static Web App (preview) を選択します。

f:id:takunology:20210111111644p:plain

作成 をクリックして、必要事項を記入します。

f:id:takunology:20210111112017p:plain

f:id:takunology:20210111112424p:plain

Github アカウントのサインイン をクリックして、サインインします。サインインが完了すると、リポジトリが選択できるようになっているので、組織 リポジトリ 分岐 を選択してください。ビルドの詳細では ビルドのプリセットBlazor とし、アプリの場所 はプロジェクト名 (Blazor アプリ作成時の名前)を入れます。 あとはそのままにします。

f:id:takunology:20210111120725p:plain

このように記入できたら、確認および作成 をクリックします。

f:id:takunology:20210111120822j:plain

内容に間違いがないことを確認して、作成 をクリックします。

デプロイが完了したら リソースに移動 をクリックします。

f:id:takunology:20210111113323p:plain

Webアプリの概要ページが表示されます。

f:id:takunology:20210111122638j:plain

Github Actions にてビルドとデプロイが完了していればチェックマークがつきます。

f:id:takunology:20210111122443p:plain

あとは Azure Static Web Apps の概要ページに表示されている URL にアクセスすると、デプロイした Blazor アプリが表示されます。

f:id:takunology:20210111123112j:plain

修正したあとは再度プッシュすると、自動でビルドされて常に最新状態になります。

参考サイト

参考になったサイトです。ありがとうございます。

docs.microsoft.com