Tweet
Tweet

Slide 1

Slide 1 text

npm packageͱϦϦʔεͱ ϞϊϨϙ 2024/06/25 Θͨͳ΂Ώ͏

Slide 2

Slide 2 text

ຊεϥΠυͷλʔήοτ ෳ਺ϦϙδτϦΛޙ͔ΒϞϊϨϙʹ͍ͨ͠ਓ

Slide 3

Slide 3 text

֓ཁ • ͸͡Ίʹ • ࣗݾ঺հ • ϞϊϨϙͱϙϦϨϙͷҧ͍ • ࠓ·Ͱͷߏ੒ • ϙϦϨϙ͔ΒϞϊϨϙ΁ • ͜ͷύλʔϯͩͱͲ͏͢Δ͔ • ·ͱΊ

Slide 4

Slide 4 text

͸͡Ίʹ npm packageͰGraphQLͷܕ৘ใΛ؅ཧ͍͚ͯͨ͠Ͳ ϞϊϨϙʹ͢Δ͜ͱͰpackageԽ͕ෆཁʹͳͬͨ͠ σϓϩΠͳΒͼʹGitHub Actions͕؆୯ʹͳͬͨ

Slide 5

Slide 5 text

ࣗݾ঺հ ໊લɿΘͨͳ΂Ώ͏ ॴଐɿ - גࣜձࣾBLUEISHɿຊۀ - ߹ಉձࣾAlmoha - ٕज़ސ໰ͨ͠Γଞͷձࣾͷ͓ख఻͍ͳͲ… Xɿ@hmktsu / GitHubɿ@watanabeyu

Slide 6

Slide 6 text

גࣜձࣾBLUEISH डୗ͓Αͼࣗࣾࣄۀ डୗ - େखΫϥΠΞϯτΛத৺ ࣗࣾࣄۀ - ੜ੒AIΛ׆༻ͨ͠αʔϏεΛෳ਺ల։ - ঃʑʹࣗࣾࣄۀͷൺ཰ΛߴΊ͍ͯ͘

Slide 7

Slide 7 text

߹ಉձࣾAlmoha 4ਓ͘Β͍Ͱࡉʑͱ ਓࣄܥͷSaasͷ։ൃ - ૊৫ਤ࡞੒ͷαʔϏε - ૊৫αʔϕΠͷαʔϏε

Slide 8

Slide 8 text

ϞϊϨϙͱϙϦϨϙͷҧ͍

Slide 9

Slide 9 text

ϞϊϨϙͱ͸ • Monorepo(ϞϊϨϙ)ͱ͸ɺΞϓϦέʔγϣϯ΍ϚΠΫϩαʔϏεͷશ ίʔυΛ୯ҰͷϞϊϦγοΫͳϦϙδτϦ (ී௨͸ Git) ʹอଘ͢Δύ λʔϯΛࢦ͠·͢ɻ Ұൠతʹ͸ɺ͞·͟·ͳΞϓϦ ίϯϙʔωϯτͷ ίʔυΛαϒϑΥϧμʔʹ෼ׂ͠ɺ৽ػೳ΍όάमਖ਼ʹ͸ Git ϫʔΫϑ ϩʔΛ࢖༻͠·͢ɻ Ҿ༻ɿhttps://circleci.com/ja/blog/monorepo-dev-practices/

Slide 10

Slide 10 text

ϙϦϨϙͱ͸ • ϞϊϨϙͱ͸ٯʹෳ਺ͷϦϙδτϦʹ෼͔Ε͍ͯΔঢ়ଶͷ͜ͱ • service-api΍service-webͳͲ

Slide 11

Slide 11 text

ͦΕͧΕͷಛ௃ʹ͍ͭͯ 1PMZSFQP@[email protected]@$PNQBSJTPO ಛ௃ ϞϊϨϙ ϙϦϨϙ ϦϙδτϦ਺ ͢΂ͯͷϓϩδΣΫτΛ୯ҰͷϦϙδτϦ ֤ϓϩδΣΫτ͝ͱʹݸผͷϦϙδτϦ ಠཱੑ ௿͍ ߴ͍ ؅ཧͷෳࡶ͞ ௿͍ ߴ͍ ґଘؔ܎؅ཧ ༰қ ೉͍͠৔߹͕͋Δ ϦϦʔεͷಉظ ༰қ ೉͍͠৔߹͕͋Δ

Slide 12

Slide 12 text

ࠓ·Ͱͷߏ੒

Slide 13

Slide 13 text

