Windows AzureクラウドサービスのALM(アプリケーション・ライフサイクル・マネジメント) #aspnetjp #dotnetjp #tfsug

Visual Studio OnlineとWindows Azureの連携に関して、Windows Azure Webサイトの他にWindows Azureクラウドサービスでの連携手順を調査したので、手順を記載する。

前提

使用PCやツール、知識レベルは以下の通りである。

  • 使用PC
    • Surface Pro
  • 使用ツール
    • Visual Studio Express 2013 for Web
    • Visual Studio Online
  • ASP.NETの知識
    • C#もASP.NETも業務でやったことありませんが何か?
  • Visual Studio Online及びWindows Azureのアカウントは作成済

Windows Azureクラウドサービスのプロジェクト作成

Windows Azureクラウドサービスのプロジェクトの作成したいので、自分のアカウントのVisual Studio Onlineのトップページにアクセスする。プロジェクトを作成するために、以下の画面の[New]をクリックする。

Visual Studio Online 1

クリックすると、以下の画面が表示される。[Project name]にはプロジェクトに適した名称を入力する。今回は[example-windows-azure]と入力した。同様に、[Process template]は[Microsoft Visual Studio Scrum 2013.2]、[Version Control]には[Git]を選択した。最後に[Create project]をクリックする。

Create New Team Project 1

しばらく待っていると、プロジェクトの作成が終わるので、[Close]をクリックする。

Create New Team Project 2

Visual Studio OnlineとVisual Studioの連携

プロジェクトを作成しただけでは意味がないので、Visual Studioと連携させるために、Visual Studioを起動する。起動後、チームエクスプローラーを起動させ、以下の画面のように電源のアイコンをクリックする

Opne in Visual Studio

クリックすると、以下の[Team Foundation Serverへの接続]ウィンドウがポップアップするので、先程作成した[example-windows-azure]をチェックし、[接続]をクリックする。

Connect Team Foundation Server

Visual Studio Onlineのリポジトリの複製

クリックすると、以下の画面のように[このリポジトリを複製]が表示されるので、クリックする。すると複製元のVisual Studio Onlineのアドレスと複製先のパスが表示されるので、確認後、問題なければ、[複製]をクリックする。

Team Explorer 1

ソリューションの作成(実装)

複製が終わると、[チーム エクスプローラー – ホーム]のメニューの下にある[ソリューション]の項目が表示される。ここからはVisual Studioで開発している人には慣れ親しんでいる手順になるだろうが、このまま進める。[新規作成]をクリックする。

Team Explorer 2

クリックすると、作成画面が表示される。今回はタイトルの通り、Windows Azureクラウドサービスを作成するので、[Clound]の[Windows Azure クラウドサービス]を選択し、[名前]と[ソリューション名]には[example-windows-azure]と入力し、[OK]をクリックする。

Windows Azure クラウドサービス

クリックすると、以下の画面が表示されるので、[ASP.NET Webロール]をクリックし、[ExampleWebRole]という名前を入力後、[OK]をクリックする。

ASP.NET Webロール

ソースの管理

テンプレートにしたがって作成したので、初期からソースが存在する。ただし、この状態ではまだローカルリポジトリに何も存在しない状態のため、初期状態としてソース管理にコミットする。[ソリューション エクスプローラー]で右クリックし、[ソース管理]->[コミット]をクリックする。クリックすると、[チーム エクスプローラー – 変更]に遷移する。コミットメッセージに[Initial Commit]と入力し、[コミット(I)]をクリックする。

Source Commit

クリックすると、ローカルにはコミットされたものの、サーバーにはコミットされていない状態になる。

ソースの同期

サーバー(Visual Studio Online)と同期するために[同期]をクリックする。

Source Sync 1

入力方向、出力方向のコミットの内容が問題ないか確認し、[同期(S)]をクリックする。

Source Sync 2

クリックすると、以下のように正常に同期されましたと表示されるので、本当にサーバー(Visual Studio Online)に同期されているのか、Visual Studio Onlineのプロジェクト[exmaple-windows-azure]のページで確認してみよう。プロジェクトの[HOME]ページで[CODE]をクリックすると、以下の画面のように正常に同期されていることが分かる。

Source Control

Windows Azureクラウドサービスの作成

Azureの管理ポータルにアクセスし、ログインしよう。表示される画面から[クラウドサービス]をクリックする。

Windows Azure クラウドサービス 1

クリックすると、以下の画面が表示されるので[クラウドサービスを作成する]の右にある[→]をクリックする。

Windows Azure クラウドサービス 2

クリックすると、[コンピューティング]->[クラウドサービス]->[簡易作成]が選択された状態になるので、[URL]に[クラウドサービスのサイトのURL]を入力し、[リージョンまたはアフィニティグループ]には[クラウドサービスで使うリージョン]を選択する。今回は[URL]に[example-myservice]、[リージョンまたはアフィニティグループ]は[日本(東)]を選択し、[クラウドサービスを作成する]の右にある[→]をクリックする。

Windows Azure クラウドサービス 3

クリックすると、Windows Azureクラウドサービスが作成されるので、[サービスの状態]が[作成済み]になったら、[名前]の[example-myservice]をクリックする。

Windows Azure クラウドサービス 4

継続的インテグレーションと継続的デリバリの設定

