Visual Studio Team ServicesでASP.NET Coreプロジェクトのビルドを設定する

# 概要
* Visual Studio Team Services（以下VSTS）を使用し、ASP.NET Coreプロジェクトをビルドする手順を紹介します。
* ASP.NET CoreプロジェクトはXamarin.Formsのテンプレートのオプションで追加できるASP.NET Core Web APIを使用します。

# 本題
## 準備
### Vidsual Studio2017でビルド対象プロジェクト作成
対象はなんでもいいのですが、ここでは

* 個人的に多少なじみがある
* 準備（再現）が簡単
* ソリューションに複数プロジェクトある状態にしたい

ということでXamarin.Formsのテンプレートのオプションで追加できるASP.NET Core Web APIを選択しています。

一応手順も載せます。面倒な方は僕が準備したソースコードを使っていただいても結構です。
[toshi0607/SampleAppWithBackend](https://github.com/toshi0607/SampleAppWithBackend)

1. Visual Studio2017を開きます。
2. ファイル > 新しいソリューションをクリックします。
3. Multiplatform > アプリ > Forms Appを選択し、「次へ」をクリックします。
 <img width="899" alt="スクリーンショット 2017-07-23 10.56.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/9335e887-14e4-233c-1843-ee2097284167.png">
4. App Nameを入力し、Mobile Backendにチェックを入れて「次へ」をクリックします。
<img width="897" alt="スクリーンショット 2017-07-21 22.29.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/96318681-a7f6-a7cb-63a1-7c313686f453.png">
5. プロジェクト名、場所を入力して「作成」をクリックします。
<img width="896" alt="スクリーンショット 2017-07-23 10.57.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/8f815bbf-7a6a-62a6-b667-12d1907a3acf.png">

プロジェクトは上記手順で作成された`SampleAppWithBackend.MobileAppService`を使用します。

### VSTSでソースコード管理ツールとの連携
今度はVSTS側の設定です。

ビルド対象のソースコードの管理ツール（今回はGithub）とVSTSを連携するための設定手順です。

1. VSTSのProject追加ページで「New Project」をクリックします。
<img width="1318" alt="スクリーンショット 2017-07-23 13.08.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/a527b49d-2e47-39a2-1d0c-aad0c333a410.png">

2. Project Nameを入力して「Create」をクリックします。便宜上「SampleAppWithBackend2」としていますが、紐付けるソースコードのプロジェクトととの一致は必須ではないです。
<img width="1318" alt="スクリーンショット 2017-07-23 13.08.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/9a97058e-e91b-6d59-814b-c61a90bf7570.png">

3. ソースコード管理を連携するため、or import a repositoryを開き、「import」をクリックします。ソースコードの管理方法に応じてよしなに…
<img width="1322" alt="スクリーンショット 2017-07-23 13.17.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/50eb4728-0f0f-7e6d-a051-da941a0dae41.png">

4. ソースコードをGihutbで管理している場合はClone URLを入力し、「Import」をクリックします。
<img width="1316" alt="スクリーンショット 2017-07-23 13.19.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/625d9ca3-69ee-d960-51b2-eb0f4749a817.png">

Clone URLはGithubで確認してください。
<img width="1161" alt="スクリーンショット 2017-07-23 13.19.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/210a778c-464e-0266-2e9b-c24534636a40.png">

ソースコード管理ツールとの連携は以上です。

### ビルドフローの定義
今度はビルドフローを定義します。VSTSのビルドテンプレートやビルドに必要なパーツ群を組み合わせます。

作業が完了すると、Githubからソースコードを取得し、ビルドできるようになります。

1. ビルド定義を設定したいプロジェクトを開き、「+ New Definition」をクリックします。
<img width="1316" alt="スクリーンショット 2017-07-23 13.26.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/e07fce4c-facb-dde6-c8dd-61f59fac9e3b.png">

2. 「ASP.NET Core」テンプレートを選択し、「Apply」をクリックします。
<img width="1319" alt="スクリーンショット 2017-07-23 13.27.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/418aa778-c1a6-2460-128e-741292ae9ff1.png">

3. 「Default agent queue」を「Hosted VS2017」に設定し、「Project(s) to restore and build」に「MobileAppService/*.csproj」を入力します。
<img width="1309" alt="スクリーンショット 2017-07-23 13.37.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/1e80fac3-e753-8c5b-8673-690228f5d15e.png">

これだけで設定完了！だと楽なのですが、問題があるようでテンプレートのプロセスをカスタマイズしていきます。

今回作成したソリューションにはプロジェクトが複数含まれているため下記の事象に該当します。

<img width="846" alt="vsts note.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/0c220daf-191d-9753-8e68-d43852d41855.png">
[Build your ASP.NET Core app](https://www.visualstudio.com/ja-jp/docs/build/apps/aspnet/ci/build-aspnet-core)より

テンプレートでパス指定できるのRestore、Build（と今回は含めてませんがTest）までということですね…

4\. 「+ Add Task」をクリックして「Command Line」を「Add」し、ProcessのBuild直下にドラッグします。
「Tool」に「dotnet」と入力し、「Arguments」に「`publish -c $(BuildConfiguration) -o $(Build.ArtifactStagingDirectory)`」と入力してください。「Display name」は「Run dotnet」としましょう。Advanced内の「Working folder」は「MobileAppService」を。
<img width="1318" alt="スクリーンショット 2017-07-23 13.49.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/a20ce8f1-24ac-338e-8665-af70096b32c3.png">

5\.  「+ Add Task」をクリックして「Archive Files」を「Add」し、ProcessのRun dotnet直下にドラッグします。
「Root folder (or file) to archive」を「`$(Build.ArtifactStagingDirectory)`」に変更してください。

<img width="1377" alt="スクリーンショット 2017-07-23 13.53.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/8b8493c4-b999-af7a-fd86-3aa40a003507.png">

6\. 「+ Add Task」をクリックして「Copy Files」を「Add」し、ProcessのArchive Files直下にドラッグします。「Source Folder」に「`$(Build.SourcesDirectory)`」を、「Contents」に「`**\bin\$(BuildConfiguration)\**`」を、「Target Folder」に「`$(Build.ArtifactStagingDirectory)`」を設定します。
<img width="1382" alt="スクリーンショット 2017-07-23 14.06.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/403545f6-800a-0623-b2ef-fac53eba6fad.png">

7\. 今回はTestもPublishも使用しないので、Process上で右クリックし、無効化か削除します。
<img width="1380" alt="スクリーンショット 2017-07-23 14.08.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/ae58decc-15d9-fa5c-962a-0e4bb2215ec9.png">

以上で完了です。Save & queueをクリックし、queueをクリックしてビルドしてみてください！

以下はオマケなのではっしょってます。ご参考程度に…

## リリース設定
ビルドしたものをApp Serviceにリリースしたいですよね？AzureのPortal側からも設定できますが、VSTS上でビルドフローの延長でデプロイフローも設定できます。

ビルド結果のページで「Release」をクリックします。
<img width="1124" alt="スクリーンショット 2017-07-23 14.19.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/c3394978-dcc9-c394-c607-0668e6988626.png">

すると、デプロイテンプレートを選択できます。Testやパフォーマンステスト付きでデプロイするオプションもあります。

Azure App Service系のテンプレートを選択し、Azureのサブスクリプションを紐づけると登録済みのApp Serviceが選択できるようになります。

<img width="1380" alt="appservice.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/e8ee40d5-8f3c-d622-586d-2d7be03e1ad3.png">

App Serviceと連携すると、ビルドページからはビルドしたてのものを選択してリリースできるようになります。
<img width="1101" alt="スクリーンショット 2017-07-23 14.30.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/4e5cb73c-9969-cd94-4ed1-5835d853f622.png">

また、ビルドとリリースは分ける前提で書いていますが、先ほどのビルドプロセスに組み込むことも可能です。

「ビルドが成功したらリリース！！！」という設定も可能です。

ProcessにAzure 「App Service Deploy」を追加し、「Control Options」で「Only when all previous tasks have succeeded」を設定します。

<img width="1469" alt="deploy.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/dc21a64d-220f-6509-215a-3cdea7608d78.png">

「Control Options」ではこのようにProcessの実行が色々選べます。
<img width="837" alt="スクリーンショット 2017-07-23 17.17.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/28d105bb-e353-b887-9594-178ed6c7fe7a.png">


## ビルドトリガー設定
ソースコード管理ツール（Github）上で何か変更があったときにビルドを自動で走らせる設定ができます。

プロジェクトのTriggersタブで有効・無効を変更できます。

下のスクショではmasterブランチに変更があったときにビルドが行われるように設定しています。

<img width="1378" alt="スクリーンショット 2017-07-23 14.35.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/aa86b4e2-74ff-3adf-9508-d8d492c97f17.png">

## Slackからビルドを開始する
いわゆるChatOpsです。[第7回 Tokyo Jazug Night](https://jazug.connpass.com/event/60573/)というイベントでお話します。

<img width="442" alt="chatops.png" src="https://qiita-image-store.s3.amazonaws.com/0/46547/07cfa979-02d8-99ca-684c-f0290fccd111.png">
[Microsoft Flowを使ってSlackからVisual Studio Team Servicesのビルドを実行する](http://qiita.com/toshi0607/items/a02417d73463c724a54b)


## ビルド結果のSlack通知
ビルドした結果をSlackに通知できます。上のスクショみたいなイメージです。

こちら（[誰でもできる!VSTSとSlackの超簡単な連携方法](http://qiita.com/KeisukeKudo/items/257e6132d872b9069e33)）の記事がわかりやすいです。


# 参考
* [Build your ASP.NET Core app](https://www.visualstudio.com/ja-jp/docs/build/apps/aspnet/ci/build-aspnet-core)
* [Visual Studio Team Servicesを構築する(1日目)](http://kkamegawa.hatenablog.jp/entry/2016/12/01/000000)
* [VSTSでASP.NET CoreアプリのCI/CDを行う](http://kkamegawa.hatenablog.jp/entry/2017/05/05/161103)
* [誰でもできる!VSTSとSlackの超簡単な連携方法](http://qiita.com/KeisukeKudo/items/257e6132d872b9069e33)
* [Microsoft Flowを使ってSlackからVisual Studio Team Servicesのビルドを実行する](http://qiita.com/toshi0607/items/a02417d73463c724a54b)
* VSTS、Slack、Microsoft FlowでASP.NET CoreアプリのCIをやってみる
  * Coming Soon!