Windows Azure と Visual Studio Online で継続的インテグレーション (1)

Visual Studio Online (旧 Team Foundation Service) に Web アプリケーションのソース コードをチェックインすると
自動的にビルドが開始し、Windows Azure Web サイトにデプロイされるような
継続的インテグレーション (Continuous Integration, CI) を構成するための手順について記述します。

 

■ ソリューションをチェックインする

Visual Studio Online でチーム プロジェクトを作成しておきます。
Visual Studio でソリューションのみを作成して、Visual Studio Online にチェックインします。

image

 

■ Windows Azure Web サイトを作成する

Windows Azure の管理ポータルで、新規の Web サイトを作成します。
[カスタム作成] を選択します。

image

 

作成する Web サイトの URL を入力し、[ソース管理から発行] をオンにします。

image

ソースコードのリポジトリの種類を指定します。
ここでは [Visual Studio Online] を選択します。

image

image

Visual Studio Online の URL を指定します。
[今すぐ承認] をクリックすると Visual Studio Online 側の承認画面が表示されるので、[Accept] をクリックします。

image

リポジトリ名 (チーム プロジェクト名) を選択して、右下の ✓ をクリックすれば Web サイトが作成されます。
このとき同時に、Visual Studio Online でビルド定義が作成されます。

image

ソース管理システムと連携されていない Web サイトにあとから設定を追加する場合でも、手順は同様です。

 

■ ビルド定義を編集する

Visual Studio で、先ほど作成されたビルド定義を編集します。
ビルド定義は「(サイト名)_CD」という名前で作成されています。
このビルド定義名を変更しても、デプロイ構成には影響ありません。

image

[全般] の [キューの処理] が [有効] に設定されていることを確認します。

image

ビルドの出力場所は既定で [ビルド出力をサーバーにコピーする] となっていますが、
保存しておきたい場合には [ビルド出力を次のソース管理フォルダーにコピーする] を選択します。

image

ビルド対象のソリューションを選択するには、次の図の [ソース設定] と、
その次の図の [プロセス] の [1. Required] – [Solution To Build] で設定します。

image

Release ビルドにするには、[2. Basic] – [Configuration To Build] で、Release 用の構成を追加します。

image

必要に応じて、[3. 基本] – [ビルド番号形式] を変更します。

image

なお、このビルド定義と Windows Azure Web サイトは、
[Deployment Settings Name] に Web サイトの名前を設定することで関連付けられています。

image

 

■ Web アプリケーションをチェックインする

まず Web アプリケーションを作成する前に、
TFS のビルド時に NuGet パッケージを復元するに記述されている手順の通り、
ソリューションを右クリックして [NuGet パッケージの復元の有効化] をクリックします。
これにより、ビルド サーバー側で NuGet パッケージをダウンロードするように構成されます。

次に、例として、[ASP.NET MVC 4 Web アプリケーション] を [空] で作成します。
HomeController を [空の MVC コントローラー] として作成し、Index メソッドに対するビューを作成しておきます。

image

 

これらのファイルを Visual Studio Online にチェックインします。
すると、ビルドが自動的に開始され、Windows Azure Web サイトに初回のビルドがデプロイされます。

Visual Studio での表示:

image

Visual Studio Online での表示:

image

Windows Azure Web サイトでの表示:

image

 

ビルドおよびデプロイに成功すると、Web サイトが表示されるようになります。

image

上述の手順で [ビルド出力を次のソース管理フォルダーにコピーする] を選択しておけば、
ビルド結果は Visual Studio Online に保存されます。

image

その後も、ソース コードをチェックインするたびに自動的にビルドおよびデプロイが実施され、
継続的インテグレーションを実現できます。

過去のバージョンを選択して再デプロイすることもできます。

image

 

なお、ビルドに失敗した場合は自動的にバグとして起票されます。

image

 

■ 番外編: Visual Studio Online "Monaco" で編集する

Windows Azure Web サイトでは、デプロイされているソースをブラウザー上で直接編集できるようになりました。

この機能を有効にするには、[構成] タブで [Visual Studio Online での編集] をオンにします。

image

編集を開始するには、ダッシュボード上の [Visual Studio Online での編集] をクリックします。

image

ブラウザー上で、デスクトップ版の Visual Studio に似た IDE を利用できます。
継続的インテグレーションとは逆に、
Monaco 上での変更結果を Visual Studio Online や Git といったソース管理システムに保存することもできるようです。

image

 

次回は、データベースと連携する Web アプリケーションについて取り扱います。
Windows Azure と Visual Studio Online で継続的インテグレーション (2)

バージョン情報
Visual Studio 2012

参照
Windows Azure
Visual Studio Online
継続的な配置
TFS のビルド時に NuGet パッケージを復元する

コメント / トラックバック4件 to “Windows Azure と Visual Studio Online で継続的インテグレーション (1)”

  1. Windows Azure と Visual Studio Online で継続的インテグレーション (2) | Do Design Space Says:

    […] Windows Azure と Visual Studio Online で継続的インテグレーション (1) とほぼ同様になるため、 […]

  2. TFS のビルド時に NuGet パッケージを復元する | Do Design Space Says:

    […] 参照 Windows Azure と Visual Studio Online で継続的インテグレーション (1) […]

  3. Azure と GitHub で継続的インテグレーション | Do Design Space Says:

    […] 以前、Azure と Visual Studio Online で継続的インテグレーションというエントリを書きましたが、 今回はバージョン管理システムとして GitHub を利用した場合の Azure での継続的インテグレーション (Continuous Integration, CI) について記述します。 […]

  4. Azure と Visual Studio Online (Git) で継続的インテグレーション | Do Design Space Says:

    […] Windows Azure と Visual Studio Online で継続的インテグレーションというのを書きましたが、 今回は、リポジトリの種類として TFVC ではなく […]


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。