Visual Studio とTeam Foundation Server /Visual Studio Team Services で実現するビルド・テスト・デプロイ自動化手順書

Visual Studio ハンズオントレーニング
Visual Studio と
Team Foundation Server /
Visual Studio Team Services で実現する
ビルド・テスト・デプロイ自動化手順書
日本マイクロソフト株式会社
開発ツール推進部
武田正樹
Masaki.Takeda@microsoft.com
最終更新日: 2017 年 6 月 10 日

2
目次 (1)
 手順書概要 5
 Azure Dev Test Labs 編 6
 DevTest Labs の作成 7
 DevTest Labs 用仮想マシンの作成 11
 仮想マシンの VM1 の設定 15
 Visual Studio の起動 27
 仮想マシン VM2 の作成 32
 Visual Studio Team Services 準備編 45
 Visual Studio Team Services のアカウント作成 46

3
目次 (2)
 テスト作成編 53
 Visual Studio との接続 54
 ワークスペースにプロジェクトを作成 60
 単体テストの自動生成 63
 単体テストの実行 68
 Visual Studio Team Services へのチェックイン 77
 ビルド編 83
 ビルド定義の作成 84
 ビルドの実行 98
 ビルドサーバー構築編 102
 ビルドエージェントのダウンロード 103
 ビルドエージェントの有効化 105
 リリース管理編 111
 承認ワークフローの作成 112

4
目次 (3)
 UI テスト作成編 127
 UI テスト用のリポジトリを作成 128
 UI テストの作成 132
 単体テストにアサーションを追加 137
 単体テストのコミット 144
 UI テスト実行編 147
 UI テストのビルド 148
 UI テストの実行 166
 手順書 185

5
手順書概要
 Team Foundation Server／Visual Studio Team Services を使用すると、コードのホスト、プロジェク
トの計画と追跡、チームメンバーとのコラボレーションができ、より良いソフトウェアをリリースでき
ます。Visual Studio Team Services が実現するクラウドベース ALM ソリューションでは、ソースコー
ドの管理から、課題のトラッキング、ロードテスト、自動ビルドまで、ソフトウェア開発のすべての工
程で必要なソリューションが提供されます。主要な各 IDE や Microsoft Azure と統合されており、最大
の利点はほぼどこからでもアクセスできることです。
 本手順書では、Visual Studio 2015 Enterprise, Microsoft Azure と Visual Studio Team Services を
使用します。
 マイクロソフトアカウントとMicrosoft Azure サブスクリプションは事前にご準備ください。
 本手順書では、以下のことを学習します。
 Visual Studio を利用した開発生産性向上のための機能の体験
 Visual Studio Team Services での自動テストの実施
 所要時間：約150分 - 180分

Azure DevTest Labs 編
- DevTest Labs の作成
- DevTest Labs 用仮想マシン VM1 の作成
- DevTest Labs 用仮想マシン VM1 の確認

7
1. ブラウザーで https://portal.azure.com にアクセスし、Azure ログイン可能なアカウントを入力します。
2. 入力したアカウントの種類によりリダイレクト先がかわります。リダイレクト先で、パスワードを入力します。
3. [サインイン] をクリックします。
DevTest Labs の作成 (1)
1
お手元のPC
2
3

8
Azure Portal のダッシュボードが表示されます。
1. Dev Test Lab を作成します。[+新規] をクリックします。
1
お手元のPC

9
1. 新規作成するサービスのカテゴリが表示されます。[開発者向けサービス]もしくは、[Developer tools] をクリックします。
2. [Dev Test Labs] をクリックします。
1
2
お手元のPC

10
1. Dev Test Labs の作成画面が表示されます。[ラボ名] には、[VSTSHOL] と入力します。
2. [場所] は、[東日本] を選択します。
3. [作成] をクリックして、Dev Test Labs の作成を開始します。作成までは数分かかります。
1
2
3
1 つのサブスクリプションを複数人で共有している場合は、
[VSTSHOL-1], [VSTSHOL-2] のように入力してください。
お手元のPC

11
Dev Test Labs の作成完了後、Dev Test Labs に仮想マシンを作成します。
1. Azure Portal で [すべてのリソース] をクリックします。
2. [Dev Test Lab アイコンの VSTSHOL] をクリックします。
DevTest Labs 用仮想マシンの作成 (1)
1
2
お手元のPC

12
1. Dev Test Lab [VSTSHOL] のブレードが表示されます。[+追加] をクリックします。
1
お手元のPC

13
1. [ベースの選択] ブレードの [Visual Studio Enterprise 2015 Update 3 with Azure SDK 2.9…] をクリックします。
2. 仮想マシンの作成ブレードが表示されます。[仮想マシン名] には、[VM1] と入力します。
3. [ユーザー名] は、[azuredaisuki] と入力します。
4. [パスワード] は、[Passw0rd!!!!] と入力します。
5. [ディスクサイズ] は、[SSD] をクリックします。
6. [仮想マシンサイズ] をクリックします。
1
2
4
3
5
お手元のPC
6
1 つのサブスク
リプションを複
数人で共有して
いる場合は、
[VM1-1],
[VM1-2] のよう
に入力してくだ
さい。

14
1. [DS2_V2 Standard] をクリックします。
2. [選択] をクリックします。
3. [仮想マシンサイズ] に [Standard DS2_V2] が選択されていることを確認します。
4. [作成] をクリックして、仮想マシンを作成します。
1
2 4
3
お手元のPC
仮想マシンのサイズ
が選択できない場合、
西日本リージョンで
DevTest Labs を作
成してください。

15
Dev Test Labs に作成した仮想マシンに RDP 接続して、Visual Studio がインストールされていることを確認します。
仮想マシンの VM1 の設定 (1)
1
2
お手元のPC

