Expo(React Native)でアプリのOTAアップデートをCircleCIで自動化する

現在自分が趣味で開発しているExpo製 Mastodonクライアントアプリikuradonは、 なんだかんだ1年くらい開発を続けてきて(とはいえ週に2日、1日1時間くらいなので掛けた時間はそこまでない)、 自分でも良く続いているなと思う感じです。

そして、ExpoやReact Nativeもかなりバージョンアップされていて、 Expoは完全に単体でのリリースとOTAアップデートがリリースされるようになりました。

OTA アップデートとは

Over The Airアップデートの略です。ネットワークを経由してアップデートすることでして、 まあ最近のゲームアプリなんかでは結構ナチュラルに実装されていますよね。

React NativeだとやはりCodePushが有名なのですが、

Expoは単体でOTAアップデートを有しており、CDNにアップロードすることで自動的にOTAアップデートを配信してくれます。

利点として、アプリのアップデートを行う必要が無いというところが利点になります。 アプリに書き出して、Google PlayやApp Storeにアップロードして・・・というフローを踏んで配信するのは結構な手間です。また、即時配信もしてくれなかったりします。

特にApple。こちらは毎回毎回審査があるので、理不尽なrejectで大体やる気が消えます。一度rejectを食らうとまあ大体そこから+2,3営業日です・・・。

このアプリに関しては今のところGoogle PlayにもApp Storeにも出していないですが、CircleCiを用いることにより、

1. masterにマージする
2. CDが走りアプリのアップデートを配信する
3. 常にユーザにはすぐにアップデートされたアプリが配信される！

という風に、完全に自動化しています。Web開発とほぼ同じCI/CDな感じですね。

Circle CI設定

というより書くほど難しいものではなかったりします。コード自体公開しているので見ていただいた方が早いです。 Expo CDNはexpのcliアプリを使用してExpoサーバにCDNを配置することができます。

そしてこれはコマンドライン上から1コマンドでできます。コマンドライン上でできることはCI/CDツールさえあれば自動化できる。

config.yml

version: 2
jobs:
  build:
    working_directory: ~/ikuradon
    docker:
      - image: circleci/node:8
    branches:
        only:
          - master
    steps:
      - checkout
      - restore_cache:
          name: Restore Yarn Package Cache
          keys:
            - yarn-packages-{{ checksum "yarn.lock" }}
      - run:
          name: Install dependencies
          command: yarn
      - save_cache:
          name: Save Yarn Package Cache
          key: yarn-packages-{{ checksum "yarn.lock" }}
          paths:
            - ~/.cache/yarn
      - deploy:
          name: Expo CDN Auto Publish
          command: yarn run ci-publish

branches->only->masterを指定することでmasterにマージやコミットされた時にだけ動作するようになっています。

CircleCIは専用のnodeイメージがあるため、これを使うと初期でyarnも使えたりとかなり楽です。 restore_cacheやsave_cacheは、node_moduleのキャッシュに必要で使用しています。

yarn run ci-publishは、 exp login -u \"$EXPO_ACCOUNT\" -p \"$EXPO_PASSWORD\" && exp publishのエイリアスとなっています。

CircleCIは環境変数を設定することもでき、シークレットな値はここに保存します。 一応外部から見ることは出来なくなっているので、パブリックなリポジトリでも問題はないかなと。CircleCI側で流出でもしたら食い止められませんけど。

なのでセキュリティ的には生のパスワードを保存することになるのであまりよろしくないのですが、 これ以外に方法がなさそうでして・・・(Token形式も検討されていたような感じだったが現状無い・・・)

そしてパブリックなリポジトリのため、結果はここで誰でも見れたりします。 正常にCDNにアップロードされていると思います。

https://circleci.com/gh/potproject/ikuradon/tree/master

ちなみにこのアプリはここから誰でも使用することができます。自分も日常的に使用するくらいには完成度高いと思うので使ってね！ そしてMastodonサーバまで立てよう！

公式のストアに置きたい気持ちもあるのですが、App Storeは月1万のお布施があるので多分まずないですね。 Google Playはアカウントがあるので考え中。でも検証端末が手元にない・・・

CircleCiは、月1500分まで無料という体系を取っており、大体1リクエストで2分くらい掛かっているため、 月に700コミット以上しなければ問題なく無料枠を使えるという感じです。(今のところ2分くらい)

個人でちょっと使うなら非常に簡単に設定できて、わかりやすいのでいいですね。 他にプロダクト作ったりしたら使いたい(お金がかからないうちは・・・)。

追記: Expo v31から、CI用のツールとしてTurtle-cliというものが出来ているようです。こちらを使用していくことになるかもしれません。(書いてる時点ではbetaですので、何とも言えませんが・・・