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
npm packageとリリースとモノレポ
Search
Yu Watanabe
June 25, 2024
0
30
npm packageとリリースとモノレポ
Yu Watanabe
June 25, 2024
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
690
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1k
gandhの紹介です
watanabeyu
0
26
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
570
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.1k
react-native-unimodulesのススメ
watanabeyu
1
6.2k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1k
React Native Expoで行うアプリの簡単最速運用
watanabeyu
0
300
読みやすいコードの書き方のススメ
watanabeyu
7
4.6k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Designing with Data
zakiwarfel
98
5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
130
Done Done
chrislema
180
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
Practical Orchestrator
shlominoach
185
10k
Music & Morning Musume
bryan
46
6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
158
15k
Transcript
npm packageͱϦϦʔεͱ ϞϊϨϙ 2024/06/25 ΘͨͳΏ͏
ຊεϥΠυͷλʔήοτ ෳϦϙδτϦΛޙ͔ΒϞϊϨϙʹ͍ͨ͠ਓ
֓ཁ • ͡Ίʹ • ࣗݾհ • ϞϊϨϙͱϙϦϨϙͷҧ͍ • ࠓ·Ͱͷߏ •
ϙϦϨϙ͔ΒϞϊϨϙ • ͜ͷύλʔϯͩͱͲ͏͢Δ͔ • ·ͱΊ
͡Ίʹ npm packageͰGraphQLͷܕใΛཧ͍͚ͯͨ͠Ͳ ϞϊϨϙʹ͢Δ͜ͱͰpackageԽ͕ෆཁʹͳͬͨ͠ σϓϩΠͳΒͼʹGitHub Actions͕؆୯ʹͳͬͨ
ࣗݾհ ໊લɿΘͨͳΏ͏ ॴଐɿ - גࣜձࣾBLUEISHɿຊۀ - ߹ಉձࣾAlmoha - ٕज़ސͨ͠Γଞͷձࣾͷ͓ख͍ͳͲ… Xɿ@hmktsu
/ GitHubɿ@watanabeyu
גࣜձࣾBLUEISH डୗ͓Αͼࣗࣾࣄۀ डୗ - େखΫϥΠΞϯτΛத৺ ࣗࣾࣄۀ - ੜAIΛ׆༻ͨ͠αʔϏεΛෳల։ - ঃʑʹࣗࣾࣄۀͷൺΛߴΊ͍ͯ͘
߹ಉձࣾAlmoha 4ਓ͘Β͍Ͱࡉʑͱ ਓࣄܥͷSaasͷ։ൃ - ৫ਤ࡞ͷαʔϏε - ৫αʔϕΠͷαʔϏε
ϞϊϨϙͱϙϦϨϙͷҧ͍
ϞϊϨϙͱ • Monorepo(ϞϊϨϙ)ͱɺΞϓϦέʔγϣϯϚΠΫϩαʔϏεͷશ ίʔυΛ୯ҰͷϞϊϦγοΫͳϦϙδτϦ (ී௨ Git) ʹอଘ͢Δύ λʔϯΛࢦ͠·͢ɻ Ұൠతʹɺ͞·͟·ͳΞϓϦ ίϯϙʔωϯτͷ
ίʔυΛαϒϑΥϧμʔʹׂ͠ɺ৽ػೳόάमਖ਼ʹ Git ϫʔΫϑ ϩʔΛ༻͠·͢ɻ Ҿ༻ɿhttps://circleci.com/ja/blog/monorepo-dev-practices/
ϙϦϨϙͱ • ϞϊϨϙͱٯʹෳͷϦϙδτϦʹ͔Ε͍ͯΔঢ়ଶͷ͜ͱ • service-apiservice-webͳͲ
ͦΕͧΕͷಛʹ͍ͭͯ 1PMZSFQP@
[email protected]
@$PNQBSJTPO ಛ ϞϊϨϙ ϙϦϨϙ ϦϙδτϦ ͯ͢ͷϓϩδΣΫτΛ୯ҰͷϦϙδτϦ ֤ϓϩδΣΫτ͝ͱʹݸผͷϦϙδτϦ ಠཱੑ ͍
ߴ͍ ཧͷෳࡶ͞ ͍ ߴ͍ ґଘؔཧ ༰қ ͍͠߹͕͋Δ ϦϦʔεͷಉظ ༰қ ͍͠߹͕͋Δ
ࠓ·Ͱͷߏ
ࠓ·ͰͷϦϙδτϦߏ • xxx-web͓Αͼxxx-apiϦϙδτϦΛ༻ҙ • apiϦϙδτϦʹ͓͍ͯGitHub PackagesΛͬͯՌΛύοέʔ δཧ • ՌΛnpm installͯ͠webϦϙδτϦͰ༻
࣮ࡍʹࣗϙϦϨϙͱͯ͠ϦϙδτϦׂ͍ͨ͠
ࠓ·ͰͷϦϙδτϦߏ apiϦϙδτϦ webϦϙδτϦ GitHub Package Amazon ECS vercel Elastic Beanstalk
npm install apiݺͼग़͠ build + publish deploy
ࠓ·ͰͷϦϙδτϦߏʹ͓͚ΔϦϦʔε • web͓ΑͼapiͱʹϦϦʔεΛ͍ͨ͠ • apiΛpublishͯ͠deploy͔ͯ͠ΒɺwebΛσϓϩΠ • webͷΈϦϦʔεΛ͍ͨ͠ • ಛʹؾʹͤͣσϓϩΠ •
apiͷΈϦϦʔεΛ͍ͨ͠ • GraphQLͷschemaมߋͳͲ͕ൃੜ͠ͳ͍߹ͷΈՄೳ
ࠓ·ͰͷϦϙδτϦߏͰͷਏ͍ͱ͜Ζ • npm packageͷόʔδϣϯཧ • ϩʔΧϧͰͳ͍͕ɺPR্Ͱଘࡏ͠ͳ͍όʔδϣϯͳͷͰ ActionsͷΤϥʔ͕ຖճग़ͯ͠·͏ • npm publish͢Δͷ͍ͩͿݫີʹΒͳ͍ͱ͍͚ͳ͍
• apiͷϦϦʔε͕ྃ͠ͳ͍ͱɺwebͷํͷϦϦʔε͕Ͱ͖ͳ͍ • webͷϦϦʔε࡞ۀ͕ඞཁʹͳΔͷͰPCʹషΓ͘ඞཁ͋Γ
ࠓ·ͰͷϦϙδτϦߏͰͷਏ͍ͱ͜Ζ • ԿΑΓϦϦʔεʹऔΓֻ͔Δίετ͕ߴ͗͢Δ • ؔ࿈͢ΔGitHub Actions͕Ͳ͏ͩ͜͏ͩ • APIͬͯϦϦʔεͨ͠Μ͚ͩͬͲ͏͚ͩͬӠʑ… ࣈ໘Ҏ্ʹਫ਼ਆతίετ͕͔͔Γ͗͢ΔͷΛͲ͏ʹ͔͍ͨ͠
ϙϦϨϙ͔ΒϞϊϨϙ
࣮ࡍͷͱ͜ΖϞϊϨϙͷํָ͕͡Όͳ͍ͷ͔ • npm packageͷόʔδϣϯཧ • PR࣌ͷweb͓ΑͼapiσΟϨΫτϦͰݟΔͷͰɺΤϥʔ͓͖ͳ͍ • npm publish͕ͳ͘ͳΔͷͰɺ؇͍ཧʹͰ͖Δ •
ϦϦʔεGitHub ActionsΛ͔ͬ͠ΓͱΊϘλϯ1ͭͰऴྃ ԿΑΓશһapiwebTypeScriptͰ։ൃΛ͍ͯ͠Δ
ϞϊϨϙʹͨ͠ཧ༝ • npm packageͷѻ͍͕໘ • όʔδϣϯཧɺpublishݫີ • apiͱwebͷσϓϩΠॱ൪ • શһapiweb։ൃ͍ͯ͠Δ͠…ͳͲͳͲ
ϞϊϨϙԽ • turborepoΛ༻ͨ͠౷߹ͨ͠ϦϙδτϦͷ࡞ • turborepoͷςϯϓϨʔτΛ༻ • appsԼʹwebͱapiϦϙδτϦͷத • ϑΥϧμຖʹઃఆͨ͠eslint͕ద༻͞ΕΔΑ͏ʹ •
apiϦϙδτϦʹ͋ΔdockerΛrootʹ • ֤ϦϙδτϦͰ༻͍ͯͨ͠GitHub ActionsscriptΛrootʹҠಈ + मਖ਼ • ϏϧυΒσϓϩΠΒͳΜΒ…
͜ͷύλʔϯͩͱͲ͏͢Δ͔
Go(TypeScriptҎ֎) + Next.js(React)ύλʔϯ • APIͷܕใΛͲ͏͢Δ͔ • openapi.yaml͕ଘࡏ͢ΔͷͰ͋ΕϞϊϨϙ • npm workspaceͳͲΛΘͣͰྑ͍
• npm scriptsͰ͏·͘αʔόʔଆʹ͋Δopenapi.yamlΛऔΓࠐΉ • codegenతͳײ͡ͰແཧͳΒ͚ͯྑ͍ͱࢥ͏
ձࣾͷαʔϏεશ෦ೖΕΔ͖͔ύλʔϯ • αʔϏε୯ҐͰϦϙδτϦΛ͚Δ͖ • ผαʔϏεͷͷಉҰʹೖΕΔඞཁͳ͍ • ผαʔϏεͷAPIΛୟ͘ʹͯ͠ৗʹͦͷܕใ͕શͯਖ਼͋͘͠Δඞཁ ͳ͍ • APIͳͷͰୟ͘༰ݶΒΕΔ͠֎෦APIͱͯ͠ެ։͢ΔͳΒόʔ
δϣχϯάͱ͔Λ͢ΔͳͲ • ϦϦʔε࡞ۀʹӨڹ͕͋Δͱ͜Ζ͡Όͳ͍ͷͰ͚Δ͖
supabaseͱ͔ fi rebaseͰ݁ͯ͠Δύλʔϯ • ϞϊϨϙͱͯ͠·ͳ͍͍ͯ͘Μ͡Όͳ͍͔ • ͨͩ͠React NativeΛͬͯΞϓϦΔͳͲɺಉαʔϏεͰܕ ใΛ͍·Θ͍ͨ͠߹ϞϊϨϙʹ͢Δ
React NativeؔΘͬͯ͘Δύλʔϯ • React NativeͳΒͼʹreact-native-web͕Ͳ͏ؔΘͬͯ͘Δ͔ • react-native-webΛͬͯڞ௨ͷuiύʔπΛ࡞Δͱ͍͏ํOKͩ ͕ɺ࡞Γํ͕͋·ΓΑΖ͘͠ͳ͍ͱ݁ՌnohoistͳͲ͕සൃ • ຶ݁߹ʹͳΒͳ͍Α͏ʹઃܭΛ͏·͘ߟ͑ΕΔͳΒ
submoduleͱ͔ͰͳΜͱ͔ͯ͠Δύλʔϯ • Ͳ͕͜ϘτϧωοΫͱͳΔͷ͔ • ϦϦʔε࡞ۀͳͷ͔ͦΕͱҧ͏ͱ͜Ζͳͷ͔ • ϞϊϨϙʹͯ͠վળͨ͠߹ͷίετɺ͜ͷ··Ͱͷίετͱͷ݉Ͷ ߹͍ʹͳΔͱࢥ͏
·ͱΊ
·ͱΊ ओʹnpm packageͷཧɺϦϦʔε࡞ۀͷ ࡶ͞Λཧ༝ʹϞϊϨϙԽΛͨ͠ɻ TypeScript + શһwebapi։ൃ͍ͯ͠Δͱ͍ ͏ঢ়ଶͰͷԸܙେ͖͍ɻ
- ͓ΘΓ -