16
1. Dev Test Lab [VSTSHOL] のブレードが表示されます。作成した仮想マシン[VM1] をクリックします。
1
お手元のPC

17
1. 作成した仮想マシン[VM1] のブレードが表示されます。[接続] をクリックします。
2. [VM1.rdp のダウンロード終了しました。] メッセージが画面下部に表示されます。[開く] をクリックします。
1
2
お手元のPC

18
1. リモートデスクトップ接続の画面が表示されます。[接続] をクリックします。
2. [ユーザー名] は [azuredaisuki] と入力します。
4. [OK] をクリックします。
1
2
3
4
RDP: VM1

19
リモートデスクトップ接続の画面が表示されます。
1. [このコンピュータへの接続について今後確認しない] にチェックをいれます。
2. [はい] をクリックします。
1
2
RDP: VM1

20
仮想マシン [VM1] にリモートデスクトップ接続している画面が表示されることを確認します。
仮想マシンの VM1 の設定 (6) RDP: VM1

21
Internet Explorer のセキュリティ設定を変更します。
1. [Local Server] をクリックします。
2. [IE Enhanced Security Configuration] の [On] をクリックします。
1
2

22
1. [Administrators] の [Off] をクリックします。
2. [Users] の [Off] をクリックします。
1
2
3

23
1. [PowerShell] アイコンをクリックします。
2. [Set-Item WSMan:localhostClientTrustedHosts * -Force] を実行します。
3. [Enable-PSRemoting] コマンドを実行します。選択肢は２回とも [A] で回答します。
1
3
3
3
2
RDP: VM1

24
Powershell のリモート実行をするためにファイアウォールの設定をします。今回はファイアウォールの設定をOff にします。
1. 画面左下のウインドウアイコンを右クリックし、[Control Panel] をクリックします。
2. [firewall] と入力し、フィルターをかけます。
3. [Windows Firewall] をクリックします。
1
2
3
RDP: VM1

25
1. [Turn Windows Firewall on or off] をクリックします。
1
RDP: VM1

26
1. [Private network settings] の [Turn off Windows Firewall] をクリックします。
2. [Public network settings] の [Turn off Windows Firewall] をクリックします。
1
2
3
RDP: VM1

27
1. Visual Studio を起動します。[Windows ロゴ] を右クリックし、[Run] をクリックします。
2. [devenv] と入力します。
3. [OK] をクリックして、Visual Studio を起動します。
Visual Studio の起動 (1)
1
RDP: VM1
2
3

28
1. [Not now. Maybe later] をクリックします。
2. [Start Visual Studio] をクリックして、Visual Studio を起動します。
1
RDP: VM1
2

29
Visual Studio が起動すると、ライセンス認証の画面が表示されます。今回は評価版として利用します。
1. [Sign in] をクリックします。
2. Visual Studio Team Servies アカウントを作成際に使用したマイクロソフトアカウントを入力します。
3. [Continue] をクリックします。
1
RDP: VM1
2
3

30
Visual Studio Team Services のサインイン画面が表示されます。
1. Microsoftアカウントのパスワードを入力します。
2. [サインイン]をクリックします。
1
2
RDP: VM1

31
1. ログインが完了したことを確認して、[Close] をクリックします。
1
RDP: VM1

32
Visual Studio Team Services のリリース管理で DevTest Labs に仮想マシン作成するための設定を行います。
仮想マシン VM2 の作成 (1)
1
2
お手元のPC

33
1. Dev Test Lab [VSTSHOL] のブレードが表示されます。[+追加] をクリックします。
仮想マシン VM2 の作成 (2) お手元のPC
1

34
1. [ベースの選択] ブレードが表示されます。[Windows Server 2012 R2 Datacenter] をクリックします。
2. 仮想マシンの作成ブレードが表示されます。[仮想マシン名] には、[VM2] と入力します。
3. [ユーザー名] は、[azuredaisuki] と入力します。
5. [ディスクサイズ] は、[HDD] をクリックします。
6. [仮想マシンサイズ] をクリックします。
仮想マシン VM2 の作成 (3) お手元のPC
1
2
4
3
5
6
1 つのサブスクリプショ
ンを複数人で共有してい
る場合は、[VM2-1],
[VM2-2] のように入力し
てください。

35
1. [D1_V2 Standard] をクリックします。
2. [選択] をクリックします。
3. [仮想マシンサイズ] に [Standard_D1_V2] が選択されていることを確認します。
4. [作成] をクリックして、仮想マシンを作成します。
VSTS から仮想マシン VM2 作成 (4)
4
3
1
2
お手元のPC
4
仮想マシンのサイズ
が選択できない場合、
ディスクの種類を
SSDにして、
DS1_V2のサイズを
選択してください。

36
Dev Test Labs に作成した仮想マシンに RDP 接続して、成果物がインストールされていることを確認します。
2. [VM2] と入力します。自動的にフィルターがかかります。
3. 仮想マシン [VM2] をクリックします。
1
3
2
お手元のPC

37
1. 作成した仮想マシン[VM2] のブレードが表示されます。[接続] をクリックします。
2. [VM2.rdp のダウンロード終了しました。] メッセージが画面下部に表示されます。[開く] をクリックします。
1
2
お手元のPC

38
1. リモートデスクトップ接続の画面が表示されます。[接続] をクリックします。
2. [ユーザー名] は [azuredaisuki] と入力します。
3. [パスワード] は、[Passw0rd!] と入力します。
1
2
3
4
RDP: VM2

39
リモートデスクトップ接続の画面が表示されます。
1. [このコンピュータへの接続について今後確認しない] にチェックをいれます。
2. [はい] をクリックします。
1
2
RDP: VM2

40
仮想マシン [VM2] にリモートデスクトップ接続している画面が表示されます。
仮想マシン VM2 の作成 (9) RDP: VM2

