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
63
npm packageとリリースとモノレポ
Yu Watanabe
June 25, 2024
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
Bolt 🤝 Expo
watanabeyu
0
310
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
React Native Expoで行うアプリの簡単最速運用
watanabeyu
0
330
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
KATA
mclloyd
30
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Writing Fast Ruby
sferik
628
62k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
BBQ
matthewcrist
89
9.7k
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։ൃ͍ͯ͠Δͱ͍ ͏ঢ়ଶͰͷԸܙେ͖͍ɻ
- ͓ΘΓ -