いまさら聞けない最新Microsoft Azure
ここまで進化した、Azure Webサイトの世界観(2014年7月版)
IaaSからPaaSまで多様なサービスを提供するAzureの中でも特に重要性が増してきている「Webサイト」とは? その世界観を特徴付ける主要な機能を解説する。
クラウド関連のサービスを提供する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」と呼んでいる。
さてWebサイトであるが、Webサイトでは多くの開発言語に対応しており、C#、Node.js(JavaScript)、PHP、Python、Javaが利用できる。また、多様なデプロイ方法にも対応している。さらに無料、共有、基本、標準の4つのプランから選択でき、上位プランを選択することでスケールアウトやSSL対応、地理冗長などさまざまなオプションを利用できる。
さまざまな機能を有するWebサイトであるが、それらの機能を利用していくと、1つの世界観がうかがえる。以降は各種機能の中から特徴的なもの取り上げて紹介していく。
多様なデプロイ方法
Webサイトは多様なデプロイ方法に対応している。
ローカルGitリポジトリ、GitHub、Dropbox、Bitbucket、CodePlex、外部リポジトリが利用できる。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
|
このコマンドを実行するには、当然ながら、Node.jsとExpressを事前にインストールしておく必要がある(本稿の趣旨から外れるので、インストール方法の説明は割愛する)。
ローカルGitリポジトリを持つWebサイトを作成する
次に、デプロイするターゲットとなるWebサイトを作成する。まず、Azureポータルサイトを開く。
ポータルサイトへのログインが完了後、Webサイトを作成する。図2の[新規]をクリックして、[コンピューティング]-[WEBサイト]-[簡易作成]を選択し、フォームに必要項目を入力する(図3)。
- 1 ユニークな名前を入力し、[URL]を設定する。このとき、右端に緑色のチェックマークが表示され、入力したURLが使用できることを確認する。
- 2 [WEB ホスティング プラン]ドロップダウンから「新しい Web ホスティング プランの作成」選択する。
- 3 [リージョン]ドロップダウンから一番近いリージョンを選択する。
- 4 [WEB サイトの作成]ボタンをクリックし、Webサイトの作成を開始する。
Webサイト作成後、作成したWebサイトのダッシュボードに移動する(図4)。もし、Azureを初めて利用する場合は、まず、デプロイ資格情報を設定する。
図4の[デプロイ資格情報を設定する]をクリックすると、次の図5のようなダイアログが表示される。
なお、この資格情報はサブスクリプション内のWebサイト全てに対して有効であり、この設定の手順は最初の1回のみとなる。
- 1 デプロイに利用するユーザー名を入力する。
- 2 使用するパスワードを入力する。
- 3 使用するパスワードを再度入力する。
- 4 [完了]ボタンを押し、資格情報の設定を完了する。
デプロイ資格情報設定の完了後、同じくダッシュボードの概要より、ソース管理からのデプロイ方法を設定する(図6)。
- 1[ローカル Git リポジトリ]をリストから選択する。
- 2 [→]ボタンをクリックし、ローカルGitリポジトリの作成を開始する。
ローカルGitリポジトリの作成が完了すると、上部に[デプロイ]タブが追加されるので、そのタブのページを表示する。そのページでリポジトリURLをコピーする(図8)。
ExpressプロジェクトをGitでWebサイトにデプロイする
作成したプロジェクトフォルダー内でGitを初期化し、先ほどのリポジトリをリモートに追加する(次のコマンド)。
git init
git add .
git commit -m "initial commit"
git remote add origin コピーしたURL
git push origin master
|
コピーしたURLには先ほどポータルサイトでコピーしたGitリポジトリのURLを挿入します。
リポジトリにプッシュすると、Webサイトインスタンスに配置され、[デプロイ]ページの表示内容が次の図9のようになる。
作成した、Webサイトを参照すると、ExpressがAzure上で動作していることが確認できる(図10)。
このように、Node.jsのアプリケーションはデプロイ用の設定ファイルなどを作成し、デプロイ設定を行うことなく、デプロイするのみで自動配置され、実行される。
Dropbox
Dropboxは、フォルダー同期機能で人気のあるオンライン・ストレージ・サービスである。Azureでは、このDropboxからもデプロイが可能である。その方法を紹介する。なお、デプロイするプロジェクトには、CMSとして人気の高いWordPressを使用する。
AzureのWebサイトにひも付いた、Dropboxのフォルダーを作成する
図11のように、[新規]-[コンピューティング]-[WEB サイト]-[カスタム作成]を選択する。
図12のダイアログが表示されるので、新しいWebサイトに必要な項目を入力し、次へ進む。
- 1ユニークなURLを入力する。
- 2ドロップダウンリストから「新しい Web ホスティング プランの作成」を選択する。
- 3ドロップダウンリストからリージョンを選択する。
- 4ドロップダウンリストから「新しい MySQL データベースを作成します」を選択する。
- 5[ソース管理から発行]にチェックを入れる。
- 6ボタンをクリックし、次に進む。
MySQLデータベースの設定を行う(図13)。AzureでMySQLを利用する際は、ClearDBを利用する形となる。そのため、MySQLのインスタンスを作成するに当たって、ClearDBの法律条項に同意する必要がある。
ソースコードのデプロイ元としてDropboxを選択する(図14)。
上記の作業により、図15のウィンドウがポップアップする。AzureがDropboxへアクセスするために許可を与える必要があるからだ。そこで、Dropboxにログインし、図15の[許可]ボタンをクリックし、AzureからDropboxへのアクセスリクエストを承認する。
許可ボタンをクリックし、AzureがDropboxへアクセスする権限を与える。
承認するとウィンドウが閉じられ、図16のページが表示されるので、発行の設定に必要な項目を入力し、Webサイトを作成する。
- 1ドロップダウンリストから「<新しいフォルダー>」を選択する。
- 2フォルダー名を入力する。
- 3チェックを入れ、ロールバックを有効化する。
- 4ボタンをクリックし、Webサイトの作成を開始する。
デプロイ環境の準備には、ある程度時間がかかる。プロジェクトフォルダーは「<Dropboxフォルダー>\アプリ\Azure」内に作成される。次の画面はその例。
WordPressサイトをDropboxでWebサイトにデプロイする
WordPressダウンロードページから最新のパッケージをダウンロードし、プロジェクトフォルダーの直下に展開する(図18)。
WordPressから最新のパッケージをダウンロードし、プロジェクトフォルダー直下へ展開する。
Dropboxフォルダーの同期が完了した後、[デプロイ]ページの[同期]ボタンをクリックすると(図19)、Webサイトへのデプロイが開始される。ここで注意が必要なのは、Dropboxを利用しているが、プロジェクトフォルダーに保存したものが自動で反映されることはない点だ。ポータルサイトで同期を実行する必要がある。
デプロイが完了すると、デプロイ履歴が表示される(図20)。
作成したWebサイトを参照すると、図21に示すように、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)。
- 1[構成]ページを開き、[VISUAL STUDIO ONLINE で編集]をオンにする。
- 2[保存]ボタンをクリックし、変更を反映させる。
[ダッシュボード]ページの[概要]から[Visual Studio Online での編集]を選択し(図23)、Monacoを開く。
Monacoは別ウィンドウに開かれ、スタートページが表示される(図24)。
Monacoの基本的な操作方法
それではMonacoの基本的な操作方法を説明しよう。ここでは図25の手順に従って、新しくHTMLファイルを追加する。
- 1[ファイルの追加]ボタンをクリックする。
- 2ファイル名に「index.html」と入力する。
追加したHTMLファイルを次のように編集する。
<!DOCTYPE html>
<html>
<head>
<title>My Monaco Sample</title>
</head>
<body>
<h1>Hello, Monaco!</h1>
</body>
</html>
|
Monacoでは、編集したファイルは自動で保存され、反映される。また、図26に赤枠で示している[実行]ボタンを押すことでWebサイトを参照できる。
実行されたWebサイトを閲覧すると、編集が反映されていることが確認できる(図27)。
このように、Monacoを利用することで、HTMLやスクリプト言語のコードをブラウザー上で編集できる。また、コンソールからはnpmなどのコマンドも利用できるため、十分に開発が可能である。
ステージング
ブラウザー上で利用できるMonacoを紹介したが、Monacoは自動で保存されるため、本番環境で利用するのは好ましくない。また、ローカルで開発し、デプロイする従来どおりのスタイルであってもいきなり本番環境にデプロイすることは避け、まず、テスト環境で検証したいと思うことだろう。Webサイトでは展開スロットを利用することでステージング開発を行うことができ、これらの需要を満たせる。
展開スロットの有効化と作成
先ほどのMonacoの検証のために作成したWebサイトを使用してステージングの基本的な手順を示す。
まず、展開スロットを使用するには、[スケール]ページを開いてWebホスティングプランを「標準」に変更する必要がある(図28)。
[WEB ホスティング プランのモード]で「標準」を選択し、赤枠の[保存]ボタンで変更を反映させる。
ホスティングプランの変更完了後、[ダッシュボード]ページの[概要]で[新しい展開スロットの追加]が利用できるようになる(図29)。
[新しい展開スロットの追加]リンクをクリックすると、図30のダイアログが表示されるので、新しい展開スロットを作成する。
- 1スロットの名前を入力する。
- 2[構成のソース]ドロップダウンリストから、Monacoを利用した先のインスタンスを選択する。
- 3ボタンをクリックし、スロットの作成を開始する。
基本的なステージング開発の方法
展開スロットの作成が完了すると、Webサイト一覧ページに遷移する。リストの先頭に折り畳みマークが付加される(図31)。スロットは親のWebサイトに折り畳まれるため、折り畳みマークをクリックし、作成した展開スロットを選択する。
赤枠の三角マークをクリックし、スロットを展開する。
追加したスロットを選択する。
先ほどと同様に[ダッシュボード]からMonacoを開き、新しくファイルを追加する。
追加したファイルを次のように編集する。
<!DOCTYPE html>
<html>
<head>
<title>Staged Deployment</title>
</head>
<body>
<h1>This is developed in slot1!</h1>
</body>
</html>
|
ここで、「追加した展開スロット」を実行してHTMLページを閲覧し、先ほどの「Webサイト」のHTMLページの内容やURLと比較して、出力の位置関係を確認します(図32)。
[ダッシュボード]ページから[スワップ]を実行する(図33)。
[ダッシュボード]ページの赤枠の[スワップ]ボタンをクリックする。
これにより図34のダイアログが表示されるので、スワップを行うソースとターゲットを選択し、スワップを実行する。
スワップはソースとターゲットのインスタンスを切り替える機能であり、先ほどの出力を更新して比較すると、位置関係が入れ替わっていることが確認できる(図35)。
奥のウィンドウが前節で作成したHTMLページ、手前のウィンドウが展開スロットのHTMLページであり、展開スロットがスワップされたため、図32と見比べると表示内容が入れ替わっている。
このように、展開スロットを利用することで、より一層開発しやすくなる。しかし、あくまでスワップはインスタンスの切り替えであるため、開発用に展開スロットを作った場合、スワップ後は編集前のインスタンスと入れ替わっていることに注意が必要だ。実際に利用するにはVisual Studio Onlineや外部リポジトリと連携する必要がある。
リモートデバッグ
もし、ローカル環境では見付からず、テスト環境にデプロイして初めて見付かる不具合があったとする。このとき役立つ機能の1つとしてリモートデバッグが挙げられる。リモートデバッグはVisual Studioと連携することで利用できる。
ASP.NET MVCプロジェクトを新規Webサイトに発行(=デプロイ)する
まず、デバッグ対象となるASP.NETプロジェクトを作成する(図36)。
[新規 ASP.NET プロジェクト]ダイアログでは、テンプレートは「MVC」を選択する(図37)。
作成したプロジェクトを発行し、Webサイトを作成する。
図38に示す手順を実行すると、図39の[Web を発行]ダイアログが表示される。Webサイトは、このダイアログ内で作成可能である。
図39の手順を実施すると、図40のダイアログがさらに表示されるので、新しく発行先となるWebサイトを作成する。
赤枠の[新規]ボタンをクリックする。
これにより、[Windows Azure でサイトを作成]ダイアログが表示されるので、図41の手順に従って、新しくWebサイトを作成するために必要な項目を入力し、Webサイトを作成する。
- 1ユニークなサイト名を入力する。
- 2リージョンをドロップダウンリストから選択する。
- 3データベースサーバーを選択する。ドロップダウンリストから「新しいサーバーの作成」を選択する。
- 4データベースユーザー名を入力する。
- 5パスワードを入力する。
- 6再度、パスワードを入力する。
- 7[作成]ボタンをクリックし、Webサイトを作成する。
発行先のWebサイト作成完了後、図39で示したダイアログに戻るので、[設定]タブを開き、[構成]を「Debug」に変更し、発行を行う(図42)。
リモートデバッグの基本的な手順
発行完了後、ブレークポイント設置する(図43)。
Controllers\HomeController.csファイルをVisual Studioで開き、ブレークポイントを設定する。
サーバーエクスプローラーから、新しく作成したWebサイトに対してデバッガーを接続する(図44)。
サーバーエクスプローラーから[Windows Azure]-[Web サイト]-[<作成したWebサイト>]のコンテキストメニューを開き、[デバッガーの接続]をクリックする。
デバッガーの接続完了後、ブラウザーが立ち上がり、Webサイトを参照する。このとき、ブレークポイントを設置したため、図45に示すように、ブレークポイント上で一時停止する。
このように、リモートであっても、ローカルと変わらない要領でデバッグをすることが可能である。
ログ
前節ではリモートデバッグを紹介したが、稼働中の本番環境へのアクセスや生じたエラーなどを詳細に知るには、ログの収集が必要不可欠となる。そこで、Webサイトでのログの収集方法を紹介する。
サイト診断
サイト診断は、Node.jsやPHPなど全てのプロジェクトが収集可能なログである。ログは、AzureのBLOBストレージに拡張W3Cログファイルフォーマットで保存される。
サイト診断用のログ出力を設定する
はじめに、保存先のストレージを作成する(図46)。
次に、対象となるWebサイト(※新規作成したストレージではない)の[構成]ページを開き、サイト診断を有効化する(図47)。今回はGitデプロイを試したNodeプロジェクトのWebサイトのログを収集する。
- 1[WEB サーバーのログ記録]を「ストレージ」に変更する。
- 2[ストレージの管理]ボタンをクリックし、保存するストレージを設定する。説明は次に行う。
- 3[詳細なエラー メッセージ]をオンにする。
- 4[失敗した要求トレース]をオンにする。
- 5[保存]ボタンをクリックし、変更を反映させる。
[ストレージの管理]ボタンをクリックすると、[サイト診断用のストレージの管理]ダイアログが表示される(図48)。ここで、ログの記録先となるBLOBコンテナーを設定する。
- 先の[ストレージの管理]ボタンをクリックすると表示される。
- 1節の初めに作成したストレージアカウントをドロップダウンリストから選択する。
- 2ドロップダウンリストから「新しい BLOB コンテナーを作成する」を選択する。
- 3BLOBコンテナー名に問題があれば変更する。
- 4ボタンをクリックし、ダイアログを閉じる。
サイト診断用のログの参照方法
サイト診断有効化後、Webサイトを数度、参照する。参照履歴が拡張W3Cログファイルフォーマットでファイルに保存される。
確認のために、BLOBコンテナー(=ストレージの[コンテナー]ページ)からログファイルをダウンロードして確認する(図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
|
アプリケーション診断
アプリケーション診断は、.NETの標準的なトレース(=System.Diagnostics名前空間のTraceクラス)出力をストレージに保存する機能であり、ASP.NETプロジェクトで利用できる。
アプリケーション診断用のログ出力を設定する
Webサイトの[構成]ページを開き、アプリケーション診断を有効化する(図50)。今回はWebサイトに、リモートデバッグに使用したもの使用する。アプリケーション診断用のログの記録先としては、「ファイルシステム」「テーブルストレージ」「BLOBストレージ」の3つに対応している。ここでは、確認の容易なBLOBストレージを使用する。
- 1[アプリケーション ログ記録 (BLOB ストレージ)]を「オン」にする。
- 2[ログ レベル]を「詳細」に設定する。
- 3[blob ストレージの管理]ボタンをクリックし、保存するストレージを設定する。説明は次に行う。
- 4[保存]ボタンをクリックし、変更を反映させる。
[blob ストレージの管理]ボタンをクリックすると、図51の[アプリケーション診断用の BLOB ストレージの管理]ダイアログが表示される。ここで、ログの記録先となるコンテナーを設定する。
-
先の[blob ストレージの管理]ボタンをクリックすると表示される。
- 1節の初めに作成したストレージアカウントをドロップダウンリストから選択する。
- 2ドロップダウンリストから「新しい BLOB コンテナーを作成する」を選択する。
- 3BLOBコンテナー名に問題があれば変更する。
- 4ボタンをクリックし、ダイアログを閉じる。
アプリケーション診断用のログの参照方法
プログラムを編集し、ログの出力コードを挿入する。Controllers\HomeController.csファイルを開きIndexメソッドを次のように編集する。
Public ActionResult Index()
{
System.Diagnostics.Trace.TraceInformation("Sample log at {0}", DateTime.Now.ToString());
return View();
}
|
編集後、再発行し、Webサイトを更新する。何度かWebサイトを参照し、ログを記録させる。
保存先のコンテナーからログファイルをダウンロードし確認する(図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サイトの世界を体験してみてほしい