41
1. 仮想マシン [VM2] で [PowerShell] アイコンをクリックします。
2. [Enable-PSRemoting] コマンドを実行します。選択肢は２回とも [A] で回答します。
1
2
2
2
RDP: VM2

42
Powershell のリモート実行をするためにファイアウォールの設定をします。今回はファイアウォールの設定をOff にします。
1. 画面左下のウインドウアイコンを右クリックし、[Control Panel] をクリックします。
2. [firewall] と入力し、フィルターをかけます。
3. [Windows Firewall] をクリックします。
1
2
3
RDP: VM2

43
1. [Turn Windows Firewall on or off] をクリックします。
1
RDP: VM2

44
1. [Private network settings] の [Turn off Windows Firewall] をクリックします。
2. [Public network settings] の [Turn off Windows Firewall] をクリックします。
1
RDP: VM2
2
3

準備編
- Visual Studio Team Services のアカウント作成
Team Foundation Server の場合は、
下記手順書に従い、インストール～チームプロジェクトの作成を
実施してください。
https://doc.co/PEHBGK

46
1. ブラウザーで https://www.visualstudio.com/ja-jp にアクセスし、[Sign in] をクリックします。
2. Microsoft アカウントを入力します。
3. [続行] をクリックします。
VSTS のアカウント作成 (1)
1
2
3
お手元のPC

47
Visual Studio Team Services のサインイン画面が表示されます。
1. Microsoftアカウントのパスワードを入力します。
2. [サインイン]をクリックします。
1
2
お手元のPC

48
1. 詳細情報に関する画面が表示されます。[発信元] に [Japan] を選択します。
2. [続行]をクリックします。
1
2
お手元のPC

49
1. [新しいアカウントの作成] をクリックします。
1
お手元のPC

50
Visual Studio Team Services のアカウント作成画面が表示されます。
1. 任意のURLを入力します。
2. [Team Foundation Version Control] を選択します。設定忘れやすいので注意！
3. [詳細の変更]をクリックします。
2
3
1
お手元のPC

51
Visual Studio Team Services のアカウントを作成します。
1. プロジェクト名が [MyFirstProject] 、プロセステンプレート [Agile] となっている事を確認します。
2. [続行]をクリックします。
2
1
プロジェクト名は変更可能ですが、
本手順書では、デフォルトのままにします。
お手元のPC

52
Visual Studio Team Services のアカウント作成が完了すると下記画面が表示されます。
今回は、MyFirstProject というチームプロジェクトをそのまま使用します。
VSTS のアカウント作成 (7) お手元のPC

テスト作成編
- Visual Studio と Visual Studio Team Services との接続
- ワークスペースにプロジェクトを追加
- 単体テストの自動生成
- 単体テストの実行
- Visual Studio Team Services へのチェックイン

54
Visual Studio と Visual Studio Team Services と接続します。
1. Visual Studio を起動し、メニュー [View] – [Team Explorer] の順にクリックします。
2. [接続の管理] アイコンをクリックします。
3. Visual Studio Team Services の [Connect...] をクリックします。
Visual Studio との接続 (1)
3
1
2
RDP: VM1

55
1. 先ほど作成した Visual Studio Team Services に接続します。[サーバー] をクリックします。
2. 接続するサーバーの管理画面が表示されます。[追加] をクリックします。
1 2
RDP: VM1

56
1. [先ほど作成した Visual Studio Team Services のURL（xxxx.visualstudio.com）] と入力します。
3. 先ほど作成した Visual Studio Team Services にログイン可能なマイクロソフトアカウント情報を入力します。
4. [サインイン] をクリックします。
1
2
3
4
RDP: VM1

57
1. 追加された Visual Studio Team Services をクリックして、選択します。
2. [閉じる] をクリックします。
3. チームプロジェクト[MyFirstProject] にチェックをいれます。
4. [接続] をクリックします。
2
3
1
4
RDP: VM1

58
1. Visual Studioのチームエクスプローラーで [次のワークスペースのマッピングを構成] をクリックします。
2. ローカルワークスペースが、 [C:Users<User名>SourceWorkspacesMyFirstProject] である事を確認します。
3. [マップと取得] をクリックします。
1
2
3
RDP: VM1

59
1. [ワークスペースが正常にマップされました。] と表示されていることを確認します。
1
RDP: VM1

60
今回は、Windows Form で作成した計算機アプリケーションのサンプルプロジェクトをダウンロードして使用します。
1.http://aka.ms/vsts-holから [SampleWinForm.zip] をクリックして、ダウンロードします。
2. ZIP ファイルを展開して、作成された [SampleWinForm] フォルダーを
[C:Users<User名>SourceWorkspacesMyFirstProject] にコピーします。
3. [C:Users<User名>SourceWorkspacesMyFirstProjectSampleWinForm] フォルダーの中に、
[SampleWinForm] フォルダーと [SampleWinForm.sln] があることを確認します。
ワークスペースにプロジェクトを追加 (1)
2
3
RDP: VM1

61
1. Visual Studio のチームエクスプローラーの [最新の情報に更新] ボタンをクリックします。
2. 先ほどコピーした [SampleWinForm.sln] をダブルクリックします。
3. セキュリティ警告が表示されますが、[OK]をクリックします。
1
2
3
RDP: VM1

62
1. 開始をクリックして、デバッグ実行をします。
2. Windows Form 作成の計算機アプリケーションが起動します。[1] [+] [1] [=] [2] と表示されることを確認します。
3. [X] をクリックしてデバッグ実行を終了します。
1
2
3
RDP: VM1

