Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native Expoで行うアプリの簡単最速運用
Search
Yu Watanabe
February 27, 2019
Programming
0
330
React Native Expoで行うアプリの簡単最速運用
Expoの利点を最大限使うためにcircleciを使いましょう的なお話です。
さらに自分が作ったexpo-qr-notifyというのを使えばもっと開発運用が楽になります的なお話です。
Yu Watanabe
February 27, 2019
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
Bolt 🤝 Expo
watanabeyu
0
300
npm packageとリリースとモノレポ
watanabeyu
0
63
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
900
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
33
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
640
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.2k
react-native-unimodulesのススメ
watanabeyu
1
6.5k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1.1k
Other Decks in Programming
See All in Programming
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
250
WindowInsetsだってテストしたい
ryunen344
1
190
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
エラーって何種類あるの?
kajitack
5
310
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
100
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
690
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
110
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
220
Featured
See All Featured
A better future with KSS
kneath
239
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Site-Speed That Sticks
csswizardry
10
660
4 Signs Your Business is Dying
shpigford
184
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Faster Mobile Websites
deanohume
307
31k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Cult of Friendly URLs
andyhume
79
6.5k
How GitHub (no longer) Works
holman
314
140k
Transcript
2019/02/27 ΘͨͳΏ͏ REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷ӡ༻
▸ ࣗݾհ ▸ React Native Expoͱ ▸ ExpoΛ͏ϝϦοτ/σϝϦοτ ▸ ։ൃӡ༻Λૉૣ͘؆୯ʹߦ͏ͨΊʹ
▸ circleciͷಋೖ ▸ expo-qr-notifyͷಋೖ ▸ ·ͱΊ ֓ཁ
ࣗݾհ(1) ΘͨͳΏ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։
▸ ࣄ༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ࣮ફExpo͍ͬͯ͏ຊΛڞஶͰ201812݄ʹग़൛
ࣗݾհ(2) ▸ https://www.gandh.jp ▸ 3໊(ΤϯδχΞࣗҰਓ)Ͱฏۉྸ30ͷγχΞձࣾ ▸ ετϦʔτΧϧνϟʔ × ITͳαʔϏεΛӡӦ ▸
ݱࡏͷϝΠϯࣄۀɿhttps://www.weddyweddy.net ▸ μϯαʔ͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ͍͢30ඵఔͷۂͰགྷͬͯಈըΛΞοϓ
REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷ӡ༻ React Native Expoͱ
REACT NATIVE EXPOͱ(1) ▸ React NativeΛݶΓͳ͘web։ൃʹ͚ۙͮΔͨΊͷͷ ▸ XcodeAndroid Studio͕ෆཁ ▸
JavaScriptͷΈͰ࡞Δ͜ͱ͕Մೳ
REACT NATIVE EXPOͱ(2) ▸ σόοάʹExpo Clientͱ͍͏ΞϓϦΛ֤ετΞ͔Βμϯϩʔυ ▸ ಉҰωοτϫʔΫ / ಉҰϩάΠϯΞΧϯτͰ࣮ߦՄೳ
▸ ΄ͱΜͲͷͰγʔϜϨεʹσόοΫՄೳ
REACT NATIVE EXPOͱ(3) ▸ Expo SnackͰWebϒϥβ্Ͱࢼ͢͜ͱ͕Մೳ ▸ ExpoΞΧϯτʹಉظͰ͖Δ ▸ γϛϡϨʔλଐͯ͠ΔͷͰϒϥβͷΈͰ։ൃ͕Մೳ
REACT NATIVE EXPOͱ(4) ▸ ओཁͳػೳʹରԠ ▸ Χϝϥ ▸ ԻಈըΛ࠶ੜը(Ի)ͨ͠ΓɺϝσΟΞϥΠϒϥϦͷΞΫηε ▸
֤छηϯαʔܥ ▸ ͳͲͳͲ ΄΅΄΅ͷΞϓϦ։ൃʹඞཁͳػೳʹରԠ
REACT NATIVE EXPOͱ(5) ▸ CodePushͷΑ͏ͳOTAΞοϓσʔτʹඪ४ରԠ ▸ configڥ͝ͱʹ؆୯ʹઃఆՄೳ ▸ app.jsonrelease-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
REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷ӡ༻ ExpoΛ͏ϝϦοτ/σϝϦοτ
EXPOΛ͏ϝϦοτ/σϝϦοτ(1) ʙϝϦοτʙ ▸ JSͷΈͳͷͰWebग़ͷΤϯδχΞ͕৮Γ͍͢ ▸ ͍͍ͪͪϏϧυ͢Δඞཁ͕ͳ͍ͷͰσόοά͕؆୯ ▸ ExpoଆͰίϯϙʔωϯτΛ։ൃͯ͘͠ΕͯΔͷͰϝϯςφϯε͕ෆඞཁ ▸ ΄΅΄΅ͷωΠςΟϒػೳʹରԠͯ͠Δ
▸ ίϯϑΟάͳͲϏϧυ͢ΔࡍʹjsonϑΝΠϧΛࢦఆ͢Δ͚ͩ ▸ OTAΞοϓσʔτରԠͳͷͰਃෆཁͰߋ৽Մೳ ▸ ূ໌ॻؔ࿈ͷཧΛߦͬͯ͘ΕΔ ▸ React NativeຊମͷΞοϓσʔτΛͯ͘͠ΕΔ
EXPOΛ͏ϝϦοτ/σϝϦοτ(2) ʙσϝϦοτʙ ▸ npmύοέʔδ͕JSͷΈͰॻ͔Ε͍ͯΔͷͰͳ͍ͱ͑ͳ͍ ▸ ExpoͰऔΓࠐΜͰ͍ΔSDKͰͳ͍ͱ͑ͳ͍ ▸ adjustReproͳͲ ▸ firebaseWeb
SDKͳͷͰϑϧػೳ͕͑ͳ͍ ▸ ExpoͰ༻ҙ͍ͯ͠ͳ͍ػೳ͕͑ͳ͍ ▸ BluetoothͳͲ ▸ Expoͷશͯͷίϯϙʔωϯτ͕όϯυϧʹؚ·Εͯ͠·͏ ▸ ৹ࠪ࣌ͷࠂؔ࿈ͷνΣοΫ ▸ ϑΝΠϧͷංେԽ ▸ ͍͟σλον͢ΔͱͳΔͱ͔ͳΓࠊ͕ॏ͘ͳͬͯ͠·͏ ▸ React NativeຊମͷΞοϓσʔτ͕͘ͳͬͯ͠·͏
EXPOΛ͏ϝϦοτ/σϝϦοτ(3) ʙEXPOͷ͍ॴʙ ▸ ExpoͰ༻ҙ͞Ε͍ͯΔͷͷΈͰ݁Ͱ͖Δ ▸ ࠂͳͲϏδωεతͳཁ݅ͷҙࢥܾఆ͕Ͱ͖Δ͔Ͳ͏͔ ▸ εϐʔυΛ༏ઌͯ͠ϓϩτλΠϐϯάఔͷؾ࣋ͪΛ࣋ͭ ▸ ͨͬͨΒνʔϜਓ૿ͯ͠ωΠςΟϒΛ࡞ΔΑ͏ʹ͢Δ
ҰਓͰ։ൃ͢Δ͙Β͍ͷؾ࣋ͪͩͱΑ͍͔
REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷ӡ༻ ։ൃӡ༻Λૉૣ͘؆୯ʹߦ͏ͨΊʹ
REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷ӡ༻ ࣮ػ֬ೝͷखؒΛ͔͚ͳ͍Α͏ʹ͍ͨ͠ OTAΞοϓσʔτΛޮΑ͍͍ͨ͘
REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷ӡ༻ circleciͷಋೖ
CIRCLECIͷಋೖ(1) git push git merge dev prod develop master expo
publish expo publish ֤branchʹϚʔδ͞ΕͨΒ OTAΞοϓσʔτ͞ΕΔ
CIRCLECIͷಋೖ(2) https://gist.github.com/watanabeyu/69c42b79800baa8691ac0447866a2252 ExpoͷΞΧϯτ໊/ύεϫʔυCI্ʹอଘ
CIRCLECIͷಋೖ(3) https://gist.github.com/watanabeyu/69c42b79800baa8691ac0447866a2252 release-channel͓ΑͼconfigΛࢦఆ
CIRCLECIͷಋೖ(4) https://gist.github.com/watanabeyu/69c42b79800baa8691ac0447866a2252
CIRCLECIͷಋೖ(5) ͏গ͠ศརʹͳΒͳ͍͔ʁ PRຖʹExpoΫϥΠΞϯτͰΞϓϦͷ֬ೝ͕Ͱ͖Δͱศར
REACT NATIVE EXPOͰߦ͏ΞϓϦͷ؆୯࠷ӡ༻ expo-qr-notifyͷಋೖ
EXPO-QR-NOTIFYͷಋೖ(1) git push git merge dev prod dev prod expo
publish expo publish publish࣌ʹ slackͱgithubʹ ௨ͯ͠΄͍͠ feature/xxx git merge
EXPO-QR-NOTIFYͷಋೖ(2) expo publish࣌ʹίϚϯυ࣮ߦͰ͖ΔͷΛར༻ͨ͠ύοέʔδ https://github.com/watanabeyu/expo-qr-notify/tree/master/example
EXPO-QR-NOTIFYͷಋೖ(3)
EXPO-QR-NOTIFYͷಋೖ(4)
EXPO-QR-NOTIFYͷಋೖ(5) release-channelΛcircleciͷڥมͰࢦఆ
EXPO-QR-NOTIFYͷಋೖ(6)
·ͱΊ ▸ Expo։ൃ͢Δ্ͰϝϦοτ͕ଟ͍͠σϝϦοτଟ͍ ▸ ཁ݅ʹͯ·Δͱͱͯ؆୯ ▸ ϓϩτλΠϐϯάతͳײ͙֮Β͍ͷํ͕Α͍ ▸ ։ൃ͓Αͼӡ༻Λগ͠Ͱૉૣ͘؆୯ʹ͢ΔͨΊʹ ▸
circleciΛಋೖ͢ΔͱϒϥϯνຖʹOTAΞοϓσʔτͰ͖Δ ▸ expo-qr-notifyΛಋೖ͢Δ͜ͱͰ։ൃ࣌ʹPRຖʹ֬ೝͰ͖Δ
͓ΘΓ