Flutter×Codemagic入門(アカウント作成~テスト/ビルド/配信の自動化)

---
# :book: Flutterの記事を整理し本にしました :book:
https://zenn.dev/kazutxt/books/flutter_practice_introduction

* <font color="red"><b>本稿の記事を含む様々な記事を体系的に整理し本にまとめました</b></font>
* 今後はこちらを最新化するため、<font color="red"><b>最新情報はこちらをご確認ください</b></font>
* 25万文字を超える超大作になっています!!

---

## まとめ記事
* [Flutter系の記事のまとめ](https://qiita.com/kazutxt/items/524acb1c134015682ccf)

# はじめに
* 個人開発だと、とりあえずGithubでソースコードを管理するだけでいいや！になり、CICDまでちゃんとやろうとならないのですが、せっかくなので、Codemagicを用いて、自動化してみました。


# Codemagicとは
https://codemagic.io/start/

CodemagicはCI/CDサービスの一種で、GithubActionなどと同じようなサービスになります。
Flutterの専門のCI/CDから始まったため、かなりFlutterのCI/CDが扱いやすくなっています。


# 初期設定
## アカウントの作成
サイトにアクセスし、Sign upをクリックします。

![4tv7glagavh6hhdzxurc3ql6u6hk.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/3be6b966-3e5f-5d06-0ab0-b46e1c55b59a.png)


続いて、認証方法を選択し、認証します。

![g1l1qahgf6jdsvdhmfnjhh77ifui.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/46bf2f34-ce38-f74e-5626-f99aad55f539.png)


この後Github側で許可をすれば、アカウント作成が完了します。

以後、Githubを前提に進めます

## リポジトリの設定

リポジトリを連携させるために「Install GitHub app」をクリックします。

![5fg0g8njiru96bkd3xrtkw1ypbby.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/37cf1c8a-8484-9826-de12-8529e195f9a9.png)

連携するリポジトリを選択して認証を行います。

![s1e37jcele7cg8if964zbbi2t29u.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/a63fdebc-af0b-13c2-3511-a59d041979f0.png)

## デフォルトフローでのビルド

「Set up build」を選択します。

![zxgknaqni7ulps9w3j3b1jpqzx01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/d9e810ab-1654-85aa-7179-7289525d29d4.png)

アプリの種類を聞かれるので、「Flutter App」を選択します
![oxr7fx4g3sp6hfh86svx8yjpbjqm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/9187dd45-3a8f-8c74-5948-4c4e6336b179.png)

フローの編集画面に移動します。
「Workflow Editor」に移動した上で、「Start your first build」をクリックして、デフォルトの設定のまま実行します。

![ffnf91qon10e1x04bw1ih1p93n5w.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/34a9bef3-603e-d1ff-152f-898d511e3976.png)


ブランチとフローを選択します。
ブランチは、ビルドに利用するブランチを選択してください。フローはデフォルトで問題ありません。
![nciu3p4ysbqbzbpex9nfgays61dj.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/982b141d-3dfa-738c-3630-9be4623f5c37.png)


ビルドが問題なく終わると、「build finished」が表示され、成果物が作成されます。

![1jgp0ybpj7pek9s1hrweqll9qc40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/7113f491-bf4d-4123-d015-4c9c10ec0a8f.png)


なお、ビルド中はビルドを行っているマシンにリモート接続することも可能です。
![kdvpd2p8n9sg9h1bytb8uma9luu2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/e1c32762-0f34-f6a9-6ee5-c3369d3e290e.png)



# ビルドフローの概要
ビルドのカスタマイズが必要な場合は、「WorkFlow Editor」や「codemagic.yaml」で設定を行います。

今回はWorkFlow Editorを使いGUIからカスタマイズを行います。
codemagic.yamlには触れません。

全体的な流れは下記のようになっています。

![ky69v8ipsvc3vocs1zopouta5wpa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/572cde1d-2106-9c44-b800-2f4b9810d410.png)


## 全体設定
また、どのプラットフォーム向けにビルドするのかと、どの環境でビルドするのかを全体の設定として選択します。

![0e6q1qaidnjmhu70wuq2isexb2qd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/8fe288df-ba2c-e58a-292e-0e26d4b73582.png)

# 事前準備のカスタマイズ
## Build trigger
ビルドトリガーでは、どのような条件でビルドを開始するのかを指定できます。
push,pullrequest,tagのイベントと対象となったブランチの正規表現の組み合わせでトリガーを設定します。

![9eiwyp3ymt2z6pp0ge4wzgmkrnf0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/503edbba-d599-bb34-6b89-cb69d9a6f165.png)


## Environment Variables
環境変数では、後続処理で必要な環境変数の定義を行います。

![1sz6pkwg9yr51pfycmfhzvrlbjy5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/b76a701e-31b2-9b67-6a78-e0175033e3d1.png)

## Dependency caching
依存関係のキャッシュでは、特定の依存関係をキャッシュすることで、取得や解消の処理をキャッシュから行い、作業を効率化します。

![8zux80lbp8qi63qouphw5jenhmb3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/c2b1ac69-a978-60e1-e989-a61132201520.png)

## Post-clone script
cloneを行った後に、スクリプトを設定することができます。
以後の各処理の間にもスクリプトを設定でき、コマンドの実行など、細かく処理を制御できるようになっています。

![fnpuhebnnvgky08ysorax0g8y1zn.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/5c2bba74-a9f2-838f-052e-90929ec2f965.png)


オプションの処理となるpost,preのスクリプトは同じ形式ですので、以後は省略します。

# テストのカスタマイズ

テストの設定では、解析やテストの実行の有無、テストNG時のビルドの停止などのプロセスの制御や、実行時のパラメタ、エミュレータの種類などを設定します。

![m8xe00jhzlh6ggtbwak84lt8cu67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/1c6bf6be-4150-9f4a-da42-87e45df4b6aa.png)


パイプラインには細かいログが表示されます。
テストにおいては、全体の概要のResultと詳細のLogを確認することができます。

![9sw1t3a2v4irnoc3h11b4ckjtlu3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/1ca0c7f1-4764-d2c5-4c74-fe154e36b44f.png)


# ビルドのカスタマイズ
## Build

ビルドの設定では、FlutterやXCodeのバージョンや、Androidの出力形式、モードなどを選びます。

![ofd0gte3xf7ho0vz9ijeqgdnj06t.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/d01f9393-1ade-1e62-3349-6c33149769c5.png)


# 配信のカスタマイズ

## メール
デフォルトでメールに連絡が来るようになっていますが、もちろんカスタマイズすることもできます。
メールアドレスを追加したり、失敗した時にメールが来るようにできます。

![fjfys5irtf2s64xzvc87m45exna1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/1d773d22-caba-5cd9-b6aa-b83f1fe83558.png)

なお、通知されたメールのリンクをクリックすることで、作成された成果物をダウンロードすることができます。

![qmuzzgi9ex5h61h1eeh21lidct53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/fe7cfb90-e6eb-9edd-afc8-21bb91665370.png)


## Slack
SlackにもWorkspace/channelを指定した上で、通知を送ることができます。

![g70a4y1sjj7d66fvci891jay4rmt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/206196fe-a15b-f03e-d671-d55a798dbfdc.png)


こちらも同じようにリンクから、作成された成果物をダウンロードすることができます。

![pyw2eitv392dbzowg1dhi6tcmppg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/b1fe0d19-8bcb-6473-538a-173a053036a8.png)


## GooglePlay/AppStore

署名(Android code signing / iOS code signing)を行った上で、「Google Play」「App Store Connect」の設定を行うと、自動でそれぞれのストアにアップロードをすることもできます。

配信ストアへの自動アップロードは、運用の仕方やどこまでを自動で行い、どこからを手動でチェックするのかなどが、各プロジェクトの案件によって異なりますので、ここでは省略させていただきますが、公式ドキュメントに詳細な手順がありますので、こちらをご参照ください。

[Codemagic公式ドキュメント](https://docs.codemagic.io/)