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
38
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
720
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1k
gandhの紹介です
watanabeyu
0
26
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
590
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.2k
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
Gamification - CAS2011
davidbonilla
80
5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Into the Great Unknown - MozCon
thekraken
31
1.5k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Making the Leap to Tech Lead
cromwellryan
132
8.9k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Navigating Team Friction
lara
183
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
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։ൃ͍ͯ͠Δͱ͍ ͏ঢ়ଶͰͷԸܙେ͖͍ɻ
- ͓ΘΓ -