ASP.NET 5問題＃6の準備：Visual Studio Team Servicesによる継続的な展開-完全ガイド

Connect 2015カンファレンスからの素晴らしい発表に続き、新しいテクノロジーとサービスを使用してアプリケーションの継続的な開発とテストを整理するためのシナリオを引き続きご紹介します。

最近、 Visual Studio Team Services （以前のVisual Studio Online）を使用して継続的な開発とテストプロセスを実装することについて話しました 。 この記事では、Visual Studio Team ServicesのGitリポジトリに基づいてスクラムに基づいて開発プロセスを編成し、Visual Studioとの統合を使用してテストとコード開発の継続的なプロセスを提供する方法について詳しく説明します（Continuous Integration＆Testing）。


この記事では、DevOpsのフルサイクルを構築する次のステップを見ていきます。カスタムビルドテンプレートの新しい機能をVisual Studio Team Servicesに公開する継続的な展開を提供します。 ASP.NET 5に基づいたプロジェクトを使用し、このようなプロジェクトがコード編集からAzureクラウドでの自動アセンブリおよびデプロイまでの完全なサイクルを提供する方法を確認します（どこでも可能です）。

アドバイス！ すべて自分で試すことも、GitHub https://github.com/vyunev/VsoCdDemoからソースコードをダウンロードすることもできます 。

プリセット

Visual Studio Team Servicesアカウントが既に作成されていることを前提としています。 そうでない場合は、 オンライン登録ガイドを参照してください 。

まず、新しいコレクターコンポーネントのダウンロードページからWindowsエージェントをインストールします。これにより、Windows、Azure、その他のVisual Studioプロジェクト、およびJavaおよびAndroidプロジェクトを収集できます。 インストールするには、次のアドレスに移動する必要があります。

https：// {your_account} .visualstudio.com / _admin / _AgentPool

エージェントをローカルにダウンロードします。 インストール後（C：\ Agentフォルダーなど）、C：\ Agent \ ConfigureAgent.cmdを管理者として実行する必要があります。 他の手順と詳細はこちらをご覧ください 。

Visual Studio Team Servicesプロジェクトの作成

Visual Studio Team Servicesで、チームプロジェクト（私の場合はVsoCdDemo）を作成します（図1）。


図1 -Visual Studio Team Servicesでチームプロジェクトを作成する

Visual Studio 2015でVisual Studio Team Servicesを接続する

Visual Studio 2015の[チームエクスプローラー]パネルで、チームプロジェクトに接続します（図2）


図 2.-チームプロジェクトの選択

接続後、チームプロジェクトのまだ空のリポジトリを複製するように求められます（図3）。


図 3.-Visual Studio 2015のチームエクスプローラーパネル

Visual Studio 2015でプロジェクトを作成する

Visual Studio 2015では、ASP.NET 5 Webアプリケーションプロジェクトを作成します;作成するとき、「クラウド内のホスト」のチェックを外します（図4）


図 4.-Visual Studio 2015でASP.NET 5 Webアプリケーションプロジェクトを作成する

プロジェクトが作成され、バックグラウンドで、依存するアセンブリの回復プロセスが自動的に開始されます。 プロジェクトをローカルで実行して、ビルドが正常に機能していることを確認します。 最初のコミットを行い、コードをサーバーに送信できます。 これを行うには、ソリューションエクスプローラーパネルでソリューションを右クリックし、[コミット]を選択します。 コミットの説明を入力し（図5）、ドロップダウンメニューの[コミットしてプッシュ]アクションをクリックします。


図 5.-リポジトリへのコミットとプッシュ

プッシュアクションでコミットした後、[コード]タブに移動してVisual Studio Team Servicesリポジトリにコードを表示できます（図6）。


図 6.-Visual Studio Team Servicesのリポジトリコンテンツ

Azure（またはその他の場所）で継続的なビルドおよび発行プロセスをセットアップするときです。

ビルドプロセスのセットアップ

Visual Studio Team Servicesで、[ビルド]タブに移動し、[アクション]ボタン（緑色のプラス記号）をクリックします。 ウィンドウで、アセンブリ定義テンプレートとしてVisual Studioを選択します（図7）。


図 7.-アセンブリ定義テンプレート

次のウィンドウ（図8）で、正しいタイプのリポジトリーが選択されていることを確認し、リポジトリー自体を管理し、「管理」リンクをクリックして、Build Agentが正しく構成されていることを確認します。 重要！ 継続的な統合を有効にする必要性を指摘してください。各チェックインコードの後に​​、アセンブリと公開プロセスが開始されます。


