Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
いまさら聞けない最新Microsoft Azure

いまさら聞けない最新Microsoft Azure

ここまで進化した、Azure Webサイトの世界観(2014年7月版)

2014年7月14日

IaaSからPaaSまで多様なサービスを提供するAzureの中でも特に重要性が増してきている「Webサイト」とは? その世界観を特徴付ける主要な機能を解説する。

Microsoft Student Partners Fellow 谷口 慈行
  • このエントリーをはてなブックマークに追加

 クラウド関連のサービスを提供するAzureは、ここ数年でサービス内容が大きく変わったのをご存じだろうか?

 Azureが2008年に登場した当初は、「クラウドサービス」と呼ばれるサービスが主力だったが、2012年に「Weサイト」(以下、「Webサイト」は「Azure Webサイト」を指すこととする)が登場し、執筆時点の2014年現在に至るまでマイクロソフトにより積極的に新機能が追加され、今では「Azureの主力サービス」と言えるまでに成長した。

 なお、ここまで「Azure」と記載したが、正式名称は「Microsoft Azure」で(4月までは「Windows Azure」と呼ばれていた)、マイクロソフトが提供するクラウド関連サービスの総称である。Azureは、Webサイト以外にもさまざまサービスを提供しており、そのサービスのユーザー(以下、ユーザー)はそれらを従量課金などで利用でき、自サービスをスモールで始めて大きくスケールさせることも可能である。

 このAzureの日本データセンター(東京の東日本と、大阪の西日本)が今年2月に開設された。これにより、データセンターが今までよりも近くなり、国内で利用する上でレイテンシが改善された。もちろん国内以外でも、世界中にデータセンターを持ち、ユーザーは自由に各地域にインスタンスを作成できるため、ターゲットユーザー(=エンドユーザー)の近くにサーバーを構え、自サービスをスタートできる。このように日本を中心に、世界展開できる状況になっている。

 本記事では、このAzureの提供するさまざまなサービスの中から、冒頭で示したように特に重要性が増してきている「Webサイト」をピックアップし、その世界観を特徴付ける機能を紹介する。

【目次】

▲【目次】に戻る

Webサイトとは

 Webサイトは、Azureの提供するサービスの1つであり、PaaSレイヤーである。ここで、PaaSについておさらいしておこう。

 SaaS、PaaS、IaaS、オンプレミスなどの単語は、クラウドサービスの説明でよく耳にするキーワードであるが、これらはユーザーにどのレイヤーをサービスとして提供するかを表している。Webサイトは、PaaSであるが、PaaSとは「Platform as a Service」を略したものであり、SaaS、IaaSはそれぞれ「Software as a Service」「Infrastructure as a Service」の略である。

 PaaSでは、ユーザーはアプリケーションや場合によってはミドルウェアを用意し、デプロイすることでサービスを運用できる。ミドルウェアより下のレイヤーはプロバイダーが管理を行う。どこまでをユーザーが自身で管理し、どこまでをプロバイダーが担うか、この分担度合いをある程度で区切って「PaaS」や「IaaS」と呼んでいる。

図1 各レイヤーの内訳

 さてWebサイトであるが、Webサイトでは多くの開発言語に対応しており、C#、Node.js(JavaScript)、PHP、Python、Javaが利用できる。また、多様なデプロイ方法にも対応している。さらに無料、共有、基本、標準の4つのプランから選択でき、上位プランを選択することでスケールアウトやSSL対応、地理冗長などさまざまなオプションを利用できる。

 さまざまな機能を有するWebサイトであるが、それらの機能を利用していくと、1つの世界観がうかがえる。以降は各種機能の中から特徴的なもの取り上げて紹介していく。

▲【目次】に戻る

多様なデプロイ方法

 Webサイトは多様なデプロイ方法に対応している。

 ローカルGitリポジトリ、GitHubDropboxBitbucketCodePlex、外部リポジトリが利用できる。FTP、FTPSにも対応している。

▲【目次】に戻る

