ゼロからはじめるAzure(51) Azureの登録からWebアプリケーションの公開（2023年改訂版）

はじめに

2017年からスタートした本連載も、早いもので足掛け7年目となります。その中で、さまざまなサービスを紹介してきましたが、中核となるサービスの解説が大きく変わって、「ゼロから」はじめられないという声も戴くようになりました。そこで今回は、第1回の2023年改訂版として、Azureの概要から導入、Azure App Serviceによるアプリの公開までを扱います。

なお、今回は次の環境で動作確認を行っています。

Windows 11 Pro
Visual Studio Professional 2022 Version 17.4（以降、VS2022）

Azureとは？

Azure(Microsoft Azure)とは、マイクロソフト社が提供するクラウドサービスです。AmazonのAWS（Amazon Web Service）やGoogleのGCP（Google Cloud Platform）と並び世界中で採用されているクラウドサービスです。

Azureが提供する主要なサービス

Azureは単純なコンピューティングリソースのみを提供するということだけではなく、様々な用途に特化した200以上のサービスを組み合わせることで種々の課題を解決することができるようになっています。

以下に代表的なサービスをいくつか紹介します。

①仮想コンピューターや仮想ネットワーク

・Azure Virtual Machines（Azure VM）
Azure上に仮想マシンを構築することのできるサービス。Windowsはもちろんのこと、Linux系のOSも利用することができます。

・Azure Virtual Network
Azureクラウド上に仮想のネットワーク基盤を作成することのできるサービス。仮想ネットワーク内にAzure VMや他のAzureのリソースを配置することでプライベートネットワークを構成しつつもインターネットとの通信も可能になります。

②アプリケーションの実行基盤

・Azure App Service
Webアプリやモバイルアプリをデプロイすることのできる基盤を提供するサービス。.NETやJava、Node.js、PHP、Pythonなどの言語のアプリケーションをデプロイすることが可能で、自動スケーリングや継続的インテグレーション（CI）と継続的デリバリー（CD）を使ったアプリケーションのデプロイなどにも対応しています。

・Azure Database
フルマネージドなRDBMSを提供するサービス。SQL Serverをはじめ、MySQL、MariaDB、PostgreSQLなどのRDBMS製品がサポートされています。またオンプレミス環境にあるデータベースからAzure Databaseへの移行をサポートするAzure Database Migration Serviceといったサービスも存在します。

・Azure Cosmos DB
Cosmos DBはNoSQLデータベースを提供するサービスです。MongoDBやApache Cassandraなどをサポートし、分散型データベースを使用することで高可用性で高パフォーマンスなNoSQLデータベースとして利用することができます。

・Azure Storage
さまざまな形式のデータオブジェクトをAzure上に保存するためのサービス。Storageには、バイナリやテキスト形式のデータ保存を行う「BLOB」や「Files」、メッセージングキューを実現できる「キュー」、Azure VMのイメージを保存するための「マネージドディスク」など、用途に適したサービスが提供されています。

・Azure Kubernates Service
コンテナ化されたアプリケーションの実行や管理を行うKubernatesを利用することのできるサービス。Kubernatesのインスタンス作成やリソースの最適化などの煩雑なインフラ面をAzureがマネージドサービスとして提供するため、一からKubernatesの構築をせずに利用を開始することができます。

③機械学習やAI

・Azure Machine Learning
機械学習プロジェクトに必要な学習モデルのトレーニングやデプロイなどのライフサイクルの実行と管理をするためのサービスです。

・Azure Cognitive Services
自然言語や音声・画像認識などのAIサービスをアプリケーションに組み込むためのサービスです。

④開発・運用支援

・Azure DevOps
Azure DevOpsは開発（Dev）と運用（Ops）の連携に必要なサービス群を集約したサービスです。チームのコラボレーション管理を行う「Azure Boards」や、CI/CDのパイプラインを作成することのできる「Azure Pipelines」などが含まれています。