図 8-アセンブリテンプレートの構成

その結果、プロジェクトに対して次のカスタマイズされたビルド順序が得られます（図9）。 次の手順が事前に定義されています。ソリューションをビルドするVisual Studioビルド、テストを実行するテストステップ、シンボルファイルを公開するステップ、およびアセンブリの結果を公開するステップ。


図 9.-アセンブリおよび公開プロセスの手順を処理する

あなたと私にとって、価値は最初のステップ-Visual Studio Buildにすぎません。残りの3つのステップを独自の方法で構成し、削除またはオフにできるようにします。

プロジェクトをアセンブルしてみましょう。このために、最初のステップを選択して、アセンブリパラメーターを入力します（図10）。

-アセンブリのソリューションとしてプロジェクトのファイルを選択します。

-追加のアセンブリ引数を指定します（プロジェクトの名前を考慮してください）：

/ t：ビルド、FileSystemPublish / p：PublishConfiguration = $（BuildConfiguration）/ p：PublishOutputPathNoTrailingSlash = $（Build.SourcesDirectory）\ AspNetCdDemo \ artifacts \ bin \ $（BuildConfiguration）\ Publish


図 10.-ビルドステップの設定

[保存]、[キュービルド]の順にクリックして、ビルドを開始します。 アセンブリーが実行されるコレクターのコマンドの実行のコンソールにアクセスできます。 残念ながら、決定を収集することはできず、次のエラーが表示されます（図11）。


図 11.-エラーのあるビルド結果

発生したエラーは、プロジェクトをビルドする前にDNX環境を構成する必要があることです。 これを行うには、アセンブリをさらに微調整する必要があります。

ASP.NET 5をビルドする

ASP.NET 5プロジェクトをビルドするには、まずDNX環境を構成し、必要なNugetパッケージのダウンロードなど、いくつかの他の手順を実行する必要があります。 この点で、プロジェクトの組み立てプロセスを微調整する必要があります。 これらの手順は、次のPowerShellスクリプトで説明できます（プロジェクトの名前に注意してください）。

# bootstrap DNVM into this session. &{$Branch='dev';iex ((new-object net.webclient).DownloadString('https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.ps1'))} # load up the global.json so we can find the DNX version $globalJson = Get-Content -Path $PSScriptRoot\global.json -Raw -ErrorAction Ignore | ConvertFrom-Json -ErrorAction Ignore if($globalJson) { $dnxVersion = $globalJson.sdk.version } else { Write-Warning "Unable to locate global.json to determine using 'latest'" $dnxVersion = "latest" } # install DNX & $env:USERPROFILE\.dnx\bin\dnvm install $dnxVersion -Persistent # run DNU restore on all project.json files & dnu restore $PSScriptRoot\src\AspNetCdDemo\project.json 2>1 

このスクリプトを使用するには、Visual Studio 2015のソリューションのSolution Itemsフォルダーに新しいPrebuild.ps1ファイルを追加し、スクリプトテキストをこのファイルにコピーする必要があります。

新しいVisual Studio Team Servicesビルドメカニズムの柔軟な機能のおかげで、必要なPowerShellスクリプトの呼び出しなど、コレクターの順序にさまざまな手順を追加できます。 アセンブリ定義に戻ります（図12）


図 12.-アセンブリ手順の説明の編集

そして、「ビルドステップの追加」ボタンで追加ウィンドウを呼び出して、コレクターの新しいステップを追加します。 リストを見て、Visual Studio Team Servicesでアセンブリを定義するための組み込み機能の数を確認してください（図13）。


図 13.-可能な組み立て手順のギャラリー

PowerShellステップを選択し、ビルドプロセスに追加します。 PowerShellのステップを上にドラッグして、最初に実行順序を設定します（図14）。 PowerShellステップの設定で、スクリプトへのパスを指定します。私の場合、これはAspNetCdDemo / Prebuild.ps1です。


図 14.-PowerShellビルドステップの編集

DNX自体を構成し、パッケージを復元するため、Visual Studioのビルド手順で[NuGetパッケージの復元]のチェックを外します。

アセンブリ定義を保存します。

Visual Studio 2015から、追加したPrebuild.ps1スクリプトをコミットし、リポジトリにプッシュして送信します。 数分が経過すると、手順のおかげで、DNXとすべての依存関係が自動的に展開され、NuGetパッケージがどのようにダウンロードおよびインストールされるかがわかります。

ただし、アセンブリは引き続き失敗します（図15）。


図 15.-ビルドに失敗しました

