たくのろじぃのメモ部屋

プログラミング関係や数学、物理学などの内容を備忘録として残すブログ。

Azure上に ASP.NET Core アプリをデプロイする方法

ASP.NET Core アプリを作成したのはいいのですが、Webサーバを自分で用意するのは大変なので、クラウドサービスを利用することにしました。大変な部分はサーバを安定して運用していくためにメンテナンスが必要だったり、セキュリティ対策をしっかりする必要があったりです。あと初期費用や運用費用も考えると個人でやるには敷居が高い気もします。

そこで今回は Azure のサービスを利用して自分の作成したWebアプリを公開していけるようにします。

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

まずはWebアプリを作っていきます。Visual Studioを立ち上げて「新しいプロジェクトの作成」を選択し、検索欄にASPと入れれば候補が出てきます。

f:id:takunology:20200326122122p:plain

青で表示されたフレームワークを使用して作成していきます。テンプレートはMVC(モデルビューコントローラ)でいいと思います。自分の作りたいように作りましょう。

f:id:takunology:20200326122319p:plain

ちなみに自分が作ったものはこんな感じになりました。

f:id:takunology:20200326122900p:plain

しかしこのままではローカルホストからしか接続できないので、公開できるような形にしていきます。

2. Azure Webアプリのリソース作成

Webページが作成できたらWebサーバを立ち上げます。まずは Azure のホーム画面から「リソースの作成」を選択し、「Webアプリ」を選択します。入力画面が表示されるので、色々記入していきます。ちなみに自分は学生なので Azure for Students のサブスクリプションが使用でき、料金は発生しませんでした。学生以外の人は料金が発生するのでしょうか...?

f:id:takunology:20200326123458p:plain

ここで、インスタンスの名前はURL名になります。また、ランタイムスタックはWebアプリの環境に合わせましょう。今回は ASP.NET Core なので、.NET Core 3.1 を選択します。ちなみにバージョンが 3.1 でアプリが 3.0 であっても問題なく動作しています。
記入内容を確認した後、確定するとデプロイ進行中の表示がでます。

f:id:takunology:20200326124117p:plain

作成には少し時間がかかるのでしばらく待ちます。

f:id:takunology:20200326124352p:plain

こんな画面になればデプロイ完了です。あとはここに自分の作成した Web アプリをデプロイするだけですね。「リソースへ移動」をクリックして次の作業を行います。

3. GitHubと連携してデプロイする

普通は仮想マシン上に Apache やら nginx やらの環境を整えて、そこにリバースプロキシを設定した上で ASP.NET Core のデプロイを行うところですが、そんな作業は必要ないです。

なんと、Github のアカウントを持っていれば連携ができます!
まずは GitHub に Web アプリのリポジトリを作っておきましょう。その中に作成したWebアプリをプッシュしておきます。ちなみにリポジトリはプライベートでも問題ないですが、アクセス許可が必要です。

GitHubでの作業が終わったら再び Azure のリソース画面に戻り、「デプロイセンター」を選択します。

f:id:takunology:20200326131702j:plain

ソース管理は GitHub を選択します。ログインしてアクセスを許可します。

f:id:takunology:20200326131758p:plain

ビルドプロバイダーは App Service のビルドサービスを選択します。

f:id:takunology:20200326132104p:plain

構成ではリポジトリの参照を行うので、先ほどアップロードした Web アプリのリポジトリを選びます。もし、表示されない人はページの更新を試してみてください。もしかするとリンクを反映するのに多少時間がかかっていると思います。あとは概要を確認して設定完了です!

4. Webページへアクセスしてみる

GitHubでのデプロイは少し時間がかかるので待ちましょう。ちなみにデプロイが完了しているかは、デプロイセンターで確認でき、「成功」という表記があればデプロイ完了です。

f:id:takunology:20200326133143p:plain

Azure では インスタンスの名前.azurewebsites.net というURLが割り振られますので、ここにアクセスしてみます。私の場合はこんな感じになりました。

takunology.azurewebsites.net

アクセス履歴やトラフィック等のモニタリングはリソースの「概要」から見ることができます!便利ですね!

f:id:takunology:20200326132825p:plain

5. Webページ更新したいんだけど...

可能です。まずは更新したWebページを GitHub にプッシュします。再びデプロイセンターを開き、「同期」をクリックすると更新したブランチとの同期をとり、Webページも更新されます。

f:id:takunology:20200326133504p:plain

ステータスが保留になっていますが、しばらくすれば「成功」と表示されるはずです。

おわりに

Azure の Webアプリって便利だと思いました。GitHubと連携しておけば、更新するたびに自動でWebページも新しくなるので楽できますね。加えてサーバメンテも必要ないので個人で利用するには良いと思います。あと、Webアプリの勉強をしている学生は無料で使えるのでオススメです。

ちなみに、「たくのろじぃの自習室」はこのまま運用を続けます。ブログだけでなく、Webアプリの勉強もしながら色々な情報発信ができていければと思います。今のところ特に内容が無いので、これからコツコツ作っていきます。一応プログラミングと理学系の分野をまとめていくつもりです。