・Azure Monitor
アプリケーションやネットワークなどのパフォーマンス管理やログ収集などの監視業務に必要な分析情報をAzureのサービスを横断して管理できるサービスです。

これらのサービスは必要なときに必要なだけ利用することができ、使用した時間に応じた金額が課金されますので、物理サーバを抱える場合に比べサービスの成長に合わせて迅速で効率的な運用が可能となります。

上記で紹介した以外のサービスについては、Microsoft AzureのWebサイトにて紹介されていますので、ご興味のある方はご確認ください。

Azureへの登録

それでは早速Azureでアカウントを作成しましょう。

［1］Azureアカウントを作成する

Microsoft Azureのサイトにアクセスし、「無料で始める」をクリックします(注：執筆時現在、30日間有効の200ドル分の無料クレジットを取得することができます)。

Azureのサイト

Azureへの登録にはMicrosoftアカウントが必要となりますので、お持ちでない場合にはこの機会に取得してみてください。

［2］必要情報を入力する

ここでは、次の情報を入力しますので予め準備しておいてください。

自分の情報：国/リージョン、氏名、電話番号、メールアドレス
電話番号による本人確認：電話番号による認証(テキストメッセージまたは電話による確認コード)
クレジットカードによる本人確認：クレジットカード情報の入力(明示的に有料プランへのアップグレードを行わない限りは課金されることはありません)
契約：同意確認

Azureアカウントの作成画面

上記情報の入力または本人確認が終わったら「サインアップ」ボタンをクリックします。数分ほどでAzureアカウントが作成されます。

［3］Azureポータルにアクセスする

サインアップが完了したら、Azureポータルというダッシュボードにアクセスしてみましょう。サインアップ完了画面の「Azure Portalにアクセスする」ボタンを選択するか、AzureポータルのURLからアクセスすることができます。

Azureの登録（サインアップ）完了画面

Azureポータルにアクセスすると、「クイックスタートセンター」という画面が表示されます。

Azureポータルの画面

このダッシュボードからAzureで提供されている仮想マシンやストレージなど、様々なリソースの作成、管理を行うことができます。

ASP.NET Coreのプロジェクトを作成し、Azureで公開

本記事では、VS2022で作成したASP.NET CoreのプロジェクトをApp Serviceの一つであるWeb Appsとして公開するところまでを紹介します。

Web Appsとは

Azure Web AppsはWebサイトやWebアプリケーションをホスティングするためのサービスで、.NETを始めとしてJava、Node.js、PHP、Pythonなどの言語やフレームワークで実装したアプリケーションをデプロイすることのできるAzureのPaaS（Platform as a Service）です。PaaSであるためマシンリソースの割当てや負荷分散やスケーリングなどのサーバーを運用する上での管理作業をAzureに任せることができるため、開発者はアプリケーションの開発に集中することができるようになります。 Azure Web Appsは気軽に始められる一方で、高度な用途にも適しています。例えばGitHubやBitBucketなどのソースコードリポジトリと連携して継続的インテグレーション（CI）や継続的デリバリー（CD）を実現させることができるため、ソースコードを変更する度にアプリケーションを自動的に更新するような仕組みを作ることも可能です。またデプロイスロットと呼ばれる機能ではステージング環境と運用環境という2環境が用意され、ステージング環境でアプリケーションのテストを実施し、リリース可能と判断したら運用環境とステージング環境を数秒で入れ替える（スワップ）といったリリース方法も実現できるようになります。その他にもAzureが提供する他のサービスとの連携がサポートされているため、小規模から大規模なアプリケーションまで対応できる柔軟性を持っています。

Azureワークロードのインストール

