モバイルアプリエンジニアをやっている@mrtryです。
弊社で提供しているヘルスケアプラットフォームPep Upのモバイルアプリは、React Nativeをベースに開発しています。 元々は、素のReact Native(Vanilla React Native)で実装されていましたが、直近ではExpoに移行作業を進めています。 Expoでは、Cloud Build Serviceが提供されているのですが、Build結果をSlackに流せるように色々やったのでシェアします💃🏼
つくったもの
Expo Cloud Build (EAS Build)でBuildが完了したタイミングで、以下のような通知を流すことができます🥳
Success | Failed | Cancel |
---|---|---|
スクショは載せていませんが、EAS Submitにも対応しています💃🏼
やったこと
EAS Buildには、Build完了時にWebhook経由で通知を受け取ることができます。
これを利用して、Slackに通知を流すようなFirebase Cloud Functionsを作成し、通知をSlackへ流せるようにしました。
大変だったところ
サンプルをCloud Functions仕様に書き直す
ExpoのWebhookのページには、サンプルコードが載っています。 ですが、これをそのままCloud Functionsにコピペしてもsignatureの判別がtype errorになります。
具体的には、hmac.update(req.body)
の箇所がtype errorになります
app.post('/webhook', (req, res) => { ... const hmac = crypto.createHmac('sha1', process.env.SECRET_WEBHOOK_KEY); // ↓がtype errorになる hmac.update(req.body); ... });
sampleでは、Expressがベースに実装されているようです。
Expressでは、 request.body
の型はstringになっています。
ですが、Cloud Functionsだと、 request.body
は string
ではなくobject
になっているため、このコードをそのまま貼り付けるとエラーになります。
同様にCloud Functionsでも動作させるには、未加工のbodyを hmac.update()
にわたす必要がありました。
対処法ですが、Cloud Functionsで生のrequestを取得するには request.body
ではなく、 request.rawBody
を利用することで解決できました。
このPropertyの存在に気づかず、地味に数時間溶かしてしまいました😇
QR CodeをSlackに表示したかった
EAS BuildしたものはExpoのDashboardからモバイル端末にインストールすることができます。 各端末にサッと入れれるように、Slackの通知にQR Codeを表示したかったです。
Buildの通知のスレッドに添付しつつ、チャンネルにも投稿したかったのですが、それはAPIの仕様上できないようでした。 調べてみると、workaroundが紹介されていました。
これに則って、「スレッドに投稿」「画像投稿のメッセージを削除」「画像のURLだけを再投稿し、チャンネルに流す」という対処をしてチャンネルに表示できるようになりました🥳
いい感じそう🥳
というわけで、EAS Buildの結果をSlackに流せるようになりました🥳 誰かの参考になれば嬉しいです!💃🏼
JMDCでは一緒に働けるエンジニアを募集しています! カジュアルも行っているので、興味あれば下記よりエントリーいただけますと幸いです!