ASP.NET Core で作成したWebページを Azure で公開する

イクラ自動化についてまとめたサイト Minecraft with Code Project は以前、Google Sites で作成していました。便利だったのですが、テンプレートが限られてしまうのと画像や文章の配置が自由に決められず、細かい調整ができません。そこで、ASP.NET Core を使用してWebページを1から作ろうと思いました。

Webページを作成してもレンタルサーバを借りないと公開できません。オンプレで用意するにしても初期費用がエグいので、今回は Azure App Service を利用しました。

Azure App Service を使おうと思った理由はこんな感じです。

1. ASP.NET Core アプリを作る

Visual StudioASP.NET Core のプロジェクトを作成します。私の環境では .NET 5 が導入されているので、ASP.NET Core 5.0 になります。プロジェクトを作成したら、Webページを粛々と作って行きましょう。作り方は Microsoft Learn を参照すると良いと思います。(例えば下記のようなものがあります。)

docs.microsoft.com

2. アプリの発行

アプリができたらソリューションエクスプローラーのプロジェクト名の部分を右クリックして、発行 をクリックします。

f:id:takunology:20210617105904p:plain

公開 から Azure を選択し、

f:id:takunology:20210617110057p:plain

ターゲットを選択します。ASP.NET Core はどのプラットフォームにも対応しているので、私は Linux を選択しました。ここは Windows でも問題ないと思います。

f:id:takunology:20210617110203j:plain

次に、App Service のインスタンスを作成します。既に作成している場合は選択できる状態ですが、無い場合は + ボタンをクリックして必要事項を記入していきます。 リソースグループやインスタンス名を入力できたら項目に表示されるので、選択して次へ進みます。

f:id:takunology:20210617111108j:plain

f:id:takunology:20210617111638j:plain

次にデプロイ方法を選択します。Azure に直接デプロイもできますが、ここでは Github Actions を選択します。

f:id:takunology:20210617111318j:plain

Github との連携が行われ、ワークフローが作成されます。この状態でコミットとプッシュを行うと、CI/CD が実行されます。

f:id:takunology:20210617112017j:plain

ただし、このまま実行しようとするとエラーが表示されてビルドに失敗します。

MSBUILD : error MSB1003: Specify a project or solution file. 
The current working directory does not contain a project or solution file. github]

「現在のワーキングディレクトリ内にソリューションまたはプロジェクトファイルが存在しません」というエラーです。デフォルトで設定されているワーキングディレクトリはリポジトリの一番上の階層です。

f:id:takunology:20210617113030p:plain

プロジェクトファイルが入っているのは私の場合、 MCProjectWebSite なので、このディレクトリを指定する必要があります。.github/workflows ディレクトリに入っている yml を開きます。この中の env: , WORKING_DIRECTORY: を探してください。私の場合はこのようになっています。

env:
#省略 
  WORKING_DIRECTORY: .

WORKING_DIRECTORY. (カレントディレクトリ)になっているので、ここをプロジェクトファイルのあるディレクトリに変更してください。

env:
#省略
  WORKING_DIRECTORY: MCProjectWebSite

このように変更できたら保存して再度プッシュします。問題がなければビルドとデプロイが完了します。

f:id:takunology:20210617114224p:plain

この状態で、Azure App Service ダッシュボードの URL に表示されたリンクをクリックすると、いい感じにページが表示されます。

f:id:takunology:20210617114414p:plain

Webページを更新して Github にプッシュすると、自動でビルド→テスト→デプロイが行われ、常に最新の状態になります。不備があればデプロイが弾かれるので、「Webページが表示されない!」なんてことはありません。CI/CD って便利ですね。

3. まとめ

ASP.NET Core を Visual Studio で作成して Github Actions にプッシュすると、CI/CD でビルドとテストが行われ、Azure App Service へ自動でデプロイできます。ここまでできれば、あとはソースコードを変更してプッシュするたびに、最新の状態に更新されます。

今回作成した MInecraft with Code Project のサイトはこちらにあります。マイクラに興味がある方はぜひ。

www.mcwithcode.com

イベントのお知らせ

2021年6月24日(木)20:00 より、MS Tech Camp #8 を開催します!
今回は Microsoft Imagine Cup 2021 に出場した学生チームをお招きして、応募した作品や使用した技術などについての話を伺います。これから開発しようとしている方、学生がどのような技術を用いて何を開発しているのか興味がある方、ぜひご参加ください!社会人の方も大歓迎です!

mspjp.connpass.com