Visual Studioには、使用する言語やプラットフォームに必要なコンポーネントを追加することのできる「ワークロード」と呼ばれるアドオン機能があります。Visual Studioでは、ASP.NETでのWeb開発およびAzureプラットフォーム向け開発向けのワークロードが用意されているため、それらをインストールしていきます。ワークロードを追加するには、Visual Studioインストーラーを使用します。Visual StudioインストーラーはVS2022の[ツール]ー[ツールと機能を取得]から起動するか、Windowsのメニューから「visual studio installer」と検索することで起動できます。

Azureワークロードのインストール

Visual Studioインストーラーが起動できたら、「ワークロード」タブにある「ASP.NETとWeb開発」と「Azureの開発」の項目にチェックを入れて「変更」ボタンを選択します。ワークロードのインストールには少々時間がかかりますが、完了したらVS2022を起動してみましょう。

プロジェクトの作成

Azureワークロードがインストールできたら、VS2022でASP.NET Coreを使ったプロジェクトを作成します。VS2022のメニューから[ファイル]ー[新規作成]ー[プロジェクト]を選択し、新しいプロジェクトを作成します。今回作成したプロジェクトの情報は次のように指定しました。

プロジェクト情報

項目名	値
プロジェクトテンプレート	ASP.NET Core Web アプリ
プロジェクト名	AzureWebSample
場所	任意のフォルダを指定
ソリューション	新しいソリューションを作成する
ソリューション名	AzureWebSample
フレームワーク	NET 7.0
認証の種類	なし
HTTPS用の構成	はい

「作成」ボタンを選択するとプロジェクトが作成され、ソリューションエクスプローラー上にソースコードが表示されます。

VS2022のソリューションエクスプローラー

App Serviceの作成

続いてAzure上にApp Serviceを作成するフローに進みます。App ServiceはAzureポータル上から作成することも可能ですが、今回はVS2022からApp Serviceを作成し、そのままWebアプリケーションのデプロイまで実施してみます。
ソリューションエクスプローラーでプロジェクトを右クリックし、「発行」というメニューを選択します。選択すると「AzureWebSample: 公開」というビューが表示されます。

VS2022からApp Serviceへの公開を開始する

ビュー内の「公開」というタブを選択し、「発行プロファイルの追加」を選択します。公開先の選択画面が表示されるので、「Azure」を選択して「次へ」ボタンを選択します。

公開先にAzureを選択する

アプリケーションのデプロイ先となるAzureサービスの選択肢が表示されます。今回は「Azure App Service(Windows)」を選択し「次へ」ボタンを選択します。

アプリのデプロイ先となるAzureサービスの選択

次にAzure App Serviceのインスタンスを選択します。ここからはAzureの情報を参照しながらの作業となるので、Azureにログインしている必要があります。ログインしていると画面右上にアカウント情報が表示されます。
ログイン中のAzureアカウントで有効なサブスクリプション名が選択された状態で、「新規作成」ボタンを選択します。

Azure App Serviceの新規作成

Azure App Serviceの新規作成画面が表示されます。

App Serviceの作成画面

以下の内容を入力していきます。

App Serviceで指定する項目

項目名	説明
名前	このWebアプリケーション名。azurewebsites.netのサブドメイン名としても利用される
サブスクリプション名	Azureサービスの費用を負担する方式
リソースグループ名	Azureのリソース（Webアプリ、データベース、仮想マシン等）をひとまとめで管理するための単位
ホスティングプラン	このアプリの場所、機能、料金、コンピューティングリソース等

せっかくなのでこのWebアプリケーションを日本リージョンで動かすようにしてみましょう。ホスティングプランのところにある「新規作成」ボタンをクリックすると次のようなダイアログが開きます。ここで場所として「Japan East」、サイズとして「無料」を選択します。
Azureは世界中で30を越えるリージョンが用意されており、日本にも西日本と東日本の2つのリージョンが展開されています。

App Serviceプランの構成画面

図XXに戻るので、App Serviceの作成画面で「作成」ボタンをクリックします。数分後、App Serviceのリソースが作成され、画面上にApp Serviceのディレクトリ構成が表示されます。