ࠓ·ͰͷϦϙδτϦߏ੒ • xxx-web͓Αͼxxx-apiϦϙδτϦΛ༻ҙ • apiϦϙδτϦʹ͓͍ͯGitHub PackagesΛ࢖ͬͯ੒Ռ෺Λύοέʔ δ؅ཧ • ੒Ռ෺Λnpm installͯ͠webϦϙδτϦͰ࢖༻ ࣮ࡍʹࣗ෼΋ϙϦϨϙͱͯ͠ϦϙδτϦ͸෼ׂ͍ͨ͠೿

Slide 14

Slide 14 text

ࠓ·ͰͷϦϙδτϦߏ੒ apiϦϙδτϦ webϦϙδτϦ GitHub Package Amazon ECS vercel Elastic Beanstalk npm install apiݺͼग़͠ build + publish deploy

Slide 15

Slide 15 text

ࠓ·ͰͷϦϙδτϦߏ੒ʹ͓͚ΔϦϦʔε • web͓Αͼapiͱ΋ʹϦϦʔεΛ͍ͨ͠ • apiΛpublishͯ͠deploy͔ͯ͠ΒɺwebΛσϓϩΠ • webͷΈϦϦʔεΛ͍ͨ͠ • ಛʹؾʹͤͣσϓϩΠ • apiͷΈϦϦʔεΛ͍ͨ͠ • GraphQLͷschemaมߋͳͲ͕ൃੜ͠ͳ͍৔߹ͷΈՄೳ

Slide 16

Slide 16 text

ࠓ·ͰͷϦϙδτϦߏ੒Ͱͷਏ͍ͱ͜Ζ • npm packageͷόʔδϣϯ؅ཧ • ϩʔΧϧͰ͸໰୊ͳ͍͕ɺPR্Ͱ͸ଘࡏ͠ͳ͍όʔδϣϯͳͷͰ ActionsͷΤϥʔ͕ຖճग़ͯ͠·͏ • npm publish͢Δͷ΋͍ͩͿݫີʹ΍Βͳ͍ͱ͍͚ͳ͍ • apiͷϦϦʔε͕׬ྃ͠ͳ͍ͱɺwebͷํͷϦϦʔε͕Ͱ͖ͳ͍ • webͷϦϦʔε࡞ۀ͕ඞཁʹͳΔͷͰPCʹషΓ෇͘ඞཁ͋Γ

Slide 17

Slide 17 text

ࠓ·ͰͷϦϙδτϦߏ੒Ͱͷਏ͍ͱ͜Ζ • ԿΑΓ΋ϦϦʔεʹऔΓֻ͔Δίετ͕ߴ͗͢Δ • ؔ࿈͢ΔGitHub Actions͕Ͳ͏ͩ͜͏ͩ • APIͬͯϦϦʔεͨ͠Μ͚ͩͬͲ͏͚ͩͬӠʑ… ࣈ໘Ҏ্ʹਫ਼ਆతίετ͕͔͔Γ͗͢ΔͷΛͲ͏ʹ͔͍ͨ͠

Slide 18

Slide 18 text

ϙϦϨϙ͔ΒϞϊϨϙ΁

Slide 19

Slide 19 text

࣮ࡍͷͱ͜ΖϞϊϨϙͷํָ͕͡Όͳ͍ͷ͔ • npm packageͷόʔδϣϯ؅ཧ • PR࣌ͷweb͓ΑͼapiσΟϨΫτϦͰݟΔͷͰɺΤϥʔ΋͓͖ͳ͍ • npm publish͕ͳ͘ͳΔͷͰɺ؇͍؅ཧʹͰ͖Δ • ϦϦʔε΋GitHub ActionsΛ͔ͬ͠Γͱ૊Ί͹Ϙλϯ1ͭͰऴྃ ԿΑΓ΋શһapi΋web΋TypeScriptͰ։ൃΛ͍ͯ͠Δ

Slide 20

Slide 20 text

ϞϊϨϙʹͨ͠ཧ༝ • npm packageͷѻ͍͕໘౗ • όʔδϣϯ؅ཧɺpublishݫີ໰୊ • apiͱwebͷσϓϩΠॱ൪໰୊ • શһapi΋web΋։ൃ͍ͯ͠Δ͠…ͳͲͳͲ

Slide 21

Slide 21 text