63
タスク [3-単体テストの追加] に取り掛かりますが、今回はVisual Studio の単体テスト自動生成機能 [IntelliTest] を使用
して単体テストを自動生成します。
1. [ソリューションエクスプローラー] をクリックします。
2. [Calculator.cs] をダブルクリックして、ファイルを開きます。
単体テストの自動生成 (1)
1
2
RDP: VM1

64
1. クラス [Calculator] を右クリックします。
2. [IntelliTest の作成] をクリックします。
2
1
RDP: VM1

65
1. [IntelliTest の作成] 画面が表示されます。 [OK]をクリックします。
2. ソリューションエクスプローラーで、単体テストプロジェクト [SampleWinForm.Tests] が自動生成されていること
を確認します。
2
1
RDP: VM1

66
この時点では、まだテストプロジェクトが作成されただけで、単体テストそのものは生成されていません。
IntelliTest を実行して、単体テストを自動生成します。
2. [IntelliTest の実行] をクリックします。
2
1
RDP: VM1

67
1. ソリューションエクスプローラーのクラス [Calculator.Test.cs] 内に四則演算のメソッドごとに単体テストが生成さ
れていることを確認します。
1
RDP: VM1

68
IntelliTest を実行して自動生成された単体テストを実行します。
1. Visual Studio のメニュー [テスト] – [実行] - [すべてのテスト] の順にクリックします。
単体テストの実行 (1)
1
RDP: VM1

69
単体テストの実行が終了すると、テストエクスプローラーに結果が表示されます。
1. 失敗のテストが2件あることを確認します。
1
RDP: VM1

70
1件目の失敗テストの内容を確認します。
1. テストエクスプローラーの [DivideTestThrowsDivideByZeroExpection…] をダブルクリックします。
2. テストエクスプローラーの下側にエラーメッセージが表示されます。
単体テストの失敗原因が 0 で除算していることを確認します。
1
2
RDP: VM1

71
続いて、2件目の失敗テストの内容を確認します。
1. テストエクスプローラーの [DivideTestThrowsOverflowExpection…] をダブルクリックします。
2. テストエクスプローラーの下側にエラーメッセージが表示されます。単体テストの失敗原因が int 最小値
(-2,147,483,648) を -1 で除算した結果 int の最大値 (2,147, 483,647) を超えてしまっていることを確認します。
1
2
RDP: VM1

72
テストが成功するように、Calculator.cs を修正します。
1. [Calculator.cs] をクリックして、ソースコードを表示します。
2. [Divide] メソッドに赤枠の内容を追加します。テスト失敗ケースの値の場合は意図的に0 をかえすようにしています。
3. [保存] アイコンをクリックして、ファイルを保存します。
1
2
3
RDP: VM1

73
ソースコードを修正したので、再度単体テストを実行します。
1. テストエクスプローラーの [すべて実行] をクリックします。
2. 6 件のテストが成功していることを確認します。
2
1
RDP: VM1

74
条件文を追加した際に、それを網羅するように単体テストが追加されることも確認します。
1. [Calculator.cs] をクリックして、ソースコードを表示します。
2. [Subtract] メソッドに赤枠の内容を追加します。
3. [保存] アイコンをクリックして、ファイルを保存します。
1
2
3
RDP: VM1

75
IntelliTest を実行して、再度単体テストを自動生成します。
2. [IntelliTest の実行] をクリックします。
2
1
RDP: VM1

76
1. IntelliTest の実行が終了すると、[IntelliTest の探索の結果] ウインドウが表示されます。
Subtract メソッドに単体テストが 2件存在している事を確認します。
2. テストエクスプローラーの [すべて実行] をクリックします。
3. 8 件のテストが成功していることを確認します。
3
2
1
RDP: VM1

77
Calculator.cs に対するカバレッジ 100%の単体テストが完成しました。
Visual Studio Team Services にチェックインしましょう。
1. ソリューションエクスプローラーの [ソリューション “SampleWinForm”] を右クリックします。
2. [ソリューションをソース管理に追加] をクリックします。
Visual Studio Team Services(VSTS)へのチェックイン (1)
1
2
RDP: VM1

78
VSTS へのチェックイン (2)
1. [チームエクスプローラー] をクリックします。
2. [ホームアイコン] をクリックします。
3. [保留中の変更] をクリックします。
1
3
2
RDP: VM1

79
1. [コメント] 欄に [Calculator クラスの単体テスト作成] と入力します。
2. [含まれる変更] 欄には [SampleWinForm] プロジェクトと [SampleWinForm.Tests]プロジェクトが含まれているこ
とを確認します([含まれる変更(20)] になっています)。
3. [チェックイン] をクリックします。
4. [チェックインの確認] ウインドウが表示されるので、[はい] をクリックしてチェックインを行います。
3
1
2
4
チェックイン時の項目数は 20 以外になることがあります。
RDP: VM1

80
VSTS へのチェックイン (4) RDP: VM1
チェックインの完了を確認します。
1. Visual Studio Team Services が開いているブラウザに移動して、[CODE] をクリックします。
2. [SampleWinForm] をクリックして、[SampleWinForm] プロジェクトと [SampleWinForm.Tests]プロジェクトが含
まれていることを確認します。
なお、[History] をクリックすると、変更履歴やソースの修正内容が確認できます。
1
2

81
IntelliTest で生成した単体テストをビルドするには、一か所変更する必要があります。
Visual Studio Team Services では、Web 上でソースコード変更ができますので、その機能を使用して変更します。
1. [SampleWinForm.Tests] – [SampleWinForm.Tests.csproj] の順にクリックします。
2. [Contents] をクリックします。
3. [Edit] をクリックします。
1
2
3
[Edit] アイコンが表示されない場合は、
ブラウザの再読み込みを実施してください。
RDP: VM1

