Codemagicの設定手順＆ハマりそうなところをまとめてみた

# はじめに

- ネイティブアプリを開発したことがない方
- Flutterを触っている、もしくは触る予定の方

へ向けた記事になります。

私自身、ネイティブアプリの開発がなく、Flutterに入門しており、リリースの時にあたふたしたため、同じような境遇の方のためになればと思い執筆しました。

# Codemagic とは

![Newsletter-second.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/1f931cb6-e69c-3cfc-0453-31ce3227fd5e.jpeg)

Flutter専用のマネージド CI / CD サービスです。
登録から最初のビルドまで簡単に出来てしまう大変便利なサービス。

## Codemagic に登録

[Codemagic - SignUp](https://codemagic.io/signup)

任意のリポジトリサービスを選択して簡単にSignUpすることができます。

<img width="1266" alt="スクリーンショット 2019-12-14 15.09.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/e39eb9fd-f555-a60c-f3ea-6be5dbdd3a8f.png">

## 任意のリポジトリを選択し、即ビルド

![codemagic-device-farm-import-1024x474-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/77bab30c-c12c-84b8-d373-a0b9dbc6b406.png)

ビルドが終わると APK ファイルが生成されています。

![1_6E9A_JrjZCXL0Own0_AyFQ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/b1143dbc-de99-1eb4-806d-3feb4a152542.png)


めっちゃ簡単。。
実際にアプリをリリースビルドして自動でアップロードするには Android / iOS 共に設定が必要になります。
それぞれ分けて説明します。

# Android に関する設定

## Keystore ファイルの作成
Keystore ファイルは Google Play に公開するアプリの署名の際に必要になります。
Keystore ファイルは紛失するとアプリのアップグレードが出来なくなりますし流出すると成りすまされてアプリを公開されてしまう可能性があるので取り扱いには注意しましょう。

```shell:Ksystore生成コマンド
keytool -genkey -v -keystore keystorename.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
```

Keystore のパスワードと Key のパスワードの２種類入力しなければならないので覚えておいてください。のちに使用します。



## Codemagic 上での Code Signing

[Android Code Signing](https://docs.codemagic.io/code-signing/android-code-signing/)
基本的に公式のサイトにまとまっています。

### Keystore ファイルのアップロード

Workflow 内の Publish の項目の `Android code signing` に、作成した keystore をアップロードします。
その際に、

- **keystore password**
- **Key alias**
- **Key password**

も合わせて入力しておきます。

![code signing.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/f51f4338-7603-b9ce-e6cf-9567a535b602.png)


### 環境変数の設定

公式にもある通り、Keystore に関する情報を環境変数で与えなければいけません。

- **FCI_KEYSTORE_PASSWORD = myKeystorePassword**
- **FCI_KEY_ALIAS = MyReleaseKey**
- **FCI_KEY_PASSWORD = myKeypassword**
- **FCI_KEYSTORE_FILE = myKeystoreEncodedByBase64**

<img width="1025" alt="スクリーンショット 2019-12-14 14.16.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/3251612e-184e-da92-8f45-b774a733c7ca.png">

最後の `FCI_KEYSTORE_FILE` は最初何を設定するのか分かりませんでしたがどうやら Base64 に encode した Keystore 文字列を突っ込む必要があるらしい。先程の項目で Keystore アップロードしていたので必要ないと勝手に思い込んでました。ドキュメントちゃんと読まないとですね。

```shell:Base64_encode
$ base64 -i /path/to/keystore -o output.txt
```

### Post-clone script の追加

`Post-clone script`に以下のコードを追加します。

```sh
#!/usr/bin/env sh
set -e # exit on first failed commandset
echo $FCI_KEYSTORE_FILE | base64 --decode > $FCI_BUILD_DIR/keystore.jks
```

## Play Console でのアプリケーション作成
Google Play の Developer 登録が済んでいない人は[公式サイト](https://developer.android.com/distribute/console?hl=ja)から登録しましょう。

SignInしたらアプリの作成を押して新規アプリを作成します。

<img width="1168" alt="スクリーンショット 2019-12-14 14.38.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/0d3abaa1-4a9a-bd60-4f4f-484d636b4b6d.png">


## Service Acount の作成

**Codemagic から APK ファイルを自動アップロードするために Service Account を作成する**必要があります。
手順に関しては[こちら](https://medium.com/@espresso3389/google-play%E3%81%ABapk%E3%82%92%E8%87%AA%E5%8B%95%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B-c-7d39c2258723)のサイトが参考になるかと思います。

## Codemagic 上での Google Play の設定

Workflow の `Publish` の項目の `Google Play` を開きます。

<img width="955" alt="スクリーンショット 2019-12-14 14.52.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/3e5b22a8-0b4c-5296-acfd-0ff4b9708b9f.png">


**Service Account の作成の項目で生成した Service Account の APIKey ( JSON )** を `Credentials` にアップロードし、APK ファイルをどの Track にアップロードするか選択します。

## ※ 注意

App を作成した後に、一度手動で APK ファイルをアップロードする必要があります。


Android に関しては以上になります。

# iOSに関する設定

[iOS Code Signing](https://docs.codemagic.io/code-signing/ios-code-signing/)
公式で手順が解説されています。
順を追って解説していきます。 

## Apple Developer Portal と連携

`User Settings` もしくは `Team Integration` にある Developer Portal の connect ボタンを押して連携します。
連携できると以下のように緑色に変わります。

<img width="972" alt="スクリーンショット 2019-12-14 16.48.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/dd4d82aa-a076-45f2-1db4-2b91201a551a.png">


## Apple Developer Portal で App ID ( Bundle ID ) を生成

[Apple Developer Portal](https://developer.apple.com/jp/) へアクセスし、 `Account` => `Certificates, Identifiers & Profiles` の順にクリックします。

`＋` ボタンを押して[こちら](https://i-app-tec.com/ios/ios-app-ids.html)を参考に App ID を生成します

## App Store Connect でのアプリ作成
[Apple Developer Portal](https://developer.apple.com/jp/) へアクセスし、 `Account` => `Certificates, Identifiers & Profiles` => `App Store Connect` の順にクリックします。

左上の `＋` ボタンから `新規 App` を押すと以下の画面になります。

<img width="545" alt="スクリーンショット 2019-12-14 17.20.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/3b2a814c-9988-0818-3e88-61384d7af76a.png">

- **名前 ( アプリ名 )**
- **プライマリ言語 ( 第一言語選択 )**
- **バンドルID ( 先程作った Bundle ID )**
- **SKU ( アプリを識別するための ID )**

を入力して作成を押します。 SKU に関しては変更ができないのでよく考えて入力する必要があります。


## Codemagic 上での Code Signing

iOS は `Autmatic` という項目があり、自動で設定することができます。めっちゃ便利ですね！

### ※ Pre-build scriptの追加 ( Option )
Build flavor を設定している場合、 `Pre-build` script に xcconfig ファイルを上書きする処理を記述しなければいけません。詳しくは [monoさんの記事](https://medium.com/flutter-jp/codemagic-a0f494c6244a)をご覧ください。

## Codemagic 上での Apple Store Connect の設定

`Workflow` の `Publish` 内にある App Store Connect を開きます。

- Apple ID ( アカウントの Email Address )
- App-spcific password (App 用パスワード )
- App ID ( App Store Connect で作成した App の ID )

<img width="968" alt="スクリーンショット 2019-12-14 17.28.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/e6fa5945-c3b9-7d32-7f73-983041926d6d.png">

App-specific password を作成するには、
[Apple ID Service](https://appleid.apple.com/#!&page=signin) にアクセスします。アカウントの管理の `セキュリティ` の項目があるのを確認します。

<img width="989" alt="スクリーンショット 2019-12-14 17.35.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/9f6731d3-273d-32a2-0552-69c6170d499c.png">

`パスワードを生成...` をクリックし、任意のラベルをつけて作成します。その際に表示されるパスワードをメモしておきます。パスワードはこれ以降確認できないので注意が必要です。
また、`2ファクタ認証` が有効になっていない場合は App 用パスワードを生成することができないので済ませておきましょう。

App ID は App Store Connect へアクセスし、作成したアプリをクリックして確認することができます。

<img width="717" alt="スクリーンショット 2019-12-14 17.43.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/2850a682-a28c-30d9-176d-1ea2d3d4df64.png">


# 全般の設定

## Build triggers の設定

- **Trigger on push**
- **Trigger on pull request update**
- **Trigger on tag creation**

の3つの Trigger を設定できます。
ワイルドカードを使って特定の Branch を対象にすることも可能です。
下の画像では、 `feature` か `fix` で始まる Branch から PullRequest が出された時に実行するパターンです。

<img width="1045" alt="スクリーンショット 2019-12-14 17.52.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/f23f5e8f-f729-c9d6-abae-b8f37269d0d5.png">


# 連携の設定

## Slack

Publish もしくは Team integrationに画像のような項目があるので connect を選択

<img width="951" alt="スクリーンショット 2019-12-14 13.47.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/1bd138d8-2cce-9247-ea7d-12c2df065fc5.png">

Slack の integration の設定ページに飛ぶので許可する
その後、Codemagic でビルドを開始して終了すると Slack に Artifact のリンクを含んだメッセージが post されます。

<img width="600" alt="スクリーンショット 2019-12-14 13.41.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166345/8ae7fbda-4a15-6d39-90c5-810e07ac9f5e.png">


# 終わりに

Flutter 自体もとっつき易く、新しく始めるのに敷居が低いので嬉しい限りです。
Flutterを触り始めてから Swift や Kotlin でも開発してみたいなと思うようになったので挑戦しようかなと目論んでいます。
ありがとうございました！