ϞϊϨϙԽ • turborepoΛ࢖༻ͨ͠౷߹ͨ͠ϦϙδτϦͷ࡞੒ • turborepoͷςϯϓϨʔτΛ࢖༻ • apps഑ԼʹwebͱapiϦϙδτϦͷத਎ • ϑΥϧμຖʹઃఆͨ͠eslint͕ద༻͞ΕΔΑ͏ʹ • apiϦϙδτϦʹ͋ΔdockerΛrootʹ • ֤ϦϙδτϦͰ࢖༻͍ͯͨ͠GitHub Actions΍scriptΛrootʹҠಈ + मਖ਼ • Ϗϧυ΍ΒσϓϩΠ΍ΒͳΜ΍Β…

Slide 22

Slide 22 text

͜ͷύλʔϯͩͱͲ͏͢Δ͔

Slide 23

Slide 23 text

Go(TypeScriptҎ֎) + Next.js(React)ύλʔϯ • APIͷܕ৘ใΛͲ͏͢Δ͔ • openapi.yaml͕ଘࡏ͢ΔͷͰ͋Ε͹ϞϊϨϙ೿ • npm workspaceͳͲΛ࢖ΘͣͰ΋ྑ͍ • npm scriptsͰ͏·͘αʔόʔଆʹ͋Δopenapi.yamlΛऔΓࠐΉ • codegenతͳײ͡Ͱ΋ແཧͳΒ͹෼͚ͯ΋ྑ͍ͱࢥ͏

Slide 24

Slide 24 text

ձࣾͷαʔϏεશ෦ೖΕΔ΂͖͔ύλʔϯ • αʔϏε୯ҐͰϦϙδτϦΛ෼͚Δ΂͖೿ • ผαʔϏεͷ΋ͷ΋ಉҰʹೖΕΔඞཁ͸ͳ͍ • ผαʔϏεͷAPIΛୟ͘ʹͯ͠΋ৗʹͦͷܕ৘ใ͕શͯਖ਼͋͘͠Δඞཁ ͸ͳ͍ • APIͳͷͰୟ͘಺༰΋ݶΒΕΔ͠֎෦APIͱͯ͠ެ։͢ΔͳΒ͹όʔ δϣχϯάͱ͔Λ޻෉͢ΔͳͲ • ϦϦʔε࡞ۀʹӨڹ͕͋Δͱ͜Ζ͡Όͳ͍ͷͰ෼͚Δ΂͖೿

Slide 25

Slide 25 text

supabaseͱ͔ fi rebaseͰ׬݁ͯ͠Δύλʔϯ • ϞϊϨϙͱͯ͠૊·ͳͯ͘΋͍͍Μ͡Όͳ͍͔೿ • ͨͩ͠React NativeΛ࢖ͬͯΞϓϦ΋΍ΔͳͲɺಉαʔϏε಺Ͱܕ৘ ใΛ࢖͍·Θ͍ͨ͠৔߹͸ϞϊϨϙʹ͢Δ೿

Slide 26

Slide 26 text

React NativeؔΘͬͯ͘Δύλʔϯ • React NativeͳΒͼʹreact-native-web͕Ͳ͏ؔΘͬͯ͘Δ͔ • react-native-webΛ࢖ͬͯڞ௨ͷuiύʔπΛ࡞Δͱ͍͏ํ਑͸OKͩ ͕ɺ࡞Γํ͕͋·ΓΑΖ͘͠ͳ͍ͱ݁Ռnohoist໰୊ͳͲ͕සൃ • ຶ݁߹ʹͳΒͳ͍Α͏ʹઃܭΛ͏·͘ߟ͑ΕΔͳΒ͹೿

Slide 27

Slide 27 text

submoduleͱ͔ͰͳΜͱ͔ͯ͠Δύλʔϯ • Ͳ͕͜ϘτϧωοΫͱͳΔͷ͔ • ϦϦʔε࡞ۀͳͷ͔ͦΕͱ΋ҧ͏ͱ͜Ζͳͷ͔ • ϞϊϨϙʹͯ͠վળͨ͠৔߹ͷίετɺ͜ͷ··Ͱͷίετͱͷ݉Ͷ ߹͍ʹͳΔͱࢥ͏

Slide 28

Slide 28 text

·ͱΊ

Slide 29

Slide 29 text

·ͱΊ ओʹnpm packageͷ؅ཧ΍ɺϦϦʔε࡞ۀͷ൥ ࡶ͞Λཧ༝ʹϞϊϨϙԽΛͨ͠ɻ TypeScript + શһweb΋api΋։ൃ͍ͯ͠Δͱ͍ ͏ঢ়ଶͰͷԸܙ΋େ͖͍ɻ

Slide 30

Slide 30 text

- ͓ΘΓ -