CodeZine(コードジン)

特集ページ一覧

Visual StudioとMicrosoft Azureで楽々クラウド開発

さらに使いやすく便利になった「Visual Studio」を始めよう! 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/12/19 14:00

目次

Azure Webサイトとの連携

 Azure Webサイトは、Webアプリのホスティングに特化し簡単な操作でサービスを利用できることが特徴です。多言語(Node/PHP/Javaなど)への対応も然ることながら、Visual Studioと簡単に連携できる点に注目です。

 さっそくWebサイトと連携するアプリケーションを作成してみましょう。事前にWebサイトを作成しておかなくても、プロジェクト作成ウィザードで同時に作成し、デプロイするための情報もほぼ自動で設定してくれます。

 [ファイル]‐[新規作成]‐[プロジェクト]を選択して、新しいプロジェクトの作成を開始します。Webサイトは、Webアプリケーションをホスティングする環境なので、ASP.NET Webアプリケーションを選択して[OK]ボタンをクリックします。

図4 プロジェクト作成画面1
図4 プロジェクト作成画面1

 ここでは、MVCテンプレートを選択します。認証は、[認証なし]を選択し、右下部分のMicrosoft Azureの設定で、[クラウド内のホスト]のチェックをオン、下のコンボボックスから[Webサイト]を選択して[OK]ボタンをクリックします。

図5 プロジェクト作成画面2
図5 プロジェクト作成画面2

 引き続き、Webサイト設定の構成画面が表示されます(図6)。項目については、下表を参考に設定します。

表1 Webサイトの設定項目
項目 設定内容
サイト名 Webサイトの名前を設定します。Microsoft Azure内で一意の必要があります。自動で設定されますが、適宜修正してください。最終的に、Webサイト名.azurewebsite.net というURLにアプリケーションがデプロイされます。
サブスクリプション サブスクリプションが複数あるときに指定します。1つならば既定のサブスクリプションが設定されます。
リージョン Microsoft Azureのデータセンターを選択します。ここでは西日本を選択します(注2)。
データベースサーバー アプリケーションがデータベースを利用する場合などは、同時に新しいデータベースを作成できます。このデータベースとは、Microsoft Azure上でSaaSとして提供されているSQL Databaseのことです。ここでは同時に作成します。
データベース
ユーザー
データベースへのユーザー名を指定します。saや、adminなど一般的な名前は指定できません。
データベース
パスワード
データベースのパスワードを設定します。
図6 Webサイトの構成画面
図6 Webサイトの構成画面

 データセンターの場所は「Azureのリージョン」から確認できます。また、現時点で東日本DCの需要が逼迫しており、サブスクリプションによっては東日本にWebサイトを作成できない場合があります。

 [OK]ボタンをクリックすると、プロジェクトとWebサイトの作成が始まります。作成が完了すると、Visual Studioのビューに作成完了の表示がされるとともに、サーバーエクスプローラーに作成されたWebサイトが表示されます。下図では、WebサイトとSQL Databaseが作成されていることを確認できます(図7)。

図7 作成後のサーバーエクスプローラー
図7 作成後のサーバーエクスプローラー

 Webサイト配下のWebApplication80246のコンテキストメニューから、[ブラウザーで開く]を選択するとWebサイトがブラウザーで表示されます。作成したばかりは、まだアプリケーションが未配置であるため既定の成功画面が表示されている状態です(図8)。

図8 Webサイト初期画面
図8 Webサイト初期画面
Note

 ここで作成されるWebサイトは無料プラン、SQL DatabaseはWebエディションになっています。SQL DatabaseのWebエディションは、廃止予定となっているため今後変更される可能性があります。

 プロジェクトとWebサイトの準備が整いました。通常の開発などであれば、ここからアプリケーションを作成していくことになるでしょう。初期状態のまま配置するとデータベースを使用しないので、適当にモデルファーストなどを活用して、簡単なページを作成しておきます。詳細な作業については、ここでは割愛しますが、ASP.NET MVC5などの文献、書籍を当たってください。簡単なアプリケーションが用意できたところで、いよいよWebサイトにアプリケーションをデプロイします。

 プロジェクトのコンテキストメニューから、[発行]を選択すると、Webの発行画面の接続画面が表示されます(図9)。Webサイトと連携していると、プロファイルはWebサイトに発行することが前提となっているので、いきなりこの設定画面から始まります。また、これら多数の入力項目はすべて自動で設定されているので、特に修正は必要ありません。ここは、このまま[次へ]をクリックします。

図9 Webサイトへの発行画面1
図9 Webサイトへの発行画面1

 引き続き設定画面になります(図10)。構成は、[Release]と[Debug]から選択できます。後述するリモートデバッグを有効にしたいのなら、[Debug]に設定しておきます。また、面倒なデータベースの接続文字列なども自動で設定されますので、接続ミスなどが起こりにくくなっています。

図10 Webサイトへの発行画面2
図10 Webサイトへの発行画面2

 最後にプレビュー画面が表示されます(図11)。[発行]をクリックしてアプリケーションをデプロイします。

図11 Webサイトへの発行画面3
図11 Webサイトへの発行画面3

 アプリケーション発行後、ブラウザーが起動し、おなじみの画面が表示されるでしょう。下図は、先ほど作成したアプリの画面で少し操作したところです。URLを見ると分かるようにWebサイト上で動作しているのが確認できます。

図12 アプリ確認画面
図12 アプリ確認画面

 リモートデバッグも特に面倒な環境設定などは必要ありません。Webサイトのコンテキストメニューから、[デバッガーの接続]を選択するだけです。Webサイト上のアプリケーションにデバッガーが接続されます。あとは、通常のデバッグと同じように操作を行えます(図13)。

図13 デバッグ画面
図13 デバッグ画面

 Webサイトの構成変更もVisual Studioからできます。サーバーエクスプローラーのWebサイトのコンテキストメニューから[設定の表示]を選択すると、Webサイトの構成変更を行えます(図14)。同様の操作は当然管理ポータルからも行えます。

図14 Webサイトの構成設定画面
図14 Webサイトの構成設定画面

 これ以外にもサーバーエクスプローラから、直接Webサイト上のファイルを参照、修正(注3)することも(図15)、SQL Databaseに接続しデータベースの内容を確認することもできます。

図15 Webサイト上のファイル参照
図15 Webサイト上のファイル参照

 Webサイト上のファイル修正は、ちょっとした変更確認などに便利ですが、一時的なものであることに注意してください。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • WINGSプロジェクト statemachine(statemachine)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

バックナンバー

連載:さらに使いやすく便利になった「Visual Studio」を始めよう!
All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5