82
1. 48 行目の下記の箇所を変更します。
（修正前）<HintPath>..............Program Files (x86)…
（修正後）<HintPath>c:Program Files (x86)…
2. [保存] アイコンをクリックします。
3. [Check in] をクリックして、変更を保存します。
1
2
* 行数は異なる場合があります。
* 該当する HintPath がない場合、
先に進んでください。
3
RDP: VM1

ビルド編
- ビルド定義の作成
- ビルドの実行
- ゲートチェックインの有効化

84
ビルド定義を作成します。
1. [MyFirstProject] をクリックします。
2. [Build & Release] をクリックします。
3. [Builds] をクリックします。
4. [+ New] をクリックします。
ビルド定義の作成 (1)
4
2
3
1
RDP: VM1

85
1. ビルド定義画面が表示されます。[.NET Desktop] をクリックして選択します。
2. [Apply] をクリックします。
3. 続いて、ビルド定義の設定画面が表示されます。[Solution] の […] をクリックします。
1
3
2
RDP: VM1

86
1. [SampleWinForrm] フォルダーにある [SampleWinForm.sln] をクリックします。
1
2
RDP: VM1

87
1. [Visual Studio Build] をクリックします。
2. [Visual Studio Version] が [Visual Studio 2015] に変更します。
1
2
RDP: VM1

88
1. [Visual Studio Test] をクリックします。
2. [Version] が [1.*] であることを確認します。Version 1.* でないと Visual Studio 2015 でのテストが動きません
1
2
RDP: VM1

89
1. [Copy Files] をクリックします。
2. [Remove] をクリックして、削除します。
1
2
RDP: VM1

90
1. [Publish Build Artifacts] をクリックします。
1
2
RDP: VM1

91
1. [+ Add Task] をクリックします。
2. [Utility] をクリックします。
3. [Copy and Publish Build Artifacts] をクリックします。
4. [Add] をクリックして、ビルドタスクを追加します。
1
4
2
3
RDP: VM1

92
2. [Copy Root] 欄の [...]ボタンをクリックします。
1
2
RDP: VM1

93
1. [SampleWinForrm] フォルダーをクリックします。
1
2
RDP: VM1

94
1. [Copy Root] 欄に[$/MyFirstProject/SampleWinForm] と入力されていることを確認します。
2. [Contents] には、[**bin] と入力します。
3. [Artifact Name] には、[drop] と入力します。
4. [Artifact Type] には、[Server] を選択します。
1
3
4
2
RDP: VM1

95
1. [Variables] をクリックします。
2. [BuildConfigration] に[debug]、[BuildPlatform] に[any cpu] に変更します。
1
2
RDP: VM1

96
1. [Options] をクリックします。
2. [Default agent queue] は、[Hosted] を選択します。
3. [V] をクリックします。
4. [Save] をクリックします。
1
2
4
3
RDP: VM1

97
1
RDP: VM1

98
1. Visual Studio Team Services 上でビルド実行します。[Queue] をクリックします。
ビルドの実行 (1)
1
1
RDP: VM1

99
1. ビルド設定画面が表示されます。[Queue] をクリックします。
1
RDP: VM1

100
1. ビルドが成功すると、[Build Succeeded] と表示されます。[Build …] をクリックします。
1
RDP: VM1

101
ビルド結果のSummary が表示されます。ビルドに関する様々な項目が追跡可能です。
1. ビルドに関連したチェックイン履歴が確認できます。
2. テスト結果、コードカバレッジの結果が確認できます。
1
2
RDP: VM1

ビルドサーバー構築編
- ビルドエージェントのダウンロード
- ビルドエージェントの有効化

103
お手元の PC をビルドサーバーとして利用できるように設定します。
1. Visual Studio Team Services にアクセスします。[設定アイコン] をクリックします。
2. [Agent queues] をクリックします。
3. [Download agent] をクリックします。
ビルドエージェントのダウンロード (1)
1
2
3
RDP: VM1

104
1. [Windows] タブの[Download] をクリックして、zip ファイルをダウンロードします。
2. ZIP ファイルを展開して、作成されたフォルダーを [agent] にリネームして [デスクトップ] にコピーします。
3. [agent] フォルダーの中に、[config.cmd] があることを確認します。
ビルドエージェントのダウンロード (2)
2
3
1
RDP: VM1

105
ビルドエージェントの有効化に必要なアクセストークンを発行します。
1. 別ウインドウで Visual Studio Team Services にアクセスし、[ログインアカウントのアイコン] をクリックします。
2. [Security] をクリックします。
3. [Personal access tokens] 画面が表示されます。 [Add] をクリックします。
ビルドエージェントの有効化 (1)
1
2
3
RDP: VM1

106
1. [Description] には、[ビルドエージェント] と入力します。
2. [Create Token] をクリックします。
1
2
RDP: VM1

107
1. アクセストークンが発行されましたので、発行されたアクセストークンをメモ帳にコピーします。
1
RDP: VM1