Azure App Serviceの完了画面

最後に「完了」ボタンを選択してAzure App Serviceの作成を完了します。ただしこの時点ではまだApp Serviceに公開されていません。

App Serviceへの公開

テンプレートそのままではありますが、App ServiceにWebアプリケーションを公開してみましょう。VS2022はAzureと連携しているため、作成したWebアプリケーションの公開も簡単に行うことができます。
Azure App Serviceを作成すると、「AzureWebSample: 公開」のビューの右上に「発行」ボタンが表示されるので、選択します。

Webアプリケーションの発行

アプリケーションのビルドが開始され、ビルドが成功するとそのままAzure App Serviceにアプリケーションをデプロイ（発行）します。

Webアプリケーションの発行成功画面

発行が完了すると自動的にブラウザが開かれ、発行されたURLにアクセスします。

デプロイされたWebサイト

開発、公開の流れ

通常のWebアプリケーションであれば一度開発したらそれで終わりということはほとんどなく、新機能の追加、バグの修正など日々改善を行い、頻繁に更新されていきます。本記事の最後に、先程公開したWebアプリケーションに修正を加え、修正版を再度公開するまでの流れを紹介します。

プロジェクトの修正とローカルでの動作確認

今のままではデフォルトそのままの内容が表示されてしまいますので、中身を少々修正してみます。ソリューションエクスプローラーから「Pages\Index.cshtml」を開き、次のように修正します。

Index.chtmlの内容

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">ゼロからはじめるAzure</h1>
    <p>詳しくは <a href="https://news.mynavi.jp/">マイナビニュース</a></p>
</div>

公開前に正しく動作するか確認してみましょう。通常のASP.NETのプログラムと同様に開発PCで動作確認することができます。VS2015のツーバーからブラウザを選択して修正したプログラムを起動させます。

VS2022のツールバー

プログラムのビルドが完了すると、指定したブラウザが開いて修正した内容が表示されます。上記の例では簡単な修正ですが、ご自身の見せたいWebアプリケーションになるようにいろいろと修正を繰り返してみてください。

App Serviceに再公開

納得の行く内容にまで修正を終え、ローカルでの確認ができたら、いよいよ世界に向けて公開します。先程既に公開の手順は説明していますが、1クリックで公開する方法を紹介します。
VS2022のメニューから［表示］－［ツールバー］を選択し、「Webの1クリック発行」にチェックを付けます。これでツールバーに次のようなボタンが表示されるようになりました。

Webの1クリック発行ツールバーボタン

それぞれのボタンでは次のことを行うことができます。

①発行するWebアプリの発行プロファイル選択
②選択したプロファイルの内容でWebアプリを発行(公開)
③選択したプロファイルの内容を修正するために発行ウィザードを開く

それでは(2)のボタンをクリックし発行してみましょう。ビルド、発行が完了するとブラウザが自動的に開いてAzure上のサイトにアクセスします。

App Serviceでの動作確認

今回は無料のインスタンスサイズを選択しましたが、有料の場合には分単位で課金されます。必要のない場合には停止しておきましょう。停止するにはAzureポータルにアクセスし、App Serviceの概要画面から［停止］を選択します。

Web Appsの停止

まとめ

本稿では、Azureの概要や、VS2022と連携して簡単なASP.NET CoreのWebアプリケーションを公開するところまでを紹介しました。VS2022とシームレスに連携しているため、ローカルで動かすような感覚で世界にむけて簡単に公開できることを感じていただけたのではないでしょうか。
次回は、Azure Cognitive ServiceからAIに関連するサービスについて紹介する予定です。

WINGSプロジェクト秋葉龍一（著）山田祥寛（監修）
有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。現在も執筆メンバーを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。
RSS
X:@WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト）
Facebook

Azureの登録からWebアプリケーションの公開（2023年改訂版）

はじめに