Expoで本番運用をしてみよう

Transcript

1. 2018/09/13 Θͨͳ΂Ώ͏ EXPOͰຊ൪ӡ༻Λͯ͠ΈΑ͏

2. ▸ ࣗݾ঺հ ▸ Expo࢖ͬͯ·͔͢ʁ ▸ ExpoͰͷຊ൪ӡ༻ ▸ ։ൃ؀ڥͱຊ൪؀ڥͷ෼͚ํ ▸ ଟݴޠରԠ

   ▸ ΤϥʔτϥοΩϯά ▸ CodePushతͳػೳͷ࢖͍ํ ▸ ·ͱΊ ֓ཁ

3. ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։

   ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu

4. ࣗݾ঺հ(2) ▸ https://www.gandh.jp ▸ 3໊(ΤϯδχΞ͸ࣗ෼Ұਓ)Ͱฏۉ೥ྸߴΊͷγχΞձࣾ ▸ ΤϯλϝܥʹಛԽͨ͠αʔϏεΛओʹӡӦ ▸ WeddyWeddy(ݱࡏ࢓ࠐதͰ10݄ϦϦʔε༧ఆ) ▸

   μϯαʔ޲͚ಈըϓϥοτϑΥʔϜ ▸ Spotful(ൢച୅ཧళ) ▸ ΧφμൃΠϯλϥΫςΟϒಈըαʔϏε ▸ getstage(΄΅Ϋϩʔζ) ▸ ϛϡʔδγϟϯ/μϯαʔ/DJʹಛԽͨ͠ΦϯϥΠϯϚονϯάαʔϏε ▸ Partee(Ϋϩʔζ) ▸ ࣸਅ΍σβΠϯΛΦϦδφϧάοζͱͯ͠࡞੒Ͱ͖ΔΞϓϦ ݱࡏ͸WeddyWeddyΛϝΠϯʹνΣέϥονϣத

5. EXPOͰຊ൪ӡ༻Λͯ͠ΈΑ͏ Expo࢖ͬͯ·͔͢ʁ

6. ▸ ExpoͬͯԿͳͷʁ ▸ ׬શʹJSͷΈͰΞϓϦ͕࡞੒Մೳ(XcodeɺAndroid Studio͍Βͣ) ▸ ωΠςΟϒͳAPIΛExpo SDKͱͯ͠แׅ ▸ CodePushతͳ΋ͷ΋࠷ॳ͔Β࢖͑Δ

   ▸ όʔδϣϯ্͕͕Δ͝ͱʹػೳ͕ͨ͘͞Μ௥Ճ EXPO࢖ͬͯ·͔͢ʁ(1)

7. ▸ Expoʹର͢Δෆ҆ͷ੠ ▸ JSͷΈ͔͠৮Εͳ͍ͷͰ։ൃͰ͖ͳ͍ػೳ͕͋Δ ▸ react-native linkͰ͖ͳ͍͔Β֎෦ͷSDK࢖͑ͳ͍ ▸ react-nativeຊମͷΞοϓσʔτʹ͙͢ʹରԠͰ͖ͳ͍ ▸

   detach͢Δͷ͕ҋਂ͍ͱ͍͏੠͔͠ฉ͍ͨ͜ͱͳ͍ ▸ ຊ൪Ͱ࢖͍ͬͯΔਓ͍Δͷʁ EXPO࢖ͬͯ·͔͢ʁ(2) Ҏલʹൃදͨ͠಺༰͕͋ΔͷͰͦͪΒΛࢀߟʹͲ͏ͧ ػೳຖʹϥΠϒϥϦͳͲͷ঺հΛ͍ͯ͠·͢ https://speakerdeck.com/watanabeyu/shi-li-dejian-ruexpopurodakusiyonapuri (גࣜձࣾFACTBASE͞ΜͰͷษڧձʹͯൃද) ຊ౰ʹຊ൪Ͱެ։Ͱ͖ΔΑ͏ͳΞϓϦ࡞ͬͨͷʁ

8. EXPOͰຊ൪ӡ༻Λͯ͠ΈΑ͏ ExpoͰͷຊ൪ӡ༻