108
1. ビルドエージェントの有効化を行います。フォルダの[c:agent]の [configure.cmd] を右クリックします。
2. [Run as administrator] をクリックします。コマンドプロンプトが起動します。
3. [Enter Server URL] は[https://(作成したアカウント).visualstuio.com] と入力します。
4. [Enter authentication type] は、[Enterキー]をおします。
5. [Enter personal access token] は、先ほど発行したアクセストークンを入力します。
5
1
2
RDP: VM1
4
3

109
Visual Studio Team Services への接続が完了すると、ビルドエージェントの登録設定を行います。
1. [Enter agent pool] は、[default] を使用するため、[Enterキー]をおします。
2. [Enter agent name] は、[Enterキー]をおします。
3. [Enter work folder] は、[Enterキー]をおします。
4. [Enter run agent as a service?] は、今回は対話型のビルドエージェントのため、[N] と入力します。
5. [Listening for Jobs] が表示されると、対話型のビルドエージェントの展開は完了です。* ウインドウは閉じないこと
ビルドエージェントの有効化 (5) RDP: VM1
5
4
3
1
2

110
1. [X] をクリックして、Get Agent ウインドウを閉じます。
2. Visual Studio Team Services 上でもビルドエージェントが有効化されていることを確認します。
1
2
RDP: VM1

リリース管理編
- 承認フローの作成

112
承認ワークフローの作成 (1)
リリース管理機能を利用して、承認を伴う Microsoft Azure への成果物デプロイを実行します。
1. お手元のPCのブラウザーでVisual Studio Team Services にアクセスし、 [Build &Release] をクリックします。
2. [Releases] をクリックします。
3. [+] - [Create new release definition] の順にクリックします。
4. [Empty] を選択します。
5. [Next] をクリックします。
1
3
4
5
2
お手元のPC

113
リリース管理に使用するビルド成果物などの設定画面が表示されます。
1. [Create] をクリックします。
1
お手元のPC

114
1. リリース管理の名前を入力します。[Edit] アイコンをクリックします。
2. [Definition] 欄に [リリース管理] と入力します。
3. [Run on agent] をクリックします。
4. [Default] を選択します。
2 1
3
4
お手元のPC

115
1. 環境に承認者を割り当てます。[Environment1]の[…]をクリックして、さらに [Assign approvers] をクリックします。
2. [General] をクリックし、[Environment Owner] 名を確認します。
3. [Approvals] をクリックします。
4. 今回は前承認のワークフローとします。 [Pre-deployment approver] の [Specific Users] をクリックします。
5. 承認者の名前を入力します。[Step 2] で確認した名前を入力すると、候補が表示されますので選択します。
1
2
3
4
5
お手元のPC

116
1. [Deployment conditions] をクリックします。
2. [After release creation] をクリックして、自動でリリース管理が始まるようにします。
3. [OK] をクリックして、設定ウインドウを閉じます。
お手元のPC
1
2
3

117
1. [Artifacts] をクリックします。
2. [MyFirstProject-.NET Desktop-CI] のビルド成果物が関連付けされています。 […] をクリックします。
1
2
3
お手元のPC

118
1. ビルド成果物が関連付けされることを確認して、[Cancel] をクリックします。
2
お手元のPC

119
1. リリース環境の設定を行います。[Triggers] をクリックします。
2. [Continuous Deployment] をクリックします。
3. [Set trigger on artifact source] は、 [MyFirstProject-.NET Desktop-CI] を選択します。
1
2
3
お手元のPC

120
2. [OK] をクリックして、保存します。
1
2
お手元のPC

121
リリース管理の設定が完了したので、ビルドとリリース管理が一連の処理として実行されることを確認します。
2. [MyFirstProject-.NET Desktop-CI] の列の空白部分をクリックします。
3. […] をクリックします。
4. [Queue new build] をクリックします。
2 3
4
1
お手元のPC

122
1. [OK] をクリックして、ビルドを開始します。
1
お手元のPC

123
1. ビルドが成功することを確認したら、[Releases] をクリックします。
1
お手元のPC

124
リリース管理画面で、1件承認待ちとなっています。
1. [承認者] アイコンをクリックします。
2. 承認を求められています。[Approve] をクリックします。
1
2
お手元のPC

125
実行状況を確認します。
1. [Release-xx] をダブルクリックします。
2. [Deployment Status] が [INPROGRESS] から [SUCCEEDED] となります。
1
2
お手元のPC

126
リモートデスクトップ接続している仮想マシン VM1 にアクセスします。
デスクトップにある [agent] フォルダーをクリックし、[_workxxxxxxxxxaMyFirstProject-.NET Desktop-
CIdropSampleWinFormbinDebug] にビルド成果物 [SampleWinForm.exe] があることを確認します。
RDP: VM1

UI テスト作成編
- UI テスト用のリポジトリを作成
- UI テストの作成
- 単体テストにアサーションを追加
- 単体テストのコミット

128
Visual Studio で UI テストを作成します。まずは、この単体テスト用にリポジトリを生成します。
1. Visual Studio Team Services に戻り、[CODE] をクリックします。
2. [$/MyFirstProject] - [New repository...] の順にクリックします。
3. [Repository name] に [UITest] と入力します。
UI テスト用のリポジトリを作成 (1)
2
1
4
3
RDP: VM1

129
1. Git リポジトリが作成されます。 [コピー] アイコンをクリックして、 Git の URL をコピーします。
2. Visual Studio を起動し、メニュー [表示] – [チームエクスプローラー] の順にクリックします。
3. [チームエクスプローラー] の [接続] アイコンをクリックします。
4. [ローカル Git リポジトリ] の [複製] をクリックします。
1
4
2
3
RDP: VM1

130
Visual Studio 上に作成した Git リポジトリを複製します。
1. 先ほどコピーした URL を貼り付けします。
2. [複製] をクリックします。
3. [マイクロソフトアカウント] を入力します。
4. 続いて、[次へ] をクリックします。
2
1
4
3
RDP: VM1

131
1. [マイクロソフトアカウントのパスワード] を入力します。
2. 続いて、[サインイン] をクリックします。
3. Visual Studio のチームエクスプローラーの [新しいプロジェクトまたはソリューションを作成] をクリックします。
3
2
1
RDP: VM1

132
1. 新しいプロジェクトの作成画面が開きます。[Visual C#] の [Test] を選択します。
2. [Coded UI Test Project]を選択します。
3. [Create directory for solution]と[Create new Git repository] にチェックがはいっていることを確認します。
UI テストの作成 (1)
3
2
1
4
RDP: VM1

133
1. [Record actions, edit UI map or add assertions] を選択します。
3. 画面右下の [コード化されたUI テストビルダー] の [記録の開始] ボタンをクリックして、操作記録を開始します。
1
2
3
上記エラーが表示された場合は、お手数で
すがマシンの再起動をお願いします。
RDP: VM1

134
ここでは、マウスの操作をしないでください！！(確実な記録を行うため)
間違えた場合は、[x] をクリックして閉じてもう一度実行して下さい。
1. [Windowsキー] + [R] をクリックします。
2. [ファイル名を指定して実行] ウインドウが表示されますので、[C:dropSampleWinForm.exe] と入力してから、
[Enter]キーをおします。
3. 最初の入力欄にカーソルがあるので、[1] と入力します。
4. [tab]キーを押して、2番目の入力欄に[1]と入力します。
5. [tab]キーを2回押し、下キーを押して、[-] を選択します。
6. [tab]キーを押して、[=] で[Enter]キーを押します。
7. [tab]キーを3回押して、答えの欄が [-1] になっていることを確認します。
8. 画面右下の [コード化されたUI テストビルダー] の [記録の一時停止] ボタンをクリックして、操作記録を停止します。
3
2
45 6 7
8
RDP: VM1

135
1. 画面右下の [コード化されたUI テストビルダー] の [記録されたステップの表示] ボタンをクリックします。
2. 記録された操作がステップごとに表示されていることを確認します。
3. 画面右下の [コード化されたUI テストビルダー] の [コードの生成] ボタンをクリックします。
4. [追加と生成] ボタンをクリックして、コードを生成します。
2
1
4
3
RDP: VM1

136
2. 記録された操作が実行されます。テストエクスプローラーで [CodedUITestMethod1] が成功していることを確認します。
計算機アプリケーションは閉じないでください。
2
1
RDP: VM1

137
記録した操作が単体テストとして登録はされましたが、このままでは単体テストは通過してしまいます。
計算機アプリケーションの引き算1-1の答えが [0] が得られるようなテストを追加します。
1. [ソリューションエクスプローラー]をクリックします。
2. [UIMap.uitest] を右クリックし、[コード化された UIテストビルダーで編集] をクリックします。
単体テストにアサーションを追加 (1)
2
1
RDP: VM1

138
コード化された UIテストビルダーが画面右下に起動します。
1. [◎] をクリックします。
2. [<<] をクリックします。
3. 記録された操作で取得したコントロールの一覧が表示されます。 [UICalculatorWindow] をダブルクリックします。
4. [UITxtAnswerWindows] をダブルクリック、続いて [UITextAnswerEdit] をクリックします。
5. [すべてのプロパティの表示] をクリックします。
1
3
4
2
5
RDP: VM1

139
[UITextAnswerEdit] のプロパティが表示されます。
1. [Text] を選択します。
2. [アサーションの追加] をクリックします。
3. [比較対象値] を [0] に変更します。
5. [X] をクリックして計算機アプリケーションを終了します。
3
1
4
2
5
RDP: VM1

140
1. コード化された UIテストビルダーの [赤枠] をクリックします。
2. [追加と生成] をクリックします。
3. [X] をクリックしてコード化された UIテストビルダーを終了します。
3
1
2
RDP: VM1

141
1. Visual Studio に戻り、ソリューションエクスプローラーの [CodeedUITest1.cs] をクリックします。
2. [CodedUITestMethod1] に、[this.UIMap.AssertMethod1();] が追加されていることを確認します。
2
1
RDP: VM1

142
2. テスト実行の結果、[CodedUITestMethod1] が失敗していることを確認します。
2
1
RDP: VM1

143
失敗テストの内容を確認します。
1. テストエクスプローラーの [CodedUITestMethod1] をクリックします。
2. テストエクスプローラーの下側にエラーメッセージが表示されます。
先ほど追加したアサーションメソッドにより単体テストの失敗していることを確認します。
1
2
RDP: VM1

144
単体テストのコミット (1)
1. メニュー [表示] – [チームエクスプローラー] の順にクリックします。
2. [チームエクスプローラー] の [設定] をクリックします。
1
2
RDP: VM1

145
1. [グローバル設定] をクリックします。
2. [ユーザー名] を入力します。
3. [電子メールアドレス] には、今回使用しているMSアカウントを入力します。
4. [更新] をクリックします。
1
4
2
3
既に入力されている場合は、
次に進んでください。
RDP: VM1

146
1. [ホームアイコン] をクリックします。
2. [変更] をクリックします。
3. [コメント] には、[UITest] と入力します。
4. [▼] をクリックして、[すべてをコミットしてプッシュ] を選択すると、コミット＆プッシュが完了します。
1
4
2
3
RDP: VM1

UI テスト実行編
- UI テストのビルド
- UI テストの実行

148
UIテストのビルド (1)
UIテストのビルド定義を作成します。
1. [MyFirstProject] をクリックします。
2. [Build & Release] をクリックします。
4. [+ New] をクリックします。
4
2
3
1
RDP: VM1

149
1. ビルド定義画面が表示されます。[.NET Desktop] をクリックして選択します。
2. [Apply] をクリックします。
3. リポジトリの設定します。[Get sources] をクリックします。
4. [Repository] を [UITest] に変更します。
1
4
2
3
RDP: VM1

150
1. ビルド定義の名前などを変更します。[Process] をクリックします。
2. [Name] を [UIテスト] に変更します。
3. [Solution] の […] をクリックします。
1
3
2
RDP: VM1

151
1. [CodedUITestProject1] フォルダーにある [CodedUITestProject1.sln] をクリックします。
1
2
RDP: VM1

152
1. [Visual Studio Build] をクリックします。
2. [Visual Studio Version] が [Visual Studio 2015] に変更します。
1
2
RDP: VM1

153
1. [Copy Files] をクリックします。
1
2
RDP: VM1

154
1. [Publish Build Artifacts] をクリックします。
1
2
RDP: VM1

155
1. [+ Add Task] をクリックします。
2. [Utility] をクリックします。
4. [Add] をクリックして、ビルドタスクを追加します。
1
4
2
3
RDP: VM1

156
2. [Copy Root] 欄の [...]ボタンをクリックします。
1
2
RDP: VM1

157
1. [CodedUITestProject1] フォルダーをクリックします。
1
2
RDP: VM1

158
1. [Copy Root] 欄に [CodedUITestProject1] と入力されていることを確認します。
2. [Contents] には、[**bin] と入力します。
3. [Artifact Name] には、[drop] と入力します。
4. [Artifact Type] には、[Server] を選択します。
1
3
4
2
RDP: VM1

159
1. [Visual Studio Test] をクリックします。
1
2
RDP: VM1

160
1. [Variables] をクリックします。
2. [BuildConfigration] に[debug]、[BuildPlatform] に[any cpu] に変更します。
1
2
RDP: VM1

161
1. [Options] をクリックします。
2. [Default agent queue] は、[Hosted] を選択します。
3. [V] をクリックします。
1
2
4
3
RDP: VM1

162
1
RDP: VM1

163
1. Visual Studio Team Services 上でビルド実行します。[Queue] をクリックします。
1
RDP: VM1

164
1. ビルド設定画面が表示されます。[Queue] をクリックします。
1
RDP: VM1

165
1. ビルドが成功すると、[Build Succeeded] と表示されることを確認します。
1
RDP: VM1

166
UI テストの実行 (1)
リリース管理機能を利用して、UI テストを実行します。
2. [リリース管理] をクリックします。
1
2
3
RDP: VM1

167
1. [Artifacts] をクリックします。
2. [Link an artifact source] をクリックします。
2
1
RDP: VM1

168
1. UIテストのビルド成果物が関連付けします。[Source] は、[UIテスト] に変更します。
2. [Link] をクリックします。
2
1
RDP: VM1

169
1. [Environment] をクリックします。
2. [Add tasks] をクリックします。
2
1
RDP: VM1

170
1. スクロールして、[Windows Machine File Copy] の [Add] を 2回クリックします。
1
RDP: VM1

171
1. [Test] をクリックします。
2. スクロールして、[Visual Studio Test Agent Deployment] の [Add] をクリックします。
3. [Run Functional Tets] の [Add] をクリックします。
4. [Close] をクリックします。
1
4
2
3
RDP: VM1

172
1. 最初の [Windows Machine File Copy] タスクの [Source] 欄の [...]ボタンをクリックします。
1
RDP: VM1

173
1. [MyFirstProject-.NET Desktop-CI (Build)]–[drop]–[SampleWinForm]-[bin]-[Debug]-[SampleWinForm.exe] の順
にクリックします。
1
2
RDP: VM1

174
1. [Machine] は、[10.0.0.5] と入力します。
2. [Admin login] は、[$(myadmin)] と入力します。
3. [Password] は、[$(mypassword)] と入力します。
4. [Destination Folder] は、[c:drop] と入力します。
1
2
3
4
RDP: VM1

175
1. 2 番目の [Windows Machine File Copy] タスクをクリックします。
2. [Source] 欄の [...]ボタンをクリックします。
2
1
RDP: VM1

176
1. [UIテスト (Build)]–[test]-[bin]-[Debug]-[CodedUITestProject1.dll] の順にクリックします。
1
2
RDP: VM1

177
1. [Machine] は、[10.0.0.5] と入力します。
2. [Admin login] は、[$(myadmin)] と入力します。
3. [Password] は、[$(mypassword)] と入力します。
4. [Destination Folder] は、[c:test] と入力します。
1
2
3
4
RDP: VM1

178
1. [Visual Studio Test Agent Deployment] タスクをクリックします。
2. [Machines] は、[10.0.0.5] と入力します。
3. [Admin login] は、[$(myadmin)]、[Password] は、[$(mypassword)] と入力します。
4. [Protocol] は、[HTTP] を選択します。
5. [Username] は、[$(myadmin)]、[Password] は、[$(mypassword)] と入力します。
6. [Run UI Test] に、チェックを入れます。
2
3
4
1
5
6
RDP: VM1

179
1. [Run Functional Test] タスクをクリックします。
2. [Machines] は、[10.0.0.5] と入力します。
3. [Test Drop Location] は、[c:test] と入力します。
2
3
1
RDP: VM1

180
1. リリース環境変数の設定を行います。[Variables] をクリックします。
2. [Name] には、[myadmin], [Value] には、仮想マシンのユーザーID [azuredaisuki] と入力します。
3. [+Variable] をクリックし、変数を追加します。
4. [Name] には、[mypassword], [Value] には、仮想マシンのパスワード[Passw0rd!!!!] と入力します
5. [鍵アイコン] をクリックしてパスワードを隠します。
2
3
4 5
1
RDP: VM1

181
2. [OK] をクリックして、保存します。
1
2
RDP: VM1

182
Azur への成果物デプロイを実行します。今回はリリース管理だけを実行します。
1. [Release]-[Create Release] をクリックします。
2. [Artifact]では最新のビルドの[MyFirstProject-.NETDesktop-CI]と[UIテスト]を選択します。
3
1
2
4
RDP: VM1

Visual Studio とTeam Foundation Server /Visual Studio Team Services で実現するビルド・テスト・デプロイ自動化手順書

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (11)

Similar to Visual Studio とTeam Foundation Server /Visual Studio Team Services で実現するビルド・テスト・デプロイ自動化手順書

Similar to Visual Studio とTeam Foundation Server /Visual Studio Team Services で実現するビルド・テスト・デプロイ自動化手順書 (20)

More from Masaki Takeda

More from Masaki Takeda (7)