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

254ef4587f3c010fc0c52517ff5514c2?s=47 Yu Watanabe
February 27, 2019

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

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

254ef4587f3c010fc0c52517ff5514c2?s=128

Yu Watanabe

February 27, 2019
Tweet

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. ͓ΘΓ