segavvy’s blog

ドラクエ11、Mac、ガジェットetc...

WebアプリケーションをMicrosoft Azureで動かしてみました

ちょっとブログの掲載順番が前後してしまいましたが、せっかく無償のVisual Studio Community 2013(以下「Visual Studio」)を入れたので、Webアプリケーションを作ってクラウド環境のMicrosoft Azure(以下「Azure」)で動かしてみよう!という計画の続きです。

<前回までの日記>
 Visual Studio Community 2013を入れてみました - segavvyの日記
 Visual Studio Community 2013の日本語化 - segavvyの日記
 Microsoft アカウントを作成しました - segavvyの日記
 Microsoft Azure SDK for .NETを入れました - segavvyの日記

なお、Azureは今回の範囲ではお金がかからないのですが、それでもクレジットカードが必要になります。試される方はご用意を。

Microsoft Azure SDK for .NETが入れ終わったので、再びVisual Studioを起動して、「ファイル」メニューの「新規作成」で「プロジェクト...」を選び、新しいプロジェクトの作成画面を開きます。
画面の左から、「インストール済み」の「テンプレート」の「Visual C#」の下の「Cloud」を選び、右で「ASP.NET Web アプリケーション」を選択します。
名前や場所は好みに合わせて適当に変えてください。

そうすると新規ASP.NETプロジェクトの設定画面が出てきます。ここでは10年ほど前に触ったことがあるWeb Formsにチェックしました。
MVC」や「Web API」のチェックボックスも興味があります。「単体テストの追加」とか選ぶとプロジェクト内でユニットテストが書けるのかな。10年間の間にVisual StudioASP.NETも相当進化しているみたいです。ただ、いろいろ手を出すと理解が追いつかなくなりそうなので、今はシンプルに「Web Forms」だけをチェックしておきます。

右側の上半分が認証の設定ですが、「個人ユーザー アカウント」になっています。いきなり認証が必要なものを作るつもりはないので、「認証の変更」を選んで「認証なし」に切り替えておきます。

続いて右下の「Microsoft Azure」の部分ですが、普通に「クラウド内にホスト」のチェックが付いてますね。これでVisual StudioからAzureにデプロイできる模様です。これは便利そう。

「OK」を押すとAzureにサインインする画面が出てきます。説明見ると、Visual Studioで簡単にデプロイできそうです。ただ「開発およびテスト用のリモートリソースが」と書いてあるのが若干気になります。本番環境へのデプロイで使っちゃだめなのかな?
とりあえず「サインイン」を選んで次へ進みます。

Microsoftアカウントを尋ねてきますので「サインイン」します。

入力したMicrosoftアカウントがAzure サブスクリプションに関連付けられていない、と怒られました。Azureを使うにはこのサブスクリプションを買ってMicrosoftアカウントに関連付けなさいということらしいです。とりあえずAzureが1ヶ月間無料になることは確認済みなので、「サブスクリプションにサインアップ」を選びます。

Webブラウザーを起動したので、サブスクリプションのサインアップをやってくださいとのこと。

Internet Explorerを前面に持ってくるとAzure無料評価版のサイトが表示されていました。ここでは「今すぐ試す」を選びます。

再びMicrosoftアカウントを尋ねてきますので入力します。

しばらく待つとサインアップの画面が出てくるので入力します。
会社名は「省略可能」なのに、勤務先の電話番号は必須だそうです。なぜ?
とりあえず私は、勤務先のところにも「携帯電話確認」のところと同じ携帯番号を入れました。
なお、国番号が頭に付くので、番号の最初の「0」は不要です。

携帯電話の番号を入れて「テキスト メッセージを受信」を選びます。

そうすると携帯電話にSMSのメッセージが来ます。
Azure アカウントを確認するには、コードxxxxを使用してください。
といった内容なので、そのコードを入力して「コードの確認」を選びます。

携帯番号の確認が終わると支払情報の入力欄が表示されるので入力します。
また、「契約」の部分に同意して2つのチェックボックスをチェックします。

サブスクリプションの設定が完了するまでちょっと時間がかかります。
「ここをクリックして最新状態に更新してください」をクリックしていると完了します。

完了すると右側にサブスクリプションIDなどが表示されます。

そして簡単な紹介ツアーが始まります。仮名がちょっと適当すぎた…

ツアーが終わると元の画面に戻ります。
今、無償期間が始まったばかりなのに、早くも「今すぐアップグレードしてください。」と言われます^^

これでサブスクリプションのサインアップが完了したので、Visual Studioの画面に戻って、「Microsoft Azureにサインイン」します。

メールアドレスを尋ねられるので入力します。

次にパスワードです。

Azure Websiteに関する設定画面が出てきます。サイト名を適当に付けて、リージョンを選択します。ここでは「Japan East」を選びました。日本には東と西の2箇所のデータセンターがあるようですね。

やっとプロジェクトの作成が終わりました。

早速「F5」キーで実行してみます。
Internet Explorerが起動してローカルでアプリケーションが動きます。

上の方のヘッダで、「詳細」と「問い合わせ」にも切り替えられます。
シンプルな3画面のアプリケーションですね。

さすがにこれだけで「アプリケーション作りました!」とは言えないので、最初のページのタイトルだけちょっと変えてみます。
まず、右側の「ソリューション エクスプローラー」から「Default.aspx」を開きます。これが最初のページのソースコードです。HTMLがズラズラ並んでしまう場合は、左下のタブを「ソース」から「デザイン」へ切り替えます。

タイトル部分をちょっと変えてみます。

そして「F5」で実行。

ASP.NETの最初のアプリケーション完成です!

文字変えただけですが完成は完成です。早速Azureで公開しましょう。
「ビルド」メニューの「WebApplication1 の発行」を選びます。

確認画面が出てきます。

「プレビューの開始」ってなんだろう、と押してみると、Azure側にアップするファイルの一覧が出てきました。
ここで、変更があったファイルを自動検出してくれるみたいですね。

「発行」を選んでしばらく待つと、Internet Explorerが起動します。
URLを見ると、インターネットで公開されていることが分かります。

これで、Azureでの公開ができました。
プログラムを変更したら、同じ手順でAzure側の更新ができます。

またそのうち日記としてまとめるかも知れませんが、Visual StudioはAzure上で動くプログラムにアタッチしてリモートデバッグもできます。Azureとの連携機能はかなり充実している感じを受けました。

[参考]
Microsoftさんの公開しているチュートリアル「Azure Websites と ASP.NET を使用する」も参考にしてください。Visual Studio Community 2013を使った例ではありませんが、基本的な流れは同様です。

関連する日記はこちらからどうぞ↓
[Visual Studio Community]記事一覧 - segavvyの日記
[Azure]記事一覧 - segavvyの日記