Qiita Azure Advent Calendar 2021 6日目の記事です。
最近 Blazorの書籍を読んでいて、「Blazor を使ってホームページを作れるのでは？環境は Azure App Service を使えばいいのでは？」と思ったのでやってみた。
環境
- Visual Studio 2022
- Azure App Service
Blazor プロジェクト作成
Blazor Server アプリのプロジェクトを作成する。 フレームワークは Azure App Service で利用可能になった .NET 6 を選択する。
プロジェクト作成後にコードを修正して、インデックスページ、プライバシーポリシーページの用意、サイドメニューを消した程度のシンプルなページを用意。デバッグして表示される事を確認する。
確認したソースコードは Azure Web Apps と連携させるので、 GitHubにリポジトリーを作成してプッシュしておく。
Azure App Service 作成
Azure にログインして、「リソースの作成」 - 「Web アプリ」を選択する。
基本設定は、 Blazor のプロジェクトを .NET 6 で作成したのでランタイムスタックを .NET 6 を選択した。プランの設定は後ほど。 その他はお好みで。
デプロイ設定で「継続的なデプロイ」を有効にすると、 GitHub の情報が表示されるので、用意したリポジトリーを選択する。 (初めて有効にした場合、 GitHub アカウントと連携するポップアップが出るので、対象アカウントの情報を入力する。) 「ファイルのプレビュー」ボタンは、 GitHub Actions で使用するワークフローのファイルを確認できる。
Application Insights は本番環境であれば有効にしておいた方が無難。
設定を確認したら作成ボタンをクリックして完了する。
完了後に GitHub のリポジトリーを確認すると、 .github/workflows ディレクトリーと、その中に GitHub Actions の YAML が連携した Azure によって自動で追加されている。
GitHub Actions でデプロイが動いている事も確認。
デプロイ後に App Service のURLで表示される事を確認できれば完了。
これで GitHub にコミット、プッシュすればホームページが更新される環境が出来た。
独自ドメイン
App Service の「azurewebsites.net」ドメインではなく、独自ドメインでアクセスするために、まず Azure App Serviceに好きなドメインを設定したい に書いた、ドメイン追加設定をする。
App Service プラン は、「カスタムドメイン/SSL」が使用可能なプランに変更する。今回は B1 を選択した。
カスタムドメインの「カスタムドメインの追加」で使いたいドメインを追加する。「HTTPSのみ」をオンにするかはお好みで。
SSL設定を設定する場合、 App Service マネージド証明書 を設定する に書いた通り、「App Service マネージド証明書の作成」を無料で利用できる。
URLが独自ドメインになっている事を確認できたら完了。
まとめ
- Blazor については、 ASP.NET Core Blazor の概要 や書籍を参照。
- 今後ホームページの内容を変更したかったら、 GitHub へプッシュ → 対象ブランチへマージで反映される。ソースコード以外の土台の部分は基本的に Azure App Service が管理してくれるので、コーディングに集中できるのではと思う。
- ホームページとして用意するので、いつアクセスされても大丈夫なように「構成」 - 「全般設定」 - 「常時接続」はオンにしておく。(常時接続は App Service プラン を B1 以上に設定しないと使えない。)
- App Service プランは、B1で月額約5,600円かかる(2021年11月現在)。月額約5,600円という金額は仮想マシン に WordPress を構築するより割高感はある(B1 プラン(1.75GB)に近いメモリサイズの仮想マシンは B1ms(2GB)で、月額約2,400円。)。
- GitHub プライベートリポジトリーの場合、GitHub Actions を利用してのデプロイは無料枠を使いたかったらデプロイ時間、ストレージに気を付ける(GitHub Actionsの支払いについて 参照)。
- おそらく、「Web アプリの作成」で公開方法「Docker」を選択すると、Docker イメージがストレージを圧迫すると思われるので、公開方法は「コード」を出来るだけ選んだ方が良さそう。(Docker だとイメージ作成時間は確実に増える。)