9. EXPOͰຊ൪ӡ༻Λͯ͠ΈΑ͏ ։ൃ؀ڥͱຊ൪؀ڥͷ෼͚ํ

10. ▸ ຊ൪ӡ༻Λ͢Δʹ͋ͨͬͯ։ൃͱॾʑͷઃఆ͕ҧ͏ ▸ APIͷΤϯυϙΠϯτ ▸ firebaseͷΩʔ৘ใ ▸ ͳͲͳͲ… ։ൃ؀ڥͱຊ൪؀ڥͷ෼͚ํ(1) ▸

    react-native-configΛ࢖͏ ▸ .envϑΝΠϧΛ࡞੒ͯ͠Ϗϧυ࣌ʹࢦఆͯ͠੾ସ ▸ $ ENVFILE=.env.staging react-native run-ios ௨ৗͷReact Native։ൃͰ͸Ͳ͏͢Δͷ͔ʁ

11. ▸ 1. release-channelΛ࢖͏ ▸ publish / build͢Δࡍʹ--release-channel <environment>Ͱ੾ସ ▸ Constants.manifest.releaseChannel

    === “environment”Ͱ൑ผ ։ൃ؀ڥͱຊ൪؀ڥͷ෼͚ํ(2) Expo؀ڥԼͰ͸Ͳ͏ͨ͠ΒΑ͍ͷ͔ʁ EXPO.HOST exp publish —release-channel development development exp publish —release-channel production production

12. ▸ 2. app.jsonΛγϯϘϦοΫϦϯΫͰ੾ସ ▸ app.development.json / app.production.jsonΛ࡞੒ ▸ publish /

    build͢ΔࡍʹγϯϘϦοΫϦϯΫͰ੾ସ ▸ $ ln -fs app.development.json app.json && expo build:ios ▸ Constans.manifest.extra.hogeͱͯ͠औΓग़͠ ։ൃ؀ڥͱຊ൪؀ڥͷ෼͚ํ(3) Expo؀ڥԼͰ͸Ͳ͏ͨ͠ΒΑ͍ͷ͔ʁ APP.DEVELOPMENT.JSON APP.JSON APP.PRODUCTION.JSON ln -fs app.development.json app.json ln -fs app.production.json app.json expo build:ios -release-channel <environment>

13. EXPOͰຊ൪ӡ༻Λͯ͠ΈΑ͏ ଟݴޠରԠ

14. ▸ άϩʔόϧʹΞϓϦΛग़͍ͨ͠ ▸ Permission֬ೝ࣌ͷΞϥʔτจݴΛมߋ͍ͨ͠ ▸ ϗʔϜը໘ͰͷΞϓϦද໊ࣔΛݴޠ͝ͱʹมߋ͍ͨ͠ ▸ จݴΛݴޠ͝ͱʹมߋ͍ͨ͠ ▸ ͳͲͳͲ…

    ଟݴޠରԠ(1) ▸ Xcode্ͰinfoPlistΛϩʔΧϥΠζͯ͠ઃఆ ▸ Android Studio্Ͱstrings.xmlΛϩʔΧϥΠζͯ͠ઃఆ ௨ৗͷReact Native։ൃͰ͸Ͳ͏͢Δͷ͔ʁ

15. ▸ 1. app.jsonͷlocalesΛ࢖ͬͯύʔϛογϣϯμΠΞϩάΛมߋ ▸ ݴޠ͝ͱʹద༻͍ͤͨ͞infoPlistΛॻ͍ͨjsonͷύεΛࢦఆ ଟݴޠରԠ(2) ʙύʔϛογϣϯμΠΞϩάͳͲʙ Expo؀ڥԼͰ͸Ͳ͏ͨ͠ΒΑ͍ͷ͔ʁ app.json languages/ja.json

16. ▸ 2. ex-react-native-i18nΛ࢖ͬͯΞϓϦ಺ͷจݴΛϩʔΧϥΠζ ▸ ͪͳΈʹreact-i18next΋࢖༻Մೳ ଟݴޠରԠ(3) ʙΞϓϦ಺จݴͷϩʔΧϥΠζʙ Expo؀ڥԼͰ͸Ͳ͏ͨ͠ΒΑ͍ͷ͔ʁ src/i18n/ja.json src/i18n/en.json

    src/i18n/index.js src/screens/HomeScreen.js