これは、インストールされたばかりでまだ使用できないGulpタスクがASP.NETアセンブリに含まれているためです。 アセンブリを再度実行するだけで、エラーが発生せずに高速になります！


図 16.-エラーなしでビルド

そこで、Visual Studio Team ServicesのASP.NET 5でプロジェクトの自動アセンブリを編成しました。 それでは、Azureでの継続的な発行を有効にしましょう。

Azure Webアプリへの継続的な発行

AzureでASP.NET5プロジェクトを発行するには、Azure Web Appサービスの空のインスタンスを作成する必要があります。 AzureCdDemoという名前を付けましたが 、別の名前を付ける必要があります。名前は一意でなければなりません。 新しいAzureポータルを使用して、Azure Web Appのインスタンスを作成します（図17）。


図 17.-新しいポータルでAzure Webアプリを作成します

AzureでASP.NET 5アプリケーションを継続的に公開するために、別のPowerShellスクリプトを作成します。

 param($websiteName, $packOutput) $website = Get-AzureWebsite -Name $websiteName # get the scm url to use with MSDeploy. By default this will be the second in the array $msdeployurl = $website.EnabledHostNames[1] $publishProperties = @{'WebPublishMethod'='MSDeploy'; 'MSDeployServiceUrl'=$msdeployurl; 'DeployIisAppPath'=$website.Name; 'Username'=$website.PublishingUsername; 'Password'=$website.PublishingPassword} $publishScript = "${env:ProgramFiles(x86)}\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\Publish\Scripts\default-publish.ps1" . $publishScript -publishProperties $publishProperties -packOutput $packOutput 

Visual Studio 2015で、新しいPublishAspNet5Website.ps1ファイルをプロジェクトのProject Itemsフォルダーに追加し、スクリプトの内容をそこにコピーします。

ビルドステップのリストで、別のステップ、今回はAzure PowerShellスクリプトを追加します。 このためにAzureサブスクリプション設定を構成し、[管理]リンクに従って、新しいサービスエンドポイントから新しいサービスを追加する必要があります（図18）。


図 18.-Azureサブスクリプションオプションの入力

上記のパラメーターを入力するには、サブスクリプションに関する情報が必要になります 。これは、 https://manage.windowsazure.com/publishsettings/indexからダウンロードしたファイルから取得できます 。

Azure PowerShellスクリプトのステップ設定に戻り、追加されたサブスクリプションを選択し、パラメーターを指定します（図19）。

-スクリプトへのパス：AspNetCdDemo / PublishAspNet5Website.ps1

-スクリプト引数（AzureのWebアプリの名前とプロジェクトの名前に注意してください）：

-websiteName AzureCdDemo -packOutput $（Build.SourcesDirectory）\ AspNetCdDemo \ artifacts \ bin \ $（BuildConfiguration）\ Publish


図 19.-Azure PowerShellのビルドステップを構成する

Visual Studio 2015から、新しいスクリプトをコミットしてプッシュします。

次のビルドプロセスが開始されます。今回は、Azure Webアプリでのプロジェクトの公開で終了します（図20）。


図 20.-アセンブリと公開が成功した

Azure Webアプリのアドレス（私の場合はhttp://azurecddemo.azurewebsites.net/ ）にアクセスすると、動作することを確認できます（図21）。


図 21.-Azureを使用したWebサイト

最終テスト

Visual Studio 2015に移動して、変更を加えます。 たとえば、ファイルViews / Shared / _Layout.cshtmlで、テキストとレイアウトを変更します。 このファイルをコミットしてリポジトリにプッシュします。 Visual Studio Team Servicesで自動ビルドおよび発行プロセスを追跡します。 サイトを更新し、変更が自動的に公開されるようにします（図22）。


図 22.-進行中のビルドおよび公開プロセスからの変更を含むAzureのWebサイト

おわりに

Visual Studio Team Servicesを使用して、ASP.NET 5ベースのWebアプリケーションの継続的なアセンブリと公開のプロセスの構成を徹底的に最初から調査しました。 継続的なビルドプロセス中に、Gitでコードを発行し、DNX環境を展開し、必要なアセンブリとnpmを読み込み、Gulpスクリプトを実行し、Azure Web Appでサイトを発行します。 そして、これはすべて自動です。

結論として、Visual Studio Team Servicesの新しいビルド機能を使用すると、事前に構成されたテンプレートを使用して、多数のサードパーティアプリケーション、サーバー、およびフレームワークに接続し、あらゆる複雑な構成のあらゆるタイプのプロジェクトを組み立てることができます。