2018年11月22日木曜日

Expoで作ってるアプリのリポジトリにPRを出したときに、その変更をExpoクライアントで確認するためのQRをPRのコメントに出すための方法的なお話

  • このエントリーをはてなブックマークに追加

ExpoではExpoクライアントアプリで自分が作ったアプリを動かすことができるわけで。
https://expo.io/ほげほげみたいな感じのURLでexpo上にそのファイルがホストされていて、ExpoクライアントがそこからJSバンドルを読み込んで実行するみたいな。
だから進めているプロジェクトの進捗を確認したいなぁっていうときは、expo publishをしてバンドルをホストし、それをURLなりQRなりで共有すればみんなで見ることができるっていう。
クライアントアプリに同じExpoアカウントでログインをしておく必要があるんだけど。

で、PRごとにそれが確認できたら便利だよなぁみたいな。
ちなみにreact-navigationがPRごとに発行していて便利だなぁと。
https://github.com/react-navigation/react-navigation/pull/5266

実はapprというものがあったんだけど、全然メンテされていないしなんかそれを使うとciの設定どうやったらいいのかわからないから自前で作ってみた的な。

ということで今日はそれを実現するためのお話をば。

とりあえず作ったgistはこちら
これを用いて下記のようなステップで頑張りましょう的な。


■ファイルの設置

.
├── .circleci
│         └── config.yml
└── scripts
          └── expo_qr.sh

とりあえずこんな感じで。


■プロジェクト用のExpoアカウントを作成する

現状チーム機能とかないから共通のExpoアカウントを作るしかないんだけど。
ちなみに時期ははっきりとしていないけどチーム機能作るから大丈夫になるかもしれないんだけどね。
個人的にはプロジェクトごとにExpoアカウント作っておいた方が気持ち良い気がする。


■bot用のgithubアカウントを作成してtokenを取得

これはまんまそれだけ。
新しくgithubアカウントを作ってアクセストークンを取得して、リポジトリのコントリビュータだとかメンバーに加えてあげればよいだけ。


■circleciの設定をする

作ったExpoアカウントのアカウント名とパスワードを入力し、作ったbotのアクセストークンを設定し、app.jsonのslugに記述しているスラッグを記述して準備OK。
もし自分で今までにcircleci設置してあるならば、重要なのが下記の部分なのでこちらを適宜設定してください的な。
もちろんちゃんと事前にcircleciの管理画面に移動してプロジェクトの設定もしておきましょう的なみたいな。

これはコンテナの環境変数を設定しましょうだったり、使うコマンドを定義しておく的な部分。
シェルスクリプト内で使う項目もあるので、全てここで設定しておくと楽だよ的な。
ちなみにinstall_expo_cliはexpo cliをインストールして、login_expo_cliはログインするためのコマンド。

ここで先ほどのインストールとログインコマンドを動かしてる的な。
なのでこの二つの項目を適宜自分で設定しているcircleciに設定してあげれば良い的な。

ちなみに自分はfeatureブランチを切ってissueごとにPRを出す形にしてるので、masterとかdevelopブランチ以外の場合はexpo publishをするみたいな形でやっていたりするworkflowを書いてたりする。


■featureブランチを切ってdevelopブランチに対してPRを出してみる

そうするとciが回って頑張ってくれる。
終わったら作ったbotがQR画像付きでコメントをしてくれる的な。


ってな感じ。
かなり説明を端折ったけどこんな感じでできる。
正直circleciの設定はまだ悩んでるところなんだけどこんな感じかなぁと。
expo publishだけじゃなくてexpo build走らせてfastlaneすることもやりたいんだけどねっていう。
あと面倒だからexpo_qr.shについては解説していないけど、単純にgithubのアクセストークンを用いてAPI叩いてるだけ。

Adsense