17. EXPOͰຊ൪ӡ༻Λͯ͠ΈΑ͏ ΤϥʔτϥοΩϯά

18. ▸ ΞϓϦ͕Ϋϥογϡͨ͠ݪҼΛ୳Γ͍ͨ ▸ ωΠςΟϒίʔυ͕ݪҼͳͷ͔ʁ ▸ JSͰॻ͍ͨίʔυ͕ݪҼͳͷ͔ʁ ΤϥʔτϥοΩϯά(1) ▸ react-native-fabric(Crashlytics)Λ࢖͏ ▸

    react-native-sentryΛ࢖͏ ௨ৗͷReact Native։ൃͰ͸Ͳ͏͢Δͷ͔ʁ

19. ▸ ωΠςΟϒίʔυ෦෼͸ExpoͰแׅͯ͠ΔͷͰແࢹ ▸ sentry-expoΛ࢖ͬͯJS෦෼ͷΤϥʔτϥοΩϯάΛߦ͏ ΤϥʔτϥοΩϯά(2) Expo؀ڥԼͰ͸Ͳ͏ͨ͠ΒΑ͍ͷ͔ʁ App.js app.json

20. EXPOͰຊ൪ӡ༻Λͯ͠ΈΑ͏ CodePushతͳػೳͷ࢖͍ํ

21. ▸ ΞϓϦετΞʹਃ੥͠ͳͯ͘΋ΞοϓσʔτΛ͢Δ͜ͱ͕Մೳ ▸ https://www.appcenter.ms CODEPUSHతͳػೳͷ࢖͍ํ(1)

22. ▸ σϑΥϧτͰONʹͳ͍ͬͯΔͷͰઃఆෆཁ ▸ app.jsonͷupdatesͱ͍͏߲໨Λฤू͢Δ͜ͱͰOFFʹͰ͖Δ ▸ publish͢Δ͜ͱͰελϯυΞϩʔϯΞϓϦ͕Ξοϓσʔτ͞ΕΔ CODEPUSHతͳػೳͷ࢖͍ํ(2) Expo؀ڥԼͰ͸Ͳ͏ͨ͠ΒΑ͍ͷ͔ʁ EXPO.HOST exp

    publish —release-channel development exp publish —release-channel production development͕ߋ৽͞ΕΔ production͕ߋ৽͞ΕΔ ࠷ॳʹελϯυΞϩʔϯΞϓϦΛϏϧυͯ͠ ࣗ෼ͨͪʹ഑෍͓ͯ͘͠ͱ࣮ػ֬ೝ͕؆୯ʹ

23. ·ͱΊ ▸ ؀ڥͷ੾ସ ▸ -release-channelΛ࢖͏ ▸ app.jsonΛγϯϘϦοΫϦϯΫͰ੾Γସ͑ ▸ ଟݴޠରԠ ▸

    γεςϜ෦෼͸app.jsonͷlocalesΛ࢖༻ ▸ ΞϓϦ಺จݴ͸ex-react-native-i18nΛ࢖༻ ▸ ΤϥʔτϥοΩϯά ▸ JS෦෼ͷΈߦ͑͹Α͘sentryͷτϥοΩϯάίʔυΛsentry-expoͰຒΊࠐΉ ▸ CodePushతͳػೳ͸σϑΥϧτͰON ▸ ࠷ॳʹελϯυΞϩʔϯΞϓϦΛ഑෍ ▸ exp publishͰਵ࣌൓өͤ͞Δͱ࣮ػ֬ೝ͕؆୯ʹ

24. ༨ஊ μϯαʔ޲͚ͷಈըϓϥοτϑΥʔϜΞϓϦ࡞ͬͯ·͢ͷͰ ڵຯ͋Δํ͸࿩͠·͠ΐ͏ @ggtmtmgg͞Μͱ@AkiraTameto͞ΜͱҰॹʹ ExpoຊΛٕज़ॻల(10/8 ͏-71)Ͱग़͠·͢ ࠓճൃදͨ͠಺༰΋͋Γ·͢͠ೱ͍಺༰ͷ༧ఆͰ͢