クリックすると、以下の画面が表示される。継続的インテグレーションと継続的デリバリの設定のためにWindows AzureクラウドサービスとVisual Studion Onlineを連携させよう。[Visual Studion Onlineを使用した発行の設定]をクリックする。

Windows Azure クラウドサービス 5

クリックすると、以下のように[接続を承認する]画面が表示される。既に[Visual Studio Online]のアカウントがあるので、[既存のユーザー]の下の入力ボックスに[Visual Studio Online]のアカウントを入力し、[今すぐ承認]をクリックする。

Windows Azure クラウドサービス 6

クリックすると、以下のようにVisual Studio Onlineの画面が表示される。アカウントに間違いがなければ[Accept]をクリックする。
 
Windows Azure クラウドサービス 7

クリックし、承認が成功すると、以下のように[デプロイするリポジトリの選択]画面が表示される。作成したプロジェクトの名称を[リポジトリ名]から選択する。今回は[example-windows-azure]を選択し、[√(チェック)]をクリックする。

Windows Azure クラウドサービス 8

クリックすると、以下の画面のようにWindows AzureクラウドサービスとVisual Studion Onlineが連携される。

Windows Azure クラウドサービス 9

本当に継続的インテグレーションと継続的デリバリの設定がされているのかVisual Studio Onlineのプロジェクト[exmaple-windows-azure]のページで確認してみよう。プロジェクトの[HOME]ページで[BUILD]をクリックすると、以下の画面のように[プロジェクト名_CD]のビルド定義が作成されていることが分かる。今回内容は省くが、自動生成されるこの[プロジェクト名_CD]という継続的デリバリのビルド定義はチェックイン毎にビルドを実行し、ビルドに成功するとテストを実行し、すべてのテストをパスすると、デプロイするというものである。

CI, CD setting 1

もちろん、Visual Studio Onlineと同期をとっているので、Visual Studioにも自動的に作成されているが、念のために[チームエクスプローラー – ビルド]の画面を表示して確認してみよう。

CI, CD setting 2

継続的デリバリの確認

継続的デリバリが実施されるか確認するために、このプロジェクトのソースを変更し、コミットしてみよう。[Default.aspx]の[We suggest the following]を[We suggest the following Example]に変更し、[チーム エクスプローラー – 変更]でコミットメッセージに[Modify We suggest the followin -> We suggest the followin Example]と入力し、[コミット(I)]をクリックする。

CD 1

クリックすると、ローカルにはコミットされたものの、サーバーにはコミットされていない状態になるので、サーバー(Visual Studio Online)と同期するために[同期]をクリックする。

CD 2

入力方向、出力方向のコミットの内容が問題ないか確認し、[同期(S)]をクリックする。

CD 3

クリックすると、以下のように正常に同期されましたと表示される。

CD 4

以下の画面のようにWindows Azureクラウドサービスの運用環境には何もデプロイされていない。

CD 5

同様にWindows Azureクラウドサービスのステージング環境にも何もデプロイされていない。

CD 6

コミット内容をVisual Studio Onlineに同期したので、Visual Studio Onlineでビルドされているか確認してみよう。[BUILD]の画面を更新すると、以下の画面のようにコミットした内容をVisual Studio Onlineでビルドしていることが分かる。しばらく待ってから、[Completed]をクリックする。

CD 7

クリックした後、ビルドが成功していると以下の画面が表示される。次にデプロイされているか確認するために[Deployed]をクリックする。

CD 8

クリックすると、以下の画面が表示され、デプロイが成功していることが分かる。

CD 9

さて、本当にコミットした内容でデプロイされているか確認してみよう。Windows Azureクラウドサービスの運用環境は以下のように何もデプロイされていない。

CD 10

同様にWindows Azureクラウドサービスのステージング環境を見ると以下のようにデプロイされていることが分かる。

CD 11

デプロイされている内容を確認するために[サイトのURL]に記載されているURLを新しい画面で開く。

CD 12

以下のように先程コミットした内容でデプロイされていることが分かる。

CD 13

ステージング環境で確認したので、運用環境にデプロイしよう。そのため[スワップ]をクリックする。

CD 14

VIPスワップするか確認してくるので、問題なければ[√(はい)]をクリックする。

CD 15

VIPスワップするとステージング環境には運用環境が反映されるので、空になっている。

CD 16

逆に運用環境にはステージング環境が反映されるので、デプロイされている。

CD 17

デプロイされている内容を確認するために[サイトのURL]に記載されているURLを新しい画面で開く。

CD 18

以下のように先程コミットした内容でデプロイされていることが分かる。

CD 19

まとめ

今回Windows AzureクラウドサービスでALM(アプリケーション・ライフサイクル・マネジメント)についてのやり方を画面キャプチャを交えて説明してきた。前提にも記載したが、自分はASP.NETの知識はC#もASP.NETも業務でやったことない状態でこれだけのことができている。実際、画面キャプチャをとりつつ、作業をしたが、右下の時間を見てもらえば分かる通り、最初から最後まで1時間かかっていない。

現在ではALM(アプリケーション・ライフサイクル・マネジメント)はどこか遠くの国の優秀な人しかできないものではなく、Visual Studioを筆頭に便利なツールを使うことで簡単に実現できる内容になっている。

今回の記事でALM(アプリケーション・ライフサイクル・マネジメント)がどれだけ簡単か実感してもらえれば幸いである。