Azureの登録からWebアプリケーションの公開

はじめに

Webアプリケーションやモバイルアプリケーションなど、ちょっとしたアイデアを作り上げることはPC一台あれば可能になってきましたが、それらを世界中に公開するために必要なバックエンドシステムの構築や運用は、個人や中小企業では高いハードルがありました。しかしここ数年、IaaS(Infrastructure as a Service)やPaaS(Platform as a Service)などのクラウドサービスを利用することで、個人から大企業までが簡単な手間とそれほど高くないコストでバックエンドシステムを実現できる環境が整ってきています。

本連載では様々なクラウドサービスの中の一つである、マイクロソフト社が提供しているAzure(Microsoft Azure)を利用し、Webアプリケーションやモバイルアプリケーションを支えるバックエンドシステムを作り上げていく方法について紹介していきます。

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

・Windows 10 Pro
・Visual Studio Community 2015 Update3(以降、VS2015)
・Microsoft Azure SDK for .NET(VS 2015) 2.9.6

Azureとは?

Azure(Microsoft Azure)とは、マイクロソフト社が提供するクラウドサービスで、次に紹介する様々なことを実現するための機能が用意されています。

・ユーザの属性(性別、年齢など)やログなど様々な情報を活用した分析
・数人から世界中の人のデータまで扱うのことのできるスケーラブルなデータベース
・モバイル(iOSやAndroidなど)アプリケーションと連携可能なSDK
・クラウドだけではなく自社のオンプレミス環境とも接続できるネットワーク
・何十億ものIoT(Internet of Things)資産を監視、管理
・様々な地域に展開可能な30以上のリージョン
・機械学習を支える基盤
・急激な負荷の増大にも耐えられるコンピューティングリソース

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

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

主要なサービスとしては次のものがあります。

主要なサービスの概要

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

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

Azureへの登録

それでは早速Azureでアカウントを作成しましょう。Microsoft Azureのサイトにアクセスし、「無料で始める」をクリックします(注：執筆時現在、30日間有効の20,500円分の無料クレジットを取得することができます)。

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

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

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

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

サインアップが完了したらダッシュボードにサインインしてみましょう。次のような画面が表示されます。このダッシュボードからAzureで提供されている仮想マシンやストレージなど、様々なリソースの作成、管理を行うことができます。

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

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

Web Appsとは

WebサイトやWebアプリケーションをホスティングするためのサービスで、.NETを始めとしてJava、Node.js、PHP、Pythonなどの言語やフレームワークが利用可能です。GitHubなどのリポジトリを利用することで継続的インテグレーションを実現することができ、高可用性、スケーリングなどの面倒はAzureのインフラに任せることができるため、開発者はアプリの開発に専念することができます。

Azure SDK for .NETのインストール

Azureでは開発環境としてWindowsだけではなく、MacやLinuxも利用することができます。また開発言語についても.NETだけではなくPHPやJava、Node.js、Python、Rubyなども選択可能となっており、これらの様々な環境から使えるツールやライブラリとしてAzure SDKが公開されています。

本記事ではVS2015と連動したプログラムを作成していきますので、VS2015用の「Azure SDK for .NET」をインストールします。Azureのダウンロードページにアクセスし、「VS 2015」を選択してインストーラをダウンロードしてください(2016年12月25日時点での最新版は2.9.6)。

ここには様々な環境、言語用のSDKも公開されていますので、ご興味のある方は.NET以外のものもインストールしてみてください。

少々時間がかかりますが、Azure SDKのインストールが完了したらVS2015を起動してみましょう。Azureと同じアカウントでサインインすると、開発環境から透過的にAzureの機能を利用することができます。利用しているリソースの状況はサーバーエクスプローラーで確認することができます。

プロジェクトの作成

今回はASP.NET MVC 5を使ったプロジェクトを作成します。VS2015のメニューから［ファイル］－［新規作成］－［プロジェクト］を選択し、新しいプロジェクトを作成します。今回作成したプロジェクトの情報は次のように指定しました。

プロジェクト情報

