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
64
npm packageとリリースとモノレポ
Yu Watanabe
June 25, 2024
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
Bolt 🤝 Expo
watanabeyu
0
320
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
920
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
35
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
650
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.2k
react-native-unimodulesのススメ
watanabeyu
1
6.5k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1.1k
React Native Expoで行うアプリの簡単最速運用
watanabeyu
0
330
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
How STYLIGHT went responsive
nonsquared
100
5.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
A Tale of Four Properties
chriscoyier
160
23k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
A better future with KSS
kneath
238
17k
Designing for Performance
lara
610
69k
Producing Creativity
orderedlist
PRO
346
40k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Facilitating Awesome Meetings
lara
54
6.5k
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։ൃ͍ͯ͠Δͱ͍ ͏ঢ়ଶͰͷԸܙେ͖͍ɻ
- ͓ΘΓ -