npm packageとリリースとモノレポ

Transcript

1. npm packageͱϦϦʔεͱ ϞϊϨϙ 2024/06/25 Θͨͳ΂Ώ͏
2. ຊεϥΠυͷλʔήοτ ෳ਺ϦϙδτϦΛޙ͔ΒϞϊϨϙʹ͍ͨ͠ਓ
3. ֓ཁ • ͸͡Ίʹ • ࣗݾ঺հ • ϞϊϨϙͱϙϦϨϙͷҧ͍ • ࠓ·Ͱͷߏ੒ • ϙϦϨϙ͔ΒϞϊϨϙ΁ • ͜ͷύλʔϯͩͱͲ͏͢Δ͔ • ·ͱΊ
4. ͸͡Ίʹ npm packageͰGraphQLͷܕ৘ใΛ؅ཧ͍͚ͯͨ͠Ͳ ϞϊϨϙʹ͢Δ͜ͱͰpackageԽ͕ෆཁʹͳͬͨ͠ σϓϩΠͳΒͼʹGitHub Actions͕؆୯ʹͳͬͨ
5. ࣗݾ঺հ ໊લɿΘͨͳ΂Ώ͏ ॴଐɿ - גࣜձࣾBLUEISHɿຊۀ - ߹ಉձࣾAlmoha - ٕज़ސ໰ͨ͠Γଞͷձࣾͷ͓ख఻͍ͳͲ… Xɿ@hmktsu / GitHubɿ@watanabeyu
6. גࣜձࣾBLUEISH डୗ͓Αͼࣗࣾࣄۀ डୗ - େखΫϥΠΞϯτΛத৺ ࣗࣾࣄۀ - ੜ੒AIΛ׆༻ͨ͠αʔϏεΛෳ਺ల։ - ঃʑʹࣗࣾࣄۀͷൺ཰ΛߴΊ͍ͯ͘
7. ߹ಉձࣾAlmoha 4ਓ͘Β͍Ͱࡉʑͱ ਓࣄܥͷSaasͷ։ൃ - ૊৫ਤ࡞੒ͷαʔϏε - ૊৫αʔϕΠͷαʔϏε
8. ϞϊϨϙͱϙϦϨϙͷҧ͍
9. ϞϊϨϙͱ͸ • Monorepo(ϞϊϨϙ)ͱ͸ɺΞϓϦέʔγϣϯ΍ϚΠΫϩαʔϏεͷશ ίʔυΛ୯ҰͷϞϊϦγοΫͳϦϙδτϦ (ී௨͸ Git) ʹอଘ͢Δύ λʔϯΛࢦ͠·͢ɻ Ұൠతʹ͸ɺ͞·͟·ͳΞϓϦ ίϯϙʔωϯτͷ ίʔυΛαϒϑΥϧμʔʹ෼ׂ͠ɺ৽ػೳ΍όάमਖ਼ʹ͸ Git ϫʔΫϑ ϩʔΛ࢖༻͠·͢ɻ Ҿ༻ɿhttps://circleci.com/ja/blog/monorepo-dev-practices/
10. ϙϦϨϙͱ͸ • ϞϊϨϙͱ͸ٯʹෳ਺ͷϦϙδτϦʹ෼͔Ε͍ͯΔঢ়ଶͷ͜ͱ • service-api΍service-webͳͲ
11. ͦΕͧΕͷಛ௃ʹ͍ͭͯ 1PMZSFQP@WT@.POPSFQP@$PNQBSJTPO ಛ௃ ϞϊϨϙ ϙϦϨϙ ϦϙδτϦ਺ ͢΂ͯͷϓϩδΣΫτΛ୯ҰͷϦϙδτϦ ֤ϓϩδΣΫτ͝ͱʹݸผͷϦϙδτϦ ಠཱੑ ௿͍ ߴ͍ ؅ཧͷෳࡶ͞ ௿͍ ߴ͍ ґଘؔ܎؅ཧ ༰қ ೉͍͠৔߹͕͋Δ ϦϦʔεͷಉظ ༰қ ೉͍͠৔߹͕͋Δ
12. ࠓ·Ͱͷߏ੒
13. ࠓ·ͰͷϦϙδτϦߏ੒ • xxx-web͓Αͼxxx-apiϦϙδτϦΛ༻ҙ • apiϦϙδτϦʹ͓͍ͯGitHub PackagesΛ࢖ͬͯ੒Ռ෺Λύοέʔ δ؅ཧ • ੒Ռ෺Λnpm installͯ͠webϦϙδτϦͰ࢖༻ ࣮ࡍʹࣗ෼΋ϙϦϨϙͱͯ͠ϦϙδτϦ͸෼ׂ͍ͨ͠೿
14. ࠓ·ͰͷϦϙδτϦߏ੒ apiϦϙδτϦ webϦϙδτϦ GitHub Package Amazon ECS vercel Elastic Beanstalk npm install apiݺͼग़͠ build + publish deploy
15. ࠓ·ͰͷϦϙδτϦߏ੒ʹ͓͚ΔϦϦʔε • web͓Αͼapiͱ΋ʹϦϦʔεΛ͍ͨ͠ • apiΛpublishͯ͠deploy͔ͯ͠ΒɺwebΛσϓϩΠ • webͷΈϦϦʔεΛ͍ͨ͠ • ಛʹؾʹͤͣσϓϩΠ • apiͷΈϦϦʔεΛ͍ͨ͠ • GraphQLͷschemaมߋͳͲ͕ൃੜ͠ͳ͍৔߹ͷΈՄೳ
16. ࠓ·ͰͷϦϙδτϦߏ੒Ͱͷਏ͍ͱ͜Ζ • npm packageͷόʔδϣϯ؅ཧ • ϩʔΧϧͰ͸໰୊ͳ͍͕ɺPR্Ͱ͸ଘࡏ͠ͳ͍όʔδϣϯͳͷͰ ActionsͷΤϥʔ͕ຖճग़ͯ͠·͏ • npm publish͢Δͷ΋͍ͩͿݫີʹ΍Βͳ͍ͱ͍͚ͳ͍ • apiͷϦϦʔε͕׬ྃ͠ͳ͍ͱɺwebͷํͷϦϦʔε͕Ͱ͖ͳ͍ • webͷϦϦʔε࡞ۀ͕ඞཁʹͳΔͷͰPCʹషΓ෇͘ඞཁ͋Γ
17. ࠓ·ͰͷϦϙδτϦߏ੒Ͱͷਏ͍ͱ͜Ζ • ԿΑΓ΋ϦϦʔεʹऔΓֻ͔Δίετ͕ߴ͗͢Δ • ؔ࿈͢ΔGitHub Actions͕Ͳ͏ͩ͜͏ͩ • APIͬͯϦϦʔεͨ͠Μ͚ͩͬͲ͏͚ͩͬӠʑ… ࣈ໘Ҏ্ʹਫ਼ਆతίετ͕͔͔Γ͗͢ΔͷΛͲ͏ʹ͔͍ͨ͠
18. ϙϦϨϙ͔ΒϞϊϨϙ΁
19. ࣮ࡍͷͱ͜ΖϞϊϨϙͷํָ͕͡Όͳ͍ͷ͔ • npm packageͷόʔδϣϯ؅ཧ • PR࣌ͷweb͓ΑͼapiσΟϨΫτϦͰݟΔͷͰɺΤϥʔ΋͓͖ͳ͍ • npm publish͕ͳ͘ͳΔͷͰɺ؇͍؅ཧʹͰ͖Δ • ϦϦʔε΋GitHub ActionsΛ͔ͬ͠Γͱ૊Ί͹Ϙλϯ1ͭͰऴྃ ԿΑΓ΋શһapi΋web΋TypeScriptͰ։ൃΛ͍ͯ͠Δ
20. ϞϊϨϙʹͨ͠ཧ༝ • npm packageͷѻ͍͕໘౗ • όʔδϣϯ؅ཧɺpublishݫີ໰୊ • apiͱwebͷσϓϩΠॱ൪໰୊ • શһapi΋web΋։ൃ͍ͯ͠Δ͠…ͳͲͳͲ
21. ϞϊϨϙԽ • turborepoΛ࢖༻ͨ͠౷߹ͨ͠ϦϙδτϦͷ࡞੒ • turborepoͷςϯϓϨʔτΛ࢖༻ • apps഑ԼʹwebͱapiϦϙδτϦͷத਎ • ϑΥϧμຖʹઃఆͨ͠eslint͕ద༻͞ΕΔΑ͏ʹ • apiϦϙδτϦʹ͋ΔdockerΛrootʹ • ֤ϦϙδτϦͰ࢖༻͍ͯͨ͠GitHub Actions΍scriptΛrootʹҠಈ + मਖ਼ • Ϗϧυ΍ΒσϓϩΠ΍ΒͳΜ΍Β…
22. ͜ͷύλʔϯͩͱͲ͏͢Δ͔
23. Go(TypeScriptҎ֎) + Next.js(React)ύλʔϯ • APIͷܕ৘ใΛͲ͏͢Δ͔ • openapi.yaml͕ଘࡏ͢ΔͷͰ͋Ε͹ϞϊϨϙ೿ • npm workspaceͳͲΛ࢖ΘͣͰ΋ྑ͍ • npm scriptsͰ͏·͘αʔόʔଆʹ͋Δopenapi.yamlΛऔΓࠐΉ • codegenతͳײ͡Ͱ΋ແཧͳΒ͹෼͚ͯ΋ྑ͍ͱࢥ͏
24. ձࣾͷαʔϏεશ෦ೖΕΔ΂͖͔ύλʔϯ • αʔϏε୯ҐͰϦϙδτϦΛ෼͚Δ΂͖೿ • ผαʔϏεͷ΋ͷ΋ಉҰʹೖΕΔඞཁ͸ͳ͍ • ผαʔϏεͷAPIΛୟ͘ʹͯ͠΋ৗʹͦͷܕ৘ใ͕શͯਖ਼͋͘͠Δඞཁ ͸ͳ͍ • APIͳͷͰୟ͘಺༰΋ݶΒΕΔ͠֎෦APIͱͯ͠ެ։͢ΔͳΒ͹όʔ δϣχϯάͱ͔Λ޻෉͢ΔͳͲ • ϦϦʔε࡞ۀʹӨڹ͕͋Δͱ͜Ζ͡Όͳ͍ͷͰ෼͚Δ΂͖೿
25. supabaseͱ͔ fi rebaseͰ׬݁ͯ͠Δύλʔϯ • ϞϊϨϙͱͯ͠૊·ͳͯ͘΋͍͍Μ͡Όͳ͍͔೿ • ͨͩ͠React NativeΛ࢖ͬͯΞϓϦ΋΍ΔͳͲɺಉαʔϏε಺Ͱܕ৘ ใΛ࢖͍·Θ͍ͨ͠৔߹͸ϞϊϨϙʹ͢Δ೿
26. React NativeؔΘͬͯ͘Δύλʔϯ • React NativeͳΒͼʹreact-native-web͕Ͳ͏ؔΘͬͯ͘Δ͔ • react-native-webΛ࢖ͬͯڞ௨ͷuiύʔπΛ࡞Δͱ͍͏ํ਑͸OKͩ ͕ɺ࡞Γํ͕͋·ΓΑΖ͘͠ͳ͍ͱ݁Ռnohoist໰୊ͳͲ͕සൃ • ຶ݁߹ʹͳΒͳ͍Α͏ʹઃܭΛ͏·͘ߟ͑ΕΔͳΒ͹೿
27. submoduleͱ͔ͰͳΜͱ͔ͯ͠Δύλʔϯ • Ͳ͕͜ϘτϧωοΫͱͳΔͷ͔ • ϦϦʔε࡞ۀͳͷ͔ͦΕͱ΋ҧ͏ͱ͜Ζͳͷ͔ • ϞϊϨϙʹͯ͠վળͨ͠৔߹ͷίετɺ͜ͷ··Ͱͷίετͱͷ݉Ͷ ߹͍ʹͳΔͱࢥ͏
28. ·ͱΊ
29. ·ͱΊ ओʹnpm packageͷ؅ཧ΍ɺϦϦʔε࡞ۀͷ൥ ࡶ͞Λཧ༝ʹϞϊϨϙԽΛͨ͠ɻ TypeScript + શһweb΋api΋։ൃ͍ͯ͠Δͱ͍ ͏ঢ়ଶͰͷԸܙ΋େ͖͍ɻ
30. - ͓ΘΓ -