LTで紹介した ASP.NET Core Web アプリ公開デモの手順書です。
実際に手を動かしてみたい方向けの手順書になります。
ASP.NET Core のプロジェクトテンプレートを使用して Web ページを作成し、Azure Web Apps で公開します。必要な手順は大まかに分けて 3 ステップになります。
- ASP.NET Core のプロジェクト作成
- GitHub リポジトリへのプッシュ
- Azure Web Apps のインスタンス作成
たったこれだけで Web ページを公開できます。所要時間は5分ほど（GitHub ワークフローで2分弱）です。
まず、プロジェクトを作成するには Visual Studio の機能で「ASP.NET と Web 開発」が必要です。導入できていない方は Visual Studio Installer からセットアップしてください。
- Visual Studio にて「新しいプロジェクトの作成」を選択
- 「ASP.NET Core Web アプリ」を選択
- プロジェクト名を適当に決めて次へ
- フレームワークは最新のものを選択して作成
Pageディレクトリ内にあるIndex.cshtmlを開いて、一部プログラムを追記してみる。
これでプロジェクトの作成は完了です。
- 上部のタブから「Git」を選択し、「Gitリポジトリの作成」をクリック
- 「作成とプッシュ」をクリック（プライベートリポジトリでもOK）
- タスクが完了していることを確認
-
Azure ポータルを開く
-
リソースの作成をクリック
-
Web アプリを選択（一覧になければ検索してください）
- 必要事項へ記入する
名前はアドレスになります。 ランタイムは先程作成した ASP.NET Core のフレームワークに合わせてください。
| 項目 | 記入例 |
|---|---|
| サブスクリプション | Azure for Students |
| リソースグループ | rg-mstechcamp |
| 名前 | takunology-web |
| 公開 | コード |
| ランタイムスタック | .NET 6 |
| オペレーティングシステム | Windows |
| 地域 | Japan East |
| Windows プラン | そのまま |
| SKUとサイズ | Free F1 |
SKU とサイズに関しては サイズを変更します のリンクから選択することができます。
「開発/ワークロード」から無料プランを選択し、適用をクリックすると無料で作ることができます。
-
「次:デプロイ」をクリック
-
継続的デプロイを有効化し、GitHub と連携する
-
先程プッシュしたリポジトリを選択して「確認および作成」をクリック
- 内容を確認して「作成」をクリック
- 「リソースに移動」をクリック
これでリソースの作成と GitHub との連携は完了です！
インスタンス作成時に、GitHub のワークフローが動いていますので、リポジトリに移動して確認してみます。プッシュしたリポジトリから Actions をクリックすると、実行中のワークフローが表示されます。
画像のように、チェックマークが入っていればデプロイが完了し、Webサイトが公開されています。
Azure のリソースから、「参照」をクリックしてみてください。
先程作成した Web ページが公開されています。URLは azurewebsites ドメインとなります。
これで、Web ページの作成&デプロイは完了です！
Web ページを更新したらリポジトリにコミットして GitHub にプッシュするだけで即座に Azure Web Apps へデプロイされます。
Web ページを運用する必要がなくなった場合は Azure のリソースを削除しましょう。
Azure ポータルから「リソースグループ」を選択し、今回作成したリソースグループ名を選択します。（この例では rg-mstechcamp です。）
「リソースグループの削除」をクリックすると、確認のダイアログが表示されるので、リソースグループ名を入力してから「削除」をクリックします。
