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
330
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
940
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
35
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
660
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.3k
react-native-unimodulesのススメ
watanabeyu
1
6.5k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1.1k
React Native Expoで行うアプリの簡単最速運用
watanabeyu
0
330
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Statistics for Hackers
jakevdp
799
220k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Why Our Code Smells
bkeepers
PRO
339
57k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Music & Morning Musume
bryan
46
6.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
The World Runs on Bad Software
bkeepers
PRO
71
11k
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։ൃ͍ͯ͠Δͱ͍ ͏ঢ়ଶͰͷԸܙେ͖͍ɻ
- ͓ΘΓ -