expo開発におけるCI/CD / CICD on development of expo

スポーツ解説アプリSpoLiveにおいてReactNative/expoで開発している知見について、CI/CD Test Night #5 (#cicd_test_night)で発表した内容です 。
expoにおけるアプリ開発の効率化のメリットや、expo開発で開発効率化のために導入しているCIについて述べています。

Transcript

1. expo開発における CI/CD CI/CD Test Night #5 Hisayuki Matsuki @mtskhs
2. about me • 松木久幸（@mtskhs） ◦ Backend Engineer / Gopher ◦ スポーツAI解説サービス(SpoLive) @ NTT Communications ◦ Agile (シリコンバレーで３ヶ月働いて体感した自立型組織のススメ) ▪ https://speakerdeck.com/matsu0228/organizationtheory-of-engineering ◦ Agile Testing Days 2018 レポート ▪ https://speakerdeck.com/matsu0228/report-of-agiletestingdays2018
4. SpoLive 国際試合に 対応しました！ 4
5. architecture • expo / firebase / GCP+Go Go
6. contents • 話すこと ◦ #1 expo開発によるメリット ◦ #2 expo開発におけるCI/CD • お聞きしたいこと　←これ重要 ◦ アプリにおけるテストってどうしてます？
7. #1 about expo • メリット ◦ toolが揃っている（QRによるアプリ確認) ◦ Release Channelによるチーム内共有 ◦ OTAアップデートによるアプリ配信 • デメリット ◦ ネイティブモジュールの制約 Expo “a set of tools, libraries and services you can use to build native iOS and Android apps faster than ever before!“
8. #1 about expo • QRによるアプリ確認 $ expo start development mode Expo Client
9. #1 about expo • Release Channel ◦ URL / QRコードから、特定バージョンのアプリを確認できる ◦ 例えば、gitのブランチごとのアプリの状態を検証できる • $ expo publish --release-channel <channel name> • $ expo build:android --release-channel <channel name>
10. #1 about expo • OTAアップデート ◦ expo server 経由で、最新のJSバンドルだけを 差し替えることでアップデートができる
11. #2 CI/CD on expo • 某イベントにて、β版アプリを配布し実際のユーザーにに利 用してもらった • 課題 ◦ どれが最新アプリかわからない ◦ 本番用アプリで、テストデータで試験したい
12. #2 CI/CD on expo • 最新アプリがどれかわかるように ◦ Release Channels= master / developで固定 ◦ commitされたら、自動でpublishするようにcircle.CIで設 定
13. #2 CI/CD on expo • 最新アプリがどれかわかるように ◦ ついでにプルリクしたらアプリの検証をしやすくした ◦ expo-qr-notify(https://www.npmjs.com/package/expo-qr-notify) ◦ expo publishした際に、app.jsonのhookが実行される
14. #2 CI/CD on expo • firebaseの接続先の切り替え ◦ expo Release Channelsをみて切り替えるように
15. summary • expoには、開発にあたって便利な機能が満載（CDツール 内包） ◦ QRコード読み取りでClientアプリで検証可能 ◦ OTAアップデート • CI/CD ◦ expo publishの自動化＆QR通知 ◦ Release ChannelsごとにDBを切り替えるように ◦ 今後、アプリの自動ビルド・fastlane等による各ストアに 対する自動審査申請 等も検討中