React Native Expoで行うアプリの簡単最速運用

Expoの利点を最大限使うためにcircleciを使いましょう的なお話です。
さらに自分が作ったexpo-qr-notifyというのを使えばもっと開発運用が楽になります的なお話です。

Transcript

1. 2019/02/27 Θͨͳ΂Ώ͏ REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷଎ӡ༻
2. ▸ ࣗݾ঺հ ▸ React Native Expoͱ͸ ▸ ExpoΛ࢖͏ϝϦοτ/σϝϦοτ ▸ ։ൃӡ༻Λૉૣ͘؆୯ʹߦ͏ͨΊʹ ▸ circleciͷಋೖ ▸ expo-qr-notifyͷಋೖ ▸ ·ͱΊ ֓ཁ
3. ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։ ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ࣮ફExpo͍ͬͯ͏ຊΛڞஶͰ2018೥12݄ʹग़൛
4. ࣗݾ঺հ(2) ▸ https://www.gandh.jp ▸ 3໊(ΤϯδχΞ͸ࣗ෼Ұਓ)Ͱฏۉ೥ྸ30൒͹ͷγχΞձࣾ ▸ ετϦʔτΧϧνϟʔ × ITͳαʔϏεΛӡӦ ▸ ݱࡏͷϝΠϯࣄۀɿhttps://www.weddyweddy.net ▸ μϯαʔ޲͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ΍͍͢30ඵఔ౓ͷۂͰགྷͬͯಈըΛΞοϓ
5. REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷଎ӡ༻ React Native Expoͱ͸
6. REACT NATIVE EXPOͱ͸(1) ▸ React NativeΛݶΓͳ͘web։ൃʹ͚ۙͮΔͨΊͷ΋ͷ ▸ Xcode΍Android Studio͕ෆཁ ▸ JavaScriptͷΈͰ࡞Δ͜ͱ͕Մೳ
7. REACT NATIVE EXPOͱ͸(2) ▸ σόοάʹ͸Expo Clientͱ͍͏ΞϓϦΛ֤ετΞ͔Βμ΢ϯϩʔυ ▸ ಉҰωοτϫʔΫ / ಉҰϩάΠϯΞΧ΢ϯτͰ࣮ߦՄೳ ▸ ΄ͱΜͲͷ୺຤ͰγʔϜϨεʹσόοΫՄೳ
8. REACT NATIVE EXPOͱ͸(3) ▸ Expo SnackͰWebϒϥ΢β্Ͱࢼ͢͜ͱ͕Մೳ ▸ ExpoΞΧ΢ϯτʹಉظͰ͖Δ ▸ γϛϡϨʔλ΋෇ଐͯ͠ΔͷͰϒϥ΢βͷΈͰ։ൃ͕Մೳ
9. REACT NATIVE EXPOͱ͸(4) ▸ ओཁͳػೳʹରԠ ▸ Χϝϥ ▸ Ի΍ಈըΛ࠶ੜ࿥ը(࿥Ի)ͨ͠ΓɺϝσΟΞϥΠϒϥϦ΁ͷΞΫηε ▸ ֤छηϯαʔܥ ▸ ͳͲͳͲ ΄΅΄΅ͷΞϓϦ։ൃʹඞཁͳػೳʹରԠ
10. REACT NATIVE EXPOͱ͸(5) ▸ CodePushͷΑ͏ͳOTAΞοϓσʔτʹඪ४ରԠ ▸ config΋؀ڥ͝ͱʹ؆୯ʹઃఆՄೳ ▸ app.json΍release-channelΛϏϧυຖʹมߋՄೳ ▸ ΞϓϦΛϏϧυ͢Δࡍͷূ໌ॻؔ࿈ΛExpoͰ؅ཧͯ͘͠ΕΔ EXPO.HOST —config app.development.json release-channel=development -config app.production.json —release-channel=production ɾiOS Distribution ɾAPNs iOS ɾiOS Development ɾAndroid KeyStore
11. REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷଎ӡ༻ ExpoΛ࢖͏ϝϦοτ/σϝϦοτ
12. EXPOΛ࢖͏ϝϦοτ/σϝϦοτ(1) ʙϝϦοτʙ ▸ JSͷΈͳͷͰWebग़਎ͷΤϯδχΞ͕৮Γ΍͍͢ ▸ ͍͍ͪͪϏϧυ͢Δඞཁ͕ͳ͍ͷͰσόοά͕؆୯ ▸ ExpoଆͰίϯϙʔωϯτΛ։ൃͯ͘͠ΕͯΔͷͰϝϯςφϯε͕ෆඞཁ ▸ ΄΅΄΅ͷωΠςΟϒػೳʹରԠͯ͠Δ ▸ ίϯϑΟάͳͲ΋Ϗϧυ͢ΔࡍʹjsonϑΝΠϧΛࢦఆ͢Δ͚ͩ ▸ OTAΞοϓσʔτରԠͳͷͰਃ੥ෆཁͰߋ৽Մೳ ▸ ূ໌ॻؔ࿈ͷ؅ཧΛߦͬͯ͘ΕΔ ▸ React NativeຊମͷΞοϓσʔτΛͯ͘͠ΕΔ
13. EXPOΛ࢖͏ϝϦοτ/σϝϦοτ(2) ʙσϝϦοτʙ ▸ npmύοέʔδ͕JSͷΈͰॻ͔Ε͍ͯΔ΋ͷͰͳ͍ͱ࢖͑ͳ͍ ▸ ExpoͰऔΓࠐΜͰ͍ΔSDKͰͳ͍ͱ࢖͑ͳ͍ ▸ adjust΍ReproͳͲ ▸ firebase͸Web SDKͳͷͰϑϧػೳ͕࢖͑ͳ͍ ▸ ExpoͰ༻ҙ͍ͯ͠ͳ͍ػೳ͕࢖͑ͳ͍ ▸ BluetoothͳͲ ▸ Expoͷશͯͷίϯϙʔωϯτ͕όϯυϧʹؚ·Εͯ͠·͏ ▸ ৹ࠪ࣌ͷ޿ࠂؔ࿈ͷνΣοΫ ▸ ϑΝΠϧͷංେԽ ▸ ͍͟σλον͢ΔͱͳΔͱ͔ͳΓࠊ͕ॏ͘ͳͬͯ͠·͏ ▸ React NativeຊମͷΞοϓσʔτ͕஗͘ͳͬͯ͠·͏
14. EXPOΛ࢖͏ϝϦοτ/σϝϦοτ(3) ʙEXPOͷ࢖͍ॴʙ ▸ ExpoͰ༻ҙ͞Ε͍ͯΔ΋ͷͷΈͰ׬݁Ͱ͖Δ ▸ ޿ࠂͳͲϏδωεతͳཁ݅ͷҙࢥܾఆ͕Ͱ͖Δ͔Ͳ͏͔ ▸ εϐʔυΛ༏ઌͯ͠ϓϩτλΠϐϯάఔ౓ͷؾ࣋ͪΛ࣋ͭ ▸ ౰ͨͬͨΒνʔϜਓ਺૿΍ͯ͠ωΠςΟϒΛ࡞ΔΑ͏ʹ͢Δ ҰਓͰ։ൃ͢Δ͙Β͍ͷؾ࣋ͪͩͱΑ͍͔΋
15. REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷଎ӡ༻ ։ൃӡ༻Λૉૣ͘؆୯ʹߦ͏ͨΊʹ
16. REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷଎ӡ༻ ࣮ػ֬ೝͷखؒΛ͔͚ͳ͍Α͏ʹ͍ͨ͠ OTAΞοϓσʔτΛޮ཰Α͘࢖͍͍ͨ
17. REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷଎ӡ༻ circleciͷಋೖ
18. CIRCLECIͷಋೖ(1) git push git merge dev prod develop master expo publish expo publish ֤branchʹϚʔδ͞ΕͨΒ OTAΞοϓσʔτ͞ΕΔ
19. CIRCLECIͷಋೖ(2) https://gist.github.com/watanabeyu/69c42b79800baa8691ac0447866a2252 ExpoͷΞΧ΢ϯτ໊/ύεϫʔυ͸CI্ʹอଘ
20. CIRCLECIͷಋೖ(3) https://gist.github.com/watanabeyu/69c42b79800baa8691ac0447866a2252 release-channel͓ΑͼconfigΛࢦఆ
21. CIRCLECIͷಋೖ(4) https://gist.github.com/watanabeyu/69c42b79800baa8691ac0447866a2252
22. CIRCLECIͷಋೖ(5) ΋͏গ͠ศརʹͳΒͳ͍͔ʁ PRຖʹExpoΫϥΠΞϯτͰΞϓϦͷ֬ೝ͕Ͱ͖Δͱศར
23. REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷଎ӡ༻ expo-qr-notifyͷಋೖ
24. EXPO-QR-NOTIFYͷಋೖ(1) git push git merge dev prod dev prod expo publish expo publish publish࣌ʹ slackͱgithubʹ ௨஌ͯ͠΄͍͠ feature/xxx git merge
25. EXPO-QR-NOTIFYͷಋೖ(2) expo publish࣌ʹίϚϯυ࣮ߦͰ͖ΔͷΛར༻ͨ͠ύοέʔδ https://github.com/watanabeyu/expo-qr-notify/tree/master/example
26. EXPO-QR-NOTIFYͷಋೖ(3)
27. EXPO-QR-NOTIFYͷಋೖ(4)
28. EXPO-QR-NOTIFYͷಋೖ(5) release-channelΛcircleciͷ؀ڥม਺Ͱࢦఆ
29. EXPO-QR-NOTIFYͷಋೖ(6)
30. ·ͱΊ ▸ Expo͸։ൃ͢Δ্ͰϝϦοτ͕ଟ͍͠σϝϦοτ΋ଟ͍ ▸ ཁ݅ʹ౰ͯ͸·Δͱͱͯ΋؆୯ ▸ ϓϩτλΠϐϯάతͳײ͙֮Β͍ͷํ͕Α͍ ▸ ։ൃ͓Αͼӡ༻Λগ͠Ͱ΋ૉૣ͘؆୯ʹ͢ΔͨΊʹ͸ ▸ circleciΛಋೖ͢ΔͱϒϥϯνຖʹOTAΞοϓσʔτͰ͖Δ ▸ expo-qr-notifyΛಋೖ͢Δ͜ͱͰ։ൃ࣌ʹPRຖʹ֬ೝͰ͖Δ
31. ͓ΘΓ