Azure Pipelines と App Center の連携方法

## 概要

Azure Piplinesでビルドを行い、できた成果物をApp Centerでデプロイする手法があります。

ただ、ググって次のような記事を参考に対応を進めるものの下記スクショのようにエラーがなかなか解消できず苦戦しました。

- [WPF on .NET Core 3.0アプリをAzure PipelinesでビルドしてAppCenterにリリースする](https://iyemon018.hatenablog.com/entry/2019/11/04/153605)
- [Azure PipelinesのYAMLでiOSアプリのApp Center配布パイプラインを構築する方法](https://qiita.com/uhooi/items/1245344a6add3e86cdc8)
- [今更 Azure DevOps と App Center と繋いで遊んでみる](https://qiita.com/ChiiAyano/items/6787c4325a550e433765)
- ...etc

　<img width="500" alt="スクリーンショット 2020-04-08 13.03.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/9c19490e-040a-1cc0-03b0-81c0b2711f0b.png">


もしかするとアップデートによるものかもしれないので、手探りで何とか解消できた連携方法を解説します。


## 前提

細かい説明や補足は入れず、すでにAzure PipelinesとApp Centerを触ったことがあるくらい知っている前提で解説していきます。
そのため、Azure PipelinesとApp Centerについて全く触ったこともなく公式を見ただけの方は、この記事を読む前に一度双方を触ってみることをお勧めします。

すぐに読みたい方は、[Azure Pipelines と App Center について](https://qiita.com/gremito/items/265d15d6fcf53db3db2d)という記事も書いているので良かったらこちらを参考にされてください。


## ゴール

手順通りに進めていくことで、Azure Pipelines と App Center を連携できる。


## 手順

アプリの登録などは済ませている前提で手順を解説していきます。

### 1. API Tokenの発行

まずは、App Centerの方で`API Token`を発行する必要があります。
右上のユーザーアイコンをクリックして、`Account Settings`から`API Token`をクリックします。

　<img width="500" alt="スクリーンショット 2020-04-08 13.03.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/cc7fd570-016b-2b2f-bf65-a8e9dfb58ebf.png">

`New API token`をクリックして、`Description`は何でも良いので分かりやすいものを入れて、`Add new API token`をクリックしてトークンを発行します。

　<img width="500" alt="スクリーンショット 2020-04-08 13.05.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/0d89484a-137e-cf9b-1d85-ea7c678a8379.png">

するとトークンが表示されるのでメモしておきましょう。
このトークンは、発行後のみ表示され、再度確認することができない仕様になっているので注意してください。

　<img width="500" alt="スクリーンショット 2020-04-08 13.05.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/2b5bd6cf-dacc-2f13-edbb-3ecfb10b419d.png">

### 2. サービス連携（App Center編）

次に、デプロイ対応したいアプリの`Settings`から`Services`を開いてAzure Pipelinesを選択してサービス連携をしていきます。

　<img width="500" alt="スクリーンショット 2020-04-04 18.45.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/d1bca08f-c0f2-f86e-6594-ac020deb69a5.png">

選択後、次のように承認を求められるので問題なければ承認をクリックして連携させていきます。

　<img width="500" alt="スクリーンショット 2020-04-04 18.46.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/5ecfed45-d06f-5de8-e0e4-ab1d2633557e.png">

次にAzure Pipelinesで所属している組織(Organization)とパイプラインがリストで表示されます。

このとき、App Centerで登録しているメアドとAzure Pipelinesで登録しているメアドが同じであれば、このようにスムーズに表示されます。
もし、別々のメアドを扱っている際は、同じメアドにするかAzure Pipelinesの組織からユーザー紐づかせるなどの対応が必要かなと。

　<img width="500" alt="スクリーンショット 2020-04-04 18.46.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/8c9a0b68-a6d6-e08b-f6aa-4a9f5b83fe22.png">

デプロイ対応したいアプリを登録しているパイプラインを選択し、特に設定せずに`Save`をクリックします。

　<img width="500" alt="スクリーンショット 2020-04-04 18.46.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/bfcfb888-1ec4-af93-18bc-806245851913.png">

範囲指定しているラベルは、Azure PipelinesのYAMLで設定することになります。

　<img width="500" alt="スクリーンショット 2020-04-04 18.48.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/4440fb0a-4759-a580-c832-7db6391d5ec7.png">


### 3. サービス連携（Azure Pipelines編）


次にAzure Pipelinesの方で設定していきます。

コンソール画面左下の歯車アイコンをクリックして設定画面を表示し、Pipelinesの項目から`Service connections`をクリックします。

　<img width="500" alt="スクリーンショット 2020-04-08 13.03.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/5f2673db-b219-e1bd-2c2d-dacff8437140.png">

色々連携できる中、下の方にApp Centerがあるので選んで`Next`をクリックします。

　<img width="500" alt="スクリーンショット 2020-04-08 13.05.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/4e31fd52-6d14-83ae-f729-6b80c8e79028.png">

先ほどメモしたトークンを`API Token`のフィールドにペースとして、`Service connection name`にはアプリ名または分かりやすいものを入れて`Save`をクリックします。

　<img width="500" alt="スクリーンショット 2020-04-08 13.05.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/4e452adb-f5ab-ac29-500f-dc7602608ef6.png">

これで連携の準備が整いました！
あとはYAMLに設定していくだけです。

　<img width="500" alt="スクリーンショット 2020-04-08 13.05.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/a63a1a18-cc63-4470-93e2-ba1f7f8ebed0.png">

### 4. YAML設定

今回、アプリ配信なのでApp CenterのDistributeを使用します。
`Tasks`から`App Center distribute`を選んで進めると楽に設定できます。

または、公式の[App Center Distribute task](https://docs.microsoft.com/en-us/azure/devops/pipelines/tasks/deploy/app-center-distribute?view=azure-devops)を確認しつつ、ググって良しなに参考になる記事を見つけて細かい設定を進めてください。

　<img width="305" alt="スクリーンショット 2020-04-15 17.44.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/e536842e-892f-e052-1a3a-64d5ffa83906.png">

`App Center service connection`を設定するとき、さっきAzure Pipelinesで登録したApp Centerの`Service connection name`がプルダウンから表示されます。
ここにプルダウンから表示されない内容を設定すると、冒頭のエラーが発生します。

 <img width="500" alt="スクリーンショット 2020-04-08 13.06.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/48fde892-6360-f18b-2318-d2508df3bda3.png">

`appSlug`は、2のサービス連携の最後に解説したラベルを入れることになります。
直書きでも良いですがValue設定すると柔軟に対応できます。

 <img width="500" alt="スクリーンショット 2020-04-04 18.47.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/17da43fa-c35a-4cd6-a96d-e7951b098bfc.png">


### 5. 動作確認

あとは変更したYAMLをSave & Runさせて、App Centerでデプロイできていたら完了です！

　<img width="500" alt="スクリーンショット 2020-04-15 17.53.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/3ec2c10c-5cdb-176b-26b4-2c68edfabb15.png">



## まとめ

上記の参考にしていた記事と比較するとお分かりですが、Azure Pipelines と App Center の連携が全く解説されておらず、アプリの登録方法とYANLの設定方法だけ書かれているような印象があり、初見だと冒頭のエラーが起きやすいと感じたのでざっくりまとめました。

今回、サンプルではWindowsのビルド設定になってますが、iOS/Androidのネイティブに関わらず、Unity/Xamarin/Reactなどマルチプラットフォームツールにも対応しています。

先日、[GitHubがチームも無料](https://github.blog/2020-04-14-github-is-now-free-for-teams)になって結構個人で扱えるようになり、GitHubはMicrosoft内でもありますし、まずは全て個人用アカウントで試してみてはいかがでしょうか。