Application Insightsとは、Webアプリケーションのパフォーマンスを監視するサービスで、このチェックボックスをオンにするだけでプロジェクトに組み込むことができます。詳しくはApplication Insightsをご覧ください。

「OK」ボタンをクリックすると今度は「New ASP.NET Web Application」というダイアログが開きます。ここではテンプレートとして「MVC」、認証方法として「認証なし」、「クラウドにホストする」にチェックをつけてその下のドロップダウンから「App Service」を選択し、「OK」ボタンをクリックします。

App Serviceの作成

通常であれば上記まででプロジェクトは作成されますが、続いてAzure上にApp Serviceを作成するフローに進みます。次のような画面が表示されているかと思います。もしサブスクリプションの項目が空白の場合には、右上の「Microsoft アカウント」のところから「アカウントの追加」を選択し、Azureにサインインしたアカウントでサインインし直してみてください。無料試用版でアカウントを作成した場合にはこの画面のようにサブスクリプションが「無料試用版」と表示されていると思います。

それぞれの項目で指定する値は次のようになります。

App Serviceで指定する項目

せっかくなのでこのWebアプリケーションを日本リージョンで動かすようにしてみましょう。App Serviceプランの「新規作成」ボタンをクリックすると次のようなダイアログが開きます。ここで場所として「Japan East」、サイズとして「無料」を選択します。

Azureは世界中で30を越えるリージョンが用意されており、日本にも西日本と東日本の2つのリージョンが展開されています。

App Serviceの作成画面で「作成」ボタンをクリックします。数分間ほどでASP.NETのプロジェクトとApp Serviceのリソースが作成され、VS2015から確認することができます。ただしこの時点ではまだApp Serviceに公開されていません。

App Serviceへの公開

テンプレートそのままではありますが、App Serviceに公開してみましょう。VS2015はAzureと連携しているため、作成したWebアプリケーションの公開も簡単に行うことができます。

ソリューションエクスプローラーからプロジェクトを選択し、右クリックメニューから［公開］を選択すると発行ダイアログが開きます。ここでは発行方法の選択やDebug、Release版のどちらにするか、またデータベース情報などを編集することができます。今回は特に変更せずにこのまま「発行」ボタンをクリックし実行します。

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

開発、公開の流れ

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

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

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

Index.chtmlの内容

 @{
   ViewBag.Title = "Home Page";
 }

 <div class="jumbotron">
   <h1>ゼロからはじめるAzure</h1>
   <p class="lead">詳しくは</p>
   <p><a href="http://news.mynavi.jp/" class="btn btn-primary btn-lg">マイナビニュース</a></p>
 </div>

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

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

App Serviceに再公開

納得の行く内容にまで修正を終え、ローカルでの確認ができたら、いよいよ世界に向けて公開します。先程既に公開の手順は説明していますが、1クリックで公開する方法を紹介します。

VS2015のメニューから［表示］－［ツールバー］を選択し、「Webの1クリック発行」にチェックを付けます。これでツールバーに次のようなボタンが表示されるようになりました。

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

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

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

今回は無料のインスタンスサイズを選択しましたが、有料の場合には分単位で課金されます。必要のない場合には停止しておきましょう。停止するにはVS2015のサーバーエクスプローラーから発行プロファイルを選択し、右クリックメニューから［停止］を選択します。

まとめ

第1回目は、Azureの概要や、VS2015と連携して簡単なASP.NET MVC 5のプログラムを公開するところまでを紹介しました。VS2015とシームレスに連携しているため、ローカルで動かすような感覚で世界にむけて簡単に公開できることを感じていただけたのではないでしょうか。

次回はAzureの公開するサービスの一つであるStorageを利用して、データを保存する方法について紹介する予定です。

WINGSプロジェクト 花田善仁著/山田祥寛監修
＜WINGSプロジェクトについて＞テクニカル執筆プロジェクト(代表山田祥寛)。海外記事の翻訳から、主にWeb開発分野の書籍・雑誌/Web記事の執筆、講演等を幅広く手がける。一緒に執筆をできる有志を募集中。