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

以前に Windows Azure と Visual Studio Online で継続的インテグレーションというのを書きましたが、
今回は、リポジトリの種類として TFVC ではなく Git を使ってみます。

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

 

■ ソリューションをコミットする

まず、Visual Studio Online で Git のチーム プロジェクトを作成しておきます。
Visual Studio でソリューションのみを作成して、Visual Studio Online にコミット・プッシュします。
ソリューションを作成する手順は後でもかまいませんが、
ここで作成しておくと、ビルド定義にソリューションへのパスが自動で含まれるようになります。

image

 

■ Azure Web アプリを作成する

Microsoft Azure の管理ポータルで、新規の Web アプリを作成します。[カスタム作成] を選択します。

image

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

image

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

image

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

image

リポジトリ名 (チーム プロジェクト名) を選択して、右下の ✓ をクリックすれば Web アプリが作成されます。

image

このとき同時に、Visual Studio Online にビルド定義が作成されます。
なお、ソース管理システムと連携されていない Web アプリにあとから連携を追加することもできます。

 

■ ビルド定義を編集する

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

image

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

image

ビルドのトリガーは、既定で [継続的インテグレーション] に設定されています。
この設定のときでも、ビルドのメニューから手動で開始することもできます。

image

ソースの場所は、分岐まで指定できます。
本番用 (Production) とテスト用 (Staging) の環境を用意したい場合は、
それぞれの Azure Web アプリを作成し、それぞれを master と開発用の分岐に関連付けるなどするとよいでしょう。

image

ビルドの出力場所は既定で [ビルド出力をサーバーにコピーする] に設定されています。

image

ターゲットのソリューションまたはプロジェクトを [2. Build] – [Projects] で指定します。
Release ビルドにするには、[2. Build] – [Configurations] で、Release 用の構成を追加します。

image

なお、ビルド定義と Azure Web アプリは、[Windows Azure Deployment Environment] の値で関連付けられています。

image

 

■ Web アプリケーションをコミットする

Web アプリケーションを作成します。
ここでは例として、[ASP.NET Web アプリケーション] を選択し、テンプレートから [MVC] を選択します。

image

これらのファイルを Visual Studio Online にコミット・プッシュします。
すると、ビルドが自動的に開始され、Azure Web アプリに初回のビルドがデプロイされます。

Visual Studio Online での表示:

image

Azure Web アプリでの表示:

image

 

ビルドおよびデプロイに成功すると、Web アプリが実行されるようになります。

image

ビルド定義で [ビルド出力をサーバーにコピーする] に設定されている場合、
ビルドの実行ログの [Download drop as zip] でデプロイされたビルド一式を取得できます。

image

Monaco で配置フォルダーを覗いてみると、BuildInfo.config というファイルが作成されています。
これにより、現在デプロイされているビルドの情報を確認することができます。

image

 

以上で、継続的インテグレーションが構成されました。
その後も、ソース コードをコミットするたびに自動的にビルドおよびデプロイが実施されます。

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

image

 

バージョン情報
Visual Studio 2013

参照
Visual Studio Online と Git を使用した Azure への継続的な配信
Windows Azure と Visual Studio Online で継続的インテグレーション (1)
Azure と GitHub で継続的インテグレーション

広告

TFS のビルド時に NuGet パッケージを復元する

近年の .NET 開発では、追加のライブラリをインストールするために NuGet が利用されます。
NuGet からダウンロードしたライブラリは、ソリューションの下の packages フォルダーにキャッシュされます。

Web アプリケーション プロジェクトはとくに NuGet のライブラリを使うことが多く、
通常の手順で TFS にチェックインすると、通信に時間がかかったり、
ソリューションごとに大量のキャッシュをソース管理で保持しなければならなくなります。

これを避け、ビルド時に TFS 側で NuGet パッケージをダウンロードさせる方法を以下で紹介します。

 

■ ビルド時に TFS 側で NuGet パッケージをダウンロードさせるための手順

ソリューションを作成したら、Web アプリケーション プロジェクトを作成する前に
[ソリューション エクスプローラー] でソリューションを右クリックして、
[NuGet パッケージの復元の有効化] をクリックします。

image

すると、.nuget というソリューション フォルダーが作成されます。

image

[ASP.NET MVC 4 Web アプリケーション] を [空] で作成して、TFS にチェックインします。
packages フォルダーの中では、repositories.config だけがチェックインされます。

image

これで、ビルド時には TFS 側で NuGet パッケージがダウンロードされるようになります。

 

■ NuGet パッケージのキャッシュを TFS のソース管理から完全に除外するための手順

上記の手順でビルドは成功するようになりましたが、
[保留中の変更] で [検出済み: 追加 xx] と表示されています。
ここには、ローカルとサーバーの差分がリアルタイムで表示されます。

image

[検出済み: 追加 xx] と表示されている部分をクリックします。

[候補の変更の昇格] ダイアログが表示されるので、
任意のファイルを右クリックして、[フォルダー (…) で無視] をクリックします。

image

すると、チーム プロジェクトのルート フォルダーに .tfignore ファイルが作成されます。
このファイルでは、TFS のソース管理で無視するファイルやフォルダーを指定できます。

このファイルを開き、「packages」以降のパスを削除して保存します。

image

これで、NuGet パッケージのキャッシュが TFS のソース管理から完全に除外されました。

 

バージョン情報
Visual Studio 2012

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

カテゴリー: ALM. タグ: , . 2 Comments »

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

今回は、データベースと連携する Web アプリケーションを作成して、
Windows Azure と Visual Studio Online で継続的インテグレーションを構成してみたいと思います。

手順は Windows Azure と Visual Studio Online で継続的インテグレーション (1) とほぼ同様になるため、
主に相違点について記述していきます。

まず以下で示すように、
Windows Azure Web サイトを作成する際に、同時に無料の 20 MB SQL データベースを作成します。

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

image

[無料の 20 MB SQL データベースの作成] を選択します。
アプリケーション側で使用する接続文字列の名前 (Web.config で定義されているもの) を指定します。
[ソース管理から発行] をオンにします。

image

今回は、新しい SQL データベース サーバーも作成することにします。
[データベースの詳細設定を構成します] をオンにします。

image

照合順序を選択します。

image

[Visual Studio Online] を選択します。

image

Visual Studio Online の URL を入力して、[今すぐ承認] をクリックします。
Visual Studio Online 側の承認画面が表示されたら [Accept] をクリックします。

image

リポジトリ名 (チーム プロジェクト名) を選択して、右下の ✓ をクリックします。
すると、Web サイトおよび SQL データベースが作成されます。

image

 

ここから先の手順は Windows Azure と Visual Studio Online で継続的インテグレーション (1) で示した通り、

  • ビルド定義を編集する
  • Web アプリケーションをチェックインする

を実施すれば継続的インテグレーションが構成されます。
Visual Studio から Windows Azure にデプロイするで説明した通り、
接続文字列は Windows Azure Web サイトに登録されているものが使用されるため、デプロイ時に改めて設定する必要はありません。

例として、Visual Studio から Windows Azure にデプロイするで利用した Todo List の Web アプリケーションで
動作を確認できました。

image

 

バージョン情報
Visual Studio 2012

参照
Windows Azure
Visual Studio Online

Windows Azure と Visual Studio Online で継続的インテグレーション (1)
Visual Studio から Windows Azure にデプロイする

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 パッケージを復元する