Git

 Gitは、世界中で利用されている人気の高いバージョン管理システムであり、GitHubをはじめ、多くのコラボレーションサービスで利用できる。Azureでは、ローカルGitリポジトリ、GitHub、Bitbucket、CodePlex、外部リポジトリと幅広い選択肢で、Gitからデプロイできる。本記事では、Webサイトのインスタンス内にリポジトリを立てるローカルGitリポジトリを使用してデプロイする方法を紹介する。

新規Expressプロジェクトを作成する

 デプロイするプロジェクトは、非同期IOで人気の高いNode.jsのWebフレームワークの1つであるExpressを使用する。本稿では次のコマンドでExpressプロジェクトを作成した。

コンソール
express node_sample
cd node_sample
npm install
リスト1 Expressプロジェクトを作成する

このコマンドを実行するには、当然ながら、Node.jsとExpressを事前にインストールしておく必要がある(本稿の趣旨から外れるので、インストール方法の説明は割愛する)。

ローカルGitリポジトリを持つWebサイトを作成する

 次に、デプロイするターゲットとなるWebサイトを作成する。まず、Azureポータルサイトを開く。

図2 Azureポータルサイト

赤枠の[新規]からインスタンスを作成できる。以降、インスタンス生成時に断りがない場合はこのボタンから作成する。

 ポータルサイトへのログインが完了後、Webサイトを作成する。図2の[新規]をクリックして、[コンピューティング]-[WEBサイト]-[簡易作成]を選択し、フォームに必要項目を入力する(図3)。

図3 新規Webサイトの作成手順
  • 1 ユニークな名前を入力し、[URL]を設定する。このとき、右端に緑色のチェックマークが表示され、入力したURLが使用できることを確認する。
  • 2 [WEB ホスティング プラン]ドロップダウンから「新しい Web ホスティング プランの作成」選択する。
  • 3 [リージョン]ドロップダウンから一番近いリージョンを選択する。
  • 4 [WEB サイトの作成]ボタンをクリックし、Webサイトの作成を開始する。

 Webサイト作成後、作成したWebサイトのダッシュボードに移動する(図4)。もし、Azureを初めて利用する場合は、まず、デプロイ資格情報を設定する。

図4 作成したWebサイトのダッシュボード
  • 1 ダッシュボードページを表示する。
  • 2 [デプロイ資格情報を設定する]をクリックする。

 図4の[デプロイ資格情報を設定する]をクリックすると、次の図5のようなダイアログが表示される。

図5 デプロイ資格情報を設定しているところ
図5 デプロイ資格情報を設定しているところ

なお、この資格情報はサブスクリプション内のWebサイト全てに対して有効であり、この設定の手順は最初の1回のみとなる。

  • 1 デプロイに利用するユーザー名を入力する。
  • 2 使用するパスワードを入力する。
  • 3 使用するパスワードを再度入力する。
  • 4 [完了]ボタンを押し、資格情報の設定を完了する。

 デプロイ資格情報設定の完了後、同じくダッシュボードの概要より、ソース管理からのデプロイ方法を設定する(図6)。

図6 赤枠の[ソース管理からのデプロイの設定]をクリックする
図7 Webサイト上のローカルGitリポジトリを有効にしているところ
  • 1[ローカル Git リポジトリ]をリストから選択する。
  • 2 [→]ボタンをクリックし、ローカルGitリポジトリの作成を開始する。

 ローカルGitリポジトリの作成が完了すると、上部に[デプロイ]タブが追加されるので、そのタブのページを表示する。そのページでリポジトリURLをコピーする(図8)。

図8 リポジトリURLが赤枠の[GIT の URL]欄に表示されるのでコピーする
ExpressプロジェクトをGitでWebサイトにデプロイする

 作成したプロジェクトフォルダー内でGitを初期化し、先ほどのリポジトリをリモートに追加する(次のコマンド)。

コンソール
git init
git add .
git commit -m "initial commit"
git remote add origin コピーしたURL
git push origin master
リスト2 Nodeのプロジェクトに戻りGitを初期化し、リポジトリを設定します。

コピーしたURLには先ほどポータルサイトでコピーしたGitリポジトリのURLを挿入します。

 リポジトリにプッシュすると、Webサイトインスタンスに配置され、[デプロイ]ページの表示内容が次の図9のようになる。

図9 デプロイが完了すると、[デプロイ]ページはデプロイの履歴が表示される。

 作成した、Webサイトを参照すると、ExpressがAzure上で動作していることが確認できる(図10)。

図10 Express on Azure
図10 Express on Azure

 このように、Node.jsのアプリケーションはデプロイ用の設定ファイルなどを作成し、デプロイ設定を行うことなく、デプロイするのみで自動配置され、実行される。

▲【目次】に戻る

Dropbox

 Dropboxは、フォルダー同期機能で人気のあるオンライン・ストレージ・サービスである。Azureでは、このDropboxからもデプロイが可能である。その方法を紹介する。なお、デプロイするプロジェクトには、CMSとして人気の高いWordPressを使用する。

AzureのWebサイトにひも付いた、Dropboxのフォルダーを作成する

 図11のように、[新規]-[コンピューティング]-[WEB サイト]-[カスタム作成]を選択する。

図11 カスタム作成の新規作成

赤枠の[カスタム作成]をクリックする。

 図12のダイアログが表示されるので、新しいWebサイトに必要な項目を入力し、次へ進む。

図12 カスタム作成ダイアログ
  • 1ユニークなURLを入力する。
  • 2ドロップダウンリストから「新しい Web ホスティング プランの作成」を選択する。
  • 3ドロップダウンリストからリージョンを選択する。
  • 4ドロップダウンリストから「新しい MySQL データベースを作成します」を選択する。
  • 5[ソース管理から発行]にチェックを入れる。
  • 6ボタンをクリックし、次に進む。

 MySQLデータベースの設定を行う(図13)。AzureでMySQLを利用する際は、ClearDBを利用する形となる。そのため、MySQLのインスタンスを作成するに当たって、ClearDBの法律条項に同意する必要がある。

図13 MySQLデータベース作成ダイアログ
  • 1ClearDBの法律条項を確認し、チェックをする。
  • 2ボタンをクリックし、次へ進む。

 ソースコードのデプロイ元としてDropboxを選択する(図14)。

図14 デプロイ元の選択
  • 1リストからDropboxを選択する。
  • 2ボタンをクリックし、次へ進む。

 上記の作業により、図15のウィンドウがポップアップする。AzureがDropboxへアクセスするために許可を与える必要があるからだ。そこで、Dropboxにログインし、図15の[許可]ボタンをクリックし、AzureからDropboxへのアクセスリクエストを承認する。

図15 Dropboxへのアクセス許可
図15 Dropboxへのアクセス許可

許可ボタンをクリックし、AzureがDropboxへアクセスする権限を与える。

 承認するとウィンドウが閉じられ、図16のページが表示されるので、発行の設定に必要な項目を入力し、Webサイトを作成する。

図16 プロジェクトフォルダーの作成
  • 1ドロップダウンリストから「<新しいフォルダー>」を選択する。
  • 2フォルダー名を入力する。
  • 3チェックを入れ、ロールバックを有効化する。
  • 4ボタンをクリックし、Webサイトの作成を開始する。

 デプロイ環境の準備には、ある程度時間がかかる。プロジェクトフォルダーは「<Dropboxフォルダー>\アプリ\Azure」内に作成される。次の画面はその例。

図17 Dropboxプロジェクトフォルダー

新しく作成されたプロジェクトフォルダーは。「Dropbox\アプリ¥Azure」内に作成される。

WordPressサイトをDropboxでWebサイトにデプロイする

 WordPressダウンロードページから最新のパッケージをダウンロードし、プロジェクトフォルダーの直下に展開する(図18)。

図18 プロジェクトへのファイルの展開

WordPressから最新のパッケージをダウンロードし、プロジェクトフォルダー直下へ展開する。

 Dropboxフォルダーの同期が完了した後、[デプロイ]ページの[同期]ボタンをクリックすると(図19)、Webサイトへのデプロイが開始される。ここで注意が必要なのは、Dropboxを利用しているが、プロジェクトフォルダーに保存したものが自動で反映されることはない点だ。ポータルサイトで同期を実行する必要がある。

図19 同期

赤枠の[同期]ボタンをクリックしDropboxからファイルを同期する。

 デプロイが完了すると、デプロイ履歴が表示される(図20)。

図20 同期完了

同期完了後、ファイルは自動配置される。デプロイの履歴は[デプロイ]ページで確認できる。デプロイのロールバックを有効化している場合は、過去のデプロイに戻すこともできる。

 作成したWebサイトを参照すると、図21に示すように、WordPressのコンフィグレーションファイルがないエラーが表示され、作成ページへのリンクが表示される。

図21 確認

作成したWebサイトを参照してみると、WordPressがデプロイされていることを確認できる。

 このように、PHPプロジェクトもNode.jsプロジェクトと同じく、デプロイ用の特別なファイルを作ることなく稼働させることが可能である。

 自動同期されないのではDropboxの利点を失っているように感じるかもしれないが、普段、Gitを利用しないWebデザイナーなどのユーザー層には非常に利用しやすい。特にDropboxを利用しているため、複数のPCをまたいで作業ができることや、Gitでは管理しづらいコンテンツを共有しながら作業できるのは利点の1つではないだろうか。

▲【目次】に戻る

クラウドな開発手法

 一般的に、ローカル環境で開発を行い、Gitや他のデプロイツールを使用し、テスト環境、または、本番環境へデプロイすることが多い。もちろんWebサイトにおいて、それらが容易に実現できることは前節で紹介した。しかし、Azureでは開発環境そのものをクラウド上で構築できるよう日々進化が続いている。この節ではその一端を紹介する。

▲【目次】に戻る

Visual Studio Online “Monaco”

 Visual Studio Online “Monaco”(以降は単に「Monaco」と表記する)は、Webブラウザー上で使用できるエディターである。MonacoはWebサイトの拡張機能として提供されており、Monacoを利用することでサーバー上のファイルを直接編集することが可能となる。

WebサイトでMonacoを有効にする

 はじめに、Monaco検証用の新しいWebサイトをGitデプロイ時と同様に[簡易作成]から作成する。

 [構成]ページを開き、[VISUAL STUDIO ONLINE での編集]をオンに設定して保存し、変更を反映させる(図22)。

図22 構成
図22 構成
  • 1[構成]ページを開き、[VISUAL STUDIO ONLINE で編集]をオンにする。
  • 2[保存]ボタンをクリックし、変更を反映させる。

 [ダッシュボード]ページの[概要]から[Visual Studio Online での編集]を選択し(図23)、Monacoを開く。

図23 ダッシュボード

[ダッシュボード]ページの[概要]から赤枠の[Visual Studio Online での編集]をクリックする

 Monacoは別ウィンドウに開かれ、スタートページが表示される(図24)。

図24 Monacoスタートページ
Monacoの基本的な操作方法

 それではMonacoの基本的な操作方法を説明しよう。ここでは図25の手順に従って、新しくHTMLファイルを追加する。

図25 ファイルの追加
図25 ファイルの追加
  • 1[ファイルの追加]ボタンをクリックする。
  • 2ファイル名に「index.html」と入力する。

 追加したHTMLファイルを次のように編集する。

HTML
<!DOCTYPE html>
<html>
<head>
  <title>My Monaco Sample</title>
</head>
<body>
  <h1>Hello, Monaco!</h1>
</body>
</html>
リスト3 index.htmlファイルに追記する内容

 Monacoでは、編集したファイルは自動で保存され、反映される。また、図26に赤枠で示している[実行]ボタンを押すことでWebサイトを参照できる。

図26 ファイルの編集

 実行されたWebサイトを閲覧すると、編集が反映されていることが確認できる(図27)。

図27 画面
図27 画面

 このように、Monacoを利用することで、HTMLやスクリプト言語のコードをブラウザー上で編集できる。また、コンソールからはnpmなどのコマンドも利用できるため、十分に開発が可能である。

▲【目次】に戻る

ステージング

 ブラウザー上で利用できるMonacoを紹介したが、Monacoは自動で保存されるため、本番環境で利用するのは好ましくない。また、ローカルで開発し、デプロイする従来どおりのスタイルであってもいきなり本番環境にデプロイすることは避け、まず、テスト環境で検証したいと思うことだろう。Webサイトでは展開スロットを利用することでステージング開発を行うことができ、これらの需要を満たせる。

展開スロットの有効化と作成

 先ほどのMonacoの検証のために作成したWebサイトを使用してステージングの基本的な手順を示す。

 まず、展開スロットを使用するには、[スケール]ページを開いてWebホスティングプランを「標準」に変更する必要がある(図28)。

図28 スケール
図28 スケール

[WEB ホスティング プランのモード]で「標準」を選択し、赤枠の[保存]ボタンで変更を反映させる。

 ホスティングプランの変更完了後、[ダッシュボード]ページの[概要]で[新しい展開スロットの追加]が利用できるようになる(図29)。

図29 スロットの追加

[ダッシュボード]ページの[概要]から[新しい展開スロットの追加]をクリックする。

 [新しい展開スロットの追加]リンクをクリックすると、図30のダイアログが表示されるので、新しい展開スロットを作成する。

図30 展開スロット追加ダイアログ
  • 1スロットの名前を入力する。
  • 2[構成のソース]ドロップダウンリストから、Monacoを利用した先のインスタンスを選択する。
  • 3ボタンをクリックし、スロットの作成を開始する。
基本的なステージング開発の方法

 展開スロットの作成が完了すると、Webサイト一覧ページに遷移する。リストの先頭に折り畳みマークが付加される(図31)。スロットは親のWebサイトに折り畳まれるため、折り畳みマークをクリックし、作成した展開スロットを選択する。

図31 スロット
図31 スロット

赤枠の三角マークをクリックし、スロットを展開する。
追加したスロットを選択する。

 先ほどと同様に[ダッシュボード]からMonacoを開き、新しくファイルを追加する。

 追加したファイルを次のように編集する。

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Staged Deployment</title>
</head>
<body>
  <h1>This is developed in slot1!</h1>
</body>
</html>
リスト4 index.htmlファイルに追記するコード

 ここで、「追加した展開スロット」を実行してHTMLページを閲覧し、先ほどの「Webサイト」のHTMLページの内容やURLと比較して、出力の位置関係を確認します(図32)。

図32 Webサイトと展開スロット

奥のウィンドウが前節で作成した「Webサイト」のHTMLページ、手前のウィンドウが「展開スロット」のHTMLページである。

 [ダッシュボード]ページから[スワップ]を実行する(図33)。

図33 スワップ
図33 スワップ

[ダッシュボード]ページの赤枠の[スワップ]ボタンをクリックする。

 これにより図34のダイアログが表示されるので、スワップを行うソースとターゲットを選択し、スワップを実行する。

図34 [展開のスワップ]ダイアログ
  • 1[ソース]欄に編集したスロットを選択する。
  • 2[ターゲット]欄に前節で作成したWebサイトを選択する。
  • 3ボタンをクリックし、スワップを開始する。

 スワップはソースとターゲットのインスタンスを切り替える機能であり、先ほどの出力を更新して比較すると、位置関係が入れ替わっていることが確認できる(図35)。

図35 スワップ完了後のインスタンスと展開スロット

奥のウィンドウが前節で作成したHTMLページ、手前のウィンドウが展開スロットのHTMLページであり、展開スロットがスワップされたため、図32と見比べると表示内容が入れ替わっている。

 このように、展開スロットを利用することで、より一層開発しやすくなる。しかし、あくまでスワップはインスタンスの切り替えであるため、開発用に展開スロットを作った場合、スワップ後は編集前のインスタンスと入れ替わっていることに注意が必要だ。実際に利用するにはVisual Studio Onlineや外部リポジトリと連携する必要がある。

▲【目次】に戻る

リモートデバッグ

 もし、ローカル環境では見付からず、テスト環境にデプロイして初めて見付かる不具合があったとする。このとき役立つ機能の1つとしてリモートデバッグが挙げられる。リモートデバッグはVisual Studioと連携することで利用できる。

ASP.NET MVCプロジェクトを新規Webサイトに発行(=デプロイ)する

 まず、デバッグ対象となるASP.NETプロジェクトを作成する(図36)。

図36 ASP.NETプロジェクトの作成

 [新規 ASP.NET プロジェクト]ダイアログでは、テンプレートは「MVC」を選択する(図37)。

図37 テンプレートの選択
  • 右側の[クラウド内のホスト]のチェックは外す。
  • 1「MVC」テンプレートを選択する。
  • 2[OK]ボタンをクリックし、プロジェクトを作成する。

 作成したプロジェクトを発行し、Webサイトを作成する。

図38 プロジェクトの発行

[ソリューション エクスプローラー]でプロジェクト項目のコンテキストメニューから[発行]を選択する。

 図38に示す手順を実行すると、図39の[Web を発行]ダイアログが表示される。Webサイトは、このダイアログ内で作成可能である。

図39 発行先の選択

赤枠の[Windows Azure Web サイト]をクリックする。

 図39の手順を実施すると、図40のダイアログがさらに表示されるので、新しく発行先となるWebサイトを作成する。

図40 Webサイト作成ダイアログ
図40 Webサイト作成ダイアログ

赤枠の[新規]ボタンをクリックする。

 これにより、[Windows Azure でサイトを作成]ダイアログが表示されるので、図41の手順に従って、新しくWebサイトを作成するために必要な項目を入力し、Webサイトを作成する。

図41 新規Webサイト作成ダイアログ
  • 1ユニークなサイト名を入力する。
  • 2リージョンをドロップダウンリストから選択する。
  • 3データベースサーバーを選択する。ドロップダウンリストから「新しいサーバーの作成」を選択する。
  • 4データベースユーザー名を入力する。
  • 5パスワードを入力する。
  • 6再度、パスワードを入力する。
  • 7[作成]ボタンをクリックし、Webサイトを作成する。

 発行先のWebサイト作成完了後、図39で示したダイアログに戻るので、[設定]タブを開き、[構成]を「Debug」に変更し、発行を行う(図42)。

図42 発行
  • 1[設定]タブを開く。
  • 2[構成]ドロップダウンリストから「Debug」を選択する。
  • 3[発行]ボタンをクリックし、Webサイトにプロジェクトをデプロイする。
リモートデバッグの基本的な手順

 発行完了後、ブレークポイント設置する(図43)。

図43 ブレークポイントの設定
図43 ブレークポイントの設定

Controllers\HomeController.csファイルをVisual Studioで開き、ブレークポイントを設定する。

 サーバーエクスプローラーから、新しく作成したWebサイトに対してデバッガーを接続する(図44)。

図44 サーバーエクスプローラーを使ってWebサイトにデバッガーを接続
図44 サーバーエクスプローラーを使ってWebサイトにデバッガーを接続

サーバーエクスプローラーから[Windows Azure]-[Web サイト]-[<作成したWebサイト>]のコンテキストメニューを開き、[デバッガーの接続]をクリックする。

 デバッガーの接続完了後、ブラウザーが立ち上がり、Webサイトを参照する。このとき、ブレークポイントを設置したため、図45に示すように、ブレークポイント上で一時停止する。

図45 デバッグ画面
図45 デバッグ画面

 このように、リモートであっても、ローカルと変わらない要領でデバッグをすることが可能である。

▲【目次】に戻る

ログ

 前節ではリモートデバッグを紹介したが、稼働中の本番環境へのアクセスや生じたエラーなどを詳細に知るには、ログの収集が必要不可欠となる。そこで、Webサイトでのログの収集方法を紹介する。

▲【目次】に戻る

サイト診断

 サイト診断は、Node.jsやPHPなど全てのプロジェクトが収集可能なログである。ログは、AzureのBLOBストレージに拡張W3Cログファイルフォーマットで保存される。

サイト診断用のログ出力を設定する

 はじめに、保存先のストレージを作成する(図46)。

図46 ストレージの作成
  • 1ユニークなURLを入力する。
  • 2ストレージの場所を選択する。
  • 3レプリケーションを選択する。
  • 4ボタンをクリックし、ストレージアカウントを作成する。

 次に、対象となるWebサイト(新規作成したストレージではない)の[構成]ページを開き、サイト診断を有効化する(図47)。今回はGitデプロイを試したNodeプロジェクトのWebサイトのログを収集する。

図47 サーバーログの有効化
図47 サーバーログの有効化
  • 1[WEB サーバーのログ記録]を「ストレージ」に変更する。
  • 2[ストレージの管理]ボタンをクリックし、保存するストレージを設定する。説明は次に行う。
  • 3[詳細なエラー メッセージ]をオンにする。
  • 4[失敗した要求トレース]をオンにする。
  • 5[保存]ボタンをクリックし、変更を反映させる。

 [ストレージの管理]ボタンをクリックすると、[サイト診断用のストレージの管理]ダイアログが表示される(図48)。ここで、ログの記録先となるBLOBコンテナーを設定する。

図48 [サイト診断用のストレージの管理]ダイアログ
図48 [サイト診断用のストレージの管理]ダイアログ
  • 先の[ストレージの管理]ボタンをクリックすると表示される。
  • 1節の初めに作成したストレージアカウントをドロップダウンリストから選択する。
  • 2ドロップダウンリストから「新しい BLOB コンテナーを作成する」を選択する。
  • 3BLOBコンテナー名に問題があれば変更する。
  • 4ボタンをクリックし、ダイアログを閉じる。
サイト診断用のログの参照方法

 サイト診断有効化後、Webサイトを数度、参照する。参照履歴が拡張W3Cログファイルフォーマットでファイルに保存される。

 確認のために、BLOBコンテナー(=ストレージの[コンテナー]ページ)からログファイルをダウンロードして確認する(図49)。

図49 サーバーログコンテナー

 ログファイルはテキスト形式で保存される(リスト5はその例)。ファイルフォーマットについてはドキュメントを参考にしてほしい。

テキスト
#Software: Microsoft Internet Information Services 8.0
#Fields: date time s-sitename cs-method cs-uri-stem cs-uri-query s-port cs-username c-ip cs(User-Agent) cs(Cookie) cs(Referer) cs-host sc-status sc-substatus sc-win32-status sc-bytes cs-bytes time-taken
2014-06-29 22:40:55 GIT-DEPLOY-SAMPLE GET / X-ARR-LOG-ID=a66a8cd3-077f-40a9-a650-63509618d0d6 80 - 222.158.174.38 Mozilla/5.0+(Windows+NT+6.3;+WOW64;+Trident/7.0;+Touch;+rv:11.0)+like+Gecko ARRAffinity=ecb5fb8b6b592cb3b04db346b044d178a1af13033733338a1e0c65431d46aee8 - git-deploy-sample.azureWebサイト.net 304 0 0 353 813 5423
リスト5 サーバーログ

▲【目次】に戻る

アプリケーション診断

 アプリケーション診断は、.NETの標準的なトレース(=System.Diagnostics名前空間のTraceクラス)出力をストレージに保存する機能であり、ASP.NETプロジェクトで利用できる。

アプリケーション診断用のログ出力を設定する

 Webサイトの[構成]ページを開き、アプリケーション診断を有効化する(図50)。今回はWebサイトに、リモートデバッグに使用したもの使用する。アプリケーション診断用のログの記録先としては、「ファイルシステム」「テーブルストレージ」「BLOBストレージ」の3つに対応している。ここでは、確認の容易なBLOBストレージを使用する。

図50 アプリケーションログの有効化
図50 アプリケーションログの有効化
  • 1[アプリケーション ログ記録 (BLOB ストレージ)]を「オン」にする。
  • 2[ログ レベル]を「詳細」に設定する。
  • 3[blob ストレージの管理]ボタンをクリックし、保存するストレージを設定する。説明は次に行う。
  • 4[保存]ボタンをクリックし、変更を反映させる。

 [blob ストレージの管理]ボタンをクリックすると、図51の[アプリケーション診断用の BLOB ストレージの管理]ダイアログが表示される。ここで、ログの記録先となるコンテナーを設定する。

図51 [アプリケーション診断用の BLOB ストレージの管理]ダイアログ
図51 [アプリケーション診断用の BLOB ストレージの管理]ダイアログ
  • 先の[blob ストレージの管理]ボタンをクリックすると表示される。

  • 1節の初めに作成したストレージアカウントをドロップダウンリストから選択する。
  • 2ドロップダウンリストから「新しい BLOB コンテナーを作成する」を選択する。
  • 3BLOBコンテナー名に問題があれば変更する。
  • 4ボタンをクリックし、ダイアログを閉じる。
アプリケーション診断用のログの参照方法

 プログラムを編集し、ログの出力コードを挿入する。Controllers\HomeController.csファイルを開きIndexメソッドを次のように編集する。

C#
Public ActionResult Index()
{
  System.Diagnostics.Trace.TraceInformation("Sample log at {0}", DateTime.Now.ToString());
  return View();
}
リスト6 トレース出力用のコード(HomeController.csファイルのIndexメソッド)

 編集後、再発行し、Webサイトを更新する。何度かWebサイトを参照し、ログを記録させる。

 保存先のコンテナーからログファイルをダウンロードし確認する(図52)。

図52 アプリケーションログコンテナー

 BLOBストレージへのログは、CSV形式で記録される(次の表はその出力例)。ちなみにテーブルストレージに記録する設定であれば、そのままレコードとして保存され、アプリケーションから容易に利用できる。

date 2014-06-29T23:48:03 2014-06-29T23:56:05
level Information Information
applicationName remote-debug-sample remote-debug-sample
instanceId ecb5fb ecb5fb
eventTickCount 6.35E+17 6.35E+17
eventId 0 0
pid 19044 19044
tid 8 28
message Sample log at 6/29/2014 11:48:03 PM Sample log at 6/29/2014 11:56:05 PM
activityId
アプリケーションログ(編集部注:掲載の都合上、行列を入れ替えました。)

 サイト診断とアプリケーション診断の2つのログについて紹介した。

 また、これとは別にWebサイトのインスタンス内にもログが保存されている。保存されるデータは、プロジェクトごとで異なるが、デプロイのログやエラー、標準出力が保存される。また、このログはAzure PowerShellまたは、Azure Cross-Platform Command-Line Interfaceを使用することで、ダウンロードやストリーミング表示が可能である。

▲【目次】に戻る

Azure Webサイトの世界観

 さて、長々とHowToについて紹介してきたが、ここでWebサイトの世界観についてまとめる。

 Webサイトでは完成した製品をホストするだけではなく、Monacoを利用し、Webサイト上で開発が可能となる。また、リモートデバッグを利用することで、本番環境と全く同じ構成でデバッグすることも可能だ。ログもストレージ上に保存できる。今回は紹介しなかったがHadoopを提供するサービスであるHDInsightと併用することで、大規模なログ解析も可能である。Webサイトは、ただWebアプリケーションをホストするだけのサービスではなく、他のサービスと連携し、全てがオンクラウドでこなせる1つの環境となりつつある。

 Webサイトへ興味を持っていただけたなら、Azureは1カ月の無料試用を行っているので、ぜひともそちらを利用して、Webサイトの世界を体験してみてほしい

サイトからのお知らせ

Twitterでつぶやこう!