JAM Stackと静的サイトのイマ / modern-static-site

サーバーサイドの人にも知ってほしいJAM Stackと静的サイトのイマ
APIやらMicroServiceが充実してきた現代における静的サイトのお話

https://mottox2.com/posts/150/

Transcript

1. JAM Stackͱ੩తαΠτͷΠϚ 2018.07.06 Webք۾LTձ - @mottox2 αʔόʔαΠυͷਓʹ΋఻͍͑ͨ
2. ੩తαΠτͱಈతαΠτ • Ϩεϙϯε͕ૣ͍ • མͪͳ͍͠εέʔϧ͢Δ • ηΩϡϦςΟOK • ࣗ༝౓௿ͦ͏ • ࣮૷ʹΑͬͯ஗͘ͳΔ͜ͱ΋ • େྔͷΞΫηεʹऑ͍ • ηΩϡϦςΟతʹͭΒΈ΋ • େମͳΜͰ΋Ͱ͖Δ ੩తαΠτ ಈతαΠτ
3. ੩తαΠτδΣωϨʔλʔ • ੩తαΠτδΣωϨʔλʔΛ࢖ͬͯੜ੒͢Δ͜ͱ͕ଟ͍ • ಈతʹ੩తαΠτΛੜ੒͢ΔδΣωϨʔλ • جຊతʹGitHubͷpushͱ࿈ಈͯ͠Ϗϧυ͢ΔΑ͏ͳײ͡
4. Web։ൃΛऔΓר࣌͘୅ͷมԽ
5. ࣌୅ͷมԽ ϞϊϦγοΫ͔ΒϚΠΫϩαʔϏεʹ GitHubத৺ͷ։ൃ؀ڥʹ PC͔ΒεϚϗத৺ͷWebʹ 1 2 3
6. ϞϊϦγοΫ͔ΒϚΠΫϩαʔϏεʹ • Micro Service͕ҰൠతʹͳΓɺαʔόʔαΠυͷ෼཭͸ͱ΋͔͘ɺStipeʢ՝ۚʣ ΍ContentfulʢHeadless CMSʣɺSentryʢΤϥʔऩूʣͳͲͷ֎෦αʔϏεͱAPI Λܦ༝ͯ͠ར༻͢Δํ๏͕ҰൠԽͨ͠ʢ͸ͣʣɻ • backend͸ผαʔϏεͷAPIΛ࢖ͬͨΓɺࣗલͰ࣮૷͢ΔͳΓͯ͠ɺϑϩϯτΤϯ υ͚ͩผϓϩδΣΫτʹ੾Γग़͢ͷ΋ࣗવɻ • WebHookʹΑΔαʔϏεؒ࿈ܞ΋े෼ʹීٴͨ͠ɻ
7. GitHubத৺ͷ։ൃ؀ڥʹ • ιʔείʔυ؅ཧ͕GitHub্ͰߦΘΕΔΑ͏ʹͳΓɺCIͱ࿈ܞ͢Δ͜ͱ͕Ұൠత ʹɻ • GitHub PagesͰ؆୯ʹαΠτ͕ެ։Ͱ͖ͨΓɺGitHubͱ࿈ܞͯ͠੩తαΠτΛެ ։Ͱ͖ΔNetlifyͷొ৔ • ϏϧυίϚϯυͷࢦఆ΍ɺGlobal CDNɺPR PreviewͳͲ͕σϑΥϧτͰ࢖͑ ΔɻਆαʔϏεɻ ▶ ੩తαΠτͷσϓϩΠ͕ͲΜͲΜָʹ
8. PC͔ΒεϚϗத৺ͷWebʹ • 3G͔Β4Gʹͳͬͨͱ͸͍͑ɺ౎ࢢ෦͔Β཭ΕΔͱ3G΍ྼѱͳ௨৴؀ڥ͕ଘࡏ͢ Δɻ • GoogleͷΞϧΰϦζϜͰ஗͍αΠτ͸ϥϯΫ͕Լ͕Δɻ • ΑΓૣ͘ϨεϙϯεΛฦͯ͠ɺ௨৴ྔΛ཈͑Δඞཁੑ͕ߴ·͍ͬͯΔɻ • ಈతαΠτ͸αʔόʔαΠυͰͷॲཧͷ෼଎౓తʹෆརɻ • ·ͨɺόζΓ΍͘͢ͳͬͯҰؾʹτϥϑΟοΫ͕૿͑Δ৔߹΋ɻ ▶ εέʔϧ͠΍͘͢ɺTTFB͕ૣ͍੩తαΠτʹΞυ͕
9. ੩తαΠτδΣωϨʔλʔ΋มԽ • Ҏલͷ੩తαΠτδΣωϨʔλ • جຊతʹϦϙδτϦ্ʹ͋ΔMarkdownΛݩʹ੩తϖʔδΛੜ੒ • ࠷ۙͷ੩తαΠτδΣωϨʔλ • APIΛୟ͍ͯͦͷσʔλΛݩʹ੩తϖʔδΛੜ੒ • APIΛୟ͘͜ͱΛલఏͱ͍ͯ͠Δ΋ͷ΋ɻMarkdown͸ΦϓγϣϯͷҰͭ ▶ ࢥͬͨΑΓࣗ༝౓͕ߴ͍ͱࢥ͍·ͤΜ͔ʁ
10. ओཁͳ੩తαΠτδΣωϨʔλʔ ▶ ελʔ਺Ͱ͸ෛ͚͍ͯΔ͕ɺJavaScript੡ͷ΋ͷΛ࠾༻͢΂͖ 34728 / Ruby Jekyll 26870 / Golang Hugo 23123 / JavaScript(React) Next 23123 / JavaScript(React) Gatsby 13371 / JavaScript(Vue) Nuxt
11. JavaScript੡ͷδΣωϨʔλʔΛબ୒͢΂͖ཧ༝ • ServerͰੜ੒ͨ͠HTMLΛJSͰ͍͡Δͷ͸ͦΖͦΖࣙΊ͍ͨɻ • APIΛୟ͍ͯViewʹදࣔ͢Δॲཧ͕JSͰ׬݁͢Δɻ • ߟ͑Δ͜ͱ͕૿͑ͳ͍··SPAʹͰ͖Δ͔΋ɻ • ϑϩϯτΤϯυͷࢿ࢈Ͱ͋Δ։ൃ؀ڥ͕ศརɻ • Ϗϧυ؀ڥΛ੔͑ΔͷʹNode͚ͩ༻ҙ͢Ε͹Α͍ɻ
12. JAM Stack ͜ΕΒͷཁૉΛຬͨ͢ελοΫΛJAM Stackͱ͍͏ɻ https://jamstack.org/ JavaScriptͰߏ੒͞Ε͍ͯΔ APIΛར༻͢Δ͜ͱ ࣄલʹϏϧυ͢Δ͜ͱ
13. Կ͕࡞ΕΔͷʁ • Headless CMSΛ࢖ͬͨΦ΢ϯυϝσΟΞ • ্ཱ͕ͪ͛ര଎Ͱग़དྷΔɻ • esa.io΍Qiita:Teamͱ࿈ܞͯ͠ߋ৽Ͱ͖ΔίʔϙϨʔταΠτ • ؅ཧαΠτΛϗεςΟϯά͢Δඞཁͳ͍ͷͰศརɻ • ձࣾͷϝϯόʔͷQiita΍noteɺϒϩάΛ·ͱΊͨϙʔλϧαΠτ • స৬ଟͯ͘։ൃϒϩάʹॻ͘ͷ͕ਏ͍ͷͰɺ৘ใͷϙʔλϏϦςΟ্͕͕Δɻ • Stripe΍MoltinΛۦ࢖͢Ε͹ECαΠτ΋ग़དྷΔɻ • ਖ਼௚ҙຯ͕Θ͔Βͳ͍ɻ
14. ֤ϑϨʔϜϫʔΫͷ঺հ
15. ओཁͳ੩తαΠτδΣωϨʔλʔ 34728 / Ruby Jekyll 26870 / Golang Hugo 23123 / JavaScript(React) Next 23123 / JavaScript(React) Gatsby 13371 / JavaScript(Vue) Nuxt
16. Next • SSR෇͖ͷReactΞϓϦέʔγϣϯ༻ͷSPAϑϨʔϜϫʔΫɻ • Routing΍SSRʹؔͯ͠ϨʔϧΛෑ͍ͯ͘ΕΔɻ • easyΑΓ͸simpleدΓɻυΩϡϝϯτ΋؆ૉɻ • ੩తαΠτͷΤΫεϙʔτػೳ͕͋Δɻ
17. Nuxt • ೔ຊʹྲྀߦͬͯΔʢؾ͕͢ΔʣVueͷSPAϑϨʔϜϫʔΫɻ • Next.jsΠϯεύΠΞܥͷϑϨʔϜϫʔΫ͚ͩͬͨͲɺϑϧελοΫํ໘ʹ޲͔ͬͯ ͍Δɻ • ઃఆΑΓن໿ͳϑϨʔϜϫʔΫɻϑϩϯτΤϯυͷRailsʢݸਓͷݟղʣ • SSRϞʔυɺSPAϞʔυɺ੩తϑΝΠϧϞʔυ͕͋Δɻ • ࠷ۙຊ൪ͰNuxtΛ࠾༻͍ͯ͠ΔྫΛԿճ͔ݟͨɻʢͨͩ͠SSRϞʔυʣ
18. Gatsby • ReactͰ੩తαΠτΛॻͨ͘ΊͷϑϨʔϜϫʔΫɻ • ී௨ʹॻ͚͹ૣ͘ͳΔΑ͏ʹઃܭ͞Ε͍ͯΔɻ • ෳ਺ͷσʔλιʔεΛѻ͍΍͍͢ઃܭʹͳ͍ͬͯΔɻ • ΞϓϦέʔγϣϯͬΆ͍΋ͷΛॻ͘΋ͷͰ͸ͳ͍ɻ
19. ϑϨʔϜϫʔΫΛબͿͱ͖ͷϙΠϯτ • Next, Nuxt, Gatsbyʹؔͯ͠͸ɺ֎෦ͷAPIΛୟ͍ͯͳʹ͔͢Δ৔߹ʹɻ͋͘·Ͱ JAM Stackʹ৐͔ͬΔͳΒ͜ͷ3ͭͰ͸ʁͱ͍͏࿩ɻ • ͜ͷ3ͭͷϑϨʔϜϫʔΫ͸੩తαΠτͱͯ͠ग़ྗ͢ΔͱɺJS͕ಡΈࠐ·Εͨޙʹ SPAͱͯ͠ಈ࡞͢Δɻ • ͨͩNext, Nuxt͸ΞϓϦέʔγϣϯϑϨʔϜϫʔΫͷଆ໘͕ڧ͍ͷͰɺ͜͜Ͱൺֱ ͢Δͷ͸ద੾Ͱ͸ͳ͍ • ٯʹMarkdownͰϒϩάΛ࡞Γ͍ͨ৔߹͸ɺͦ͏͍ͬͨࢥ૝ͷϑϨʔϜϫʔΫΛબ Ϳ΂͖ɻ • ϑϨʔϜϫʔΫຖͷࢥ૝͕͋ΔͷͰݴޠ໰ΘͣʹݟͯΈΔͱ͍͍͔΋
20. Α͋͘Δ͔΋͠Εͳ͍࣭໰
21. ϑΥʔϜͱ͔Ͳ͏͢ΜͷΑʁ • Ұ൪؆୯ͳͷ͕Google FormͷຒΊࠐΈɻ • FormܥͷSaaS΍Netlify FormΛ࢖͏બ୒ࢶ΋ • Netlify Functions΍Lambdaͱ࿈ܞͯ͠؆қతͳαʔόʔαΠυͱΈͳ͢͜ͱ΋Ͱ͖ Δɻ
22. Ϗϧυ࣌ؒͱ͔Ͳ͏ͳͷʁ • HTML෦෼ΑΓ֎෦APIΛୟ͘෦෼͕ωοΫʹͳΓ͕ͪɻ • WordPress+GatsbyͰ࡞ͬͯΔαΠτ͸2000ϖʔδ͙Β͍Ͱ໿6෼ͱ͍͏ͱ͜Ζɻ • ΋͏গ͠γϯϓϧͳHeadless CMSΛ࢖͑͹਺෼ͰऴΘΔ͸ͣɻ
23. React, Vueͬͯߟ͑Δ͜ͱ͕ଟͦ͏ • Next.js, GatsbyJS, Nuxt.jsΛબ΂͹ɺ͋Δఔ౓ͷϨʔϧ͕ෑ͔Ε͍ͯΔͨΊϥΠϒ ϥϦબఆ໰୊ͱ௚໘͢Δ͜ͱ͸গͳ͍ɻ • ίϯϙʔωϯτ୯ҐͰCSS͕͔͚ͨΓ͢ΔͷͰɺCSSͷҋͱ΋௚໘͠ʹ͍͘ɻ • ݸਓͷݟղͰ͍͑͹ɺී௨ʹHTMLΛॻ͘ΑΓߟ͑Δ͜ͱ͕গͳ͍ɻ
24. SPA(+SSR)ͱ੩తαΠτͷ࢖͍෼͚͸ʁ • ߋ৽ස౓͕ߴ͘ͳ͍·ͨ͸APIͷར༻੍ݶ͕͋Δ৔߹͸੩తαΠτɻ • ੩తαΠτͰ͸ͳ͘SPA(+SSR)ʹ͢Δ৔߹ͰReactͳΒNext.jsɺVueͳΒNuxt.js • ۩ମతʹCGMͷΑ͏ͳߋ৽ස౓͕ߴ͍αΠτͰ͋Ε͹Next.jsɺNuxt.jsʹ͢Δɻ • 3rd Party ServiceͷAPIʹར༻੍ݶ͕͋Δ৔߹ɺ੩తαΠτԽ͢Δඞཁ͕͋Δɻ
25. ͋ͳͨͷαΠτɺSPAͰ΋͍͍ͷͰ͸ʁ JAM StackͷMarkup͕ຬͨͤͳ͘ͳΔ͚Ͳ ૣ্ཱͪ͛͘Δͱ͍͏ҙຯͰڧ͍બ୒ࢶʹͳΔ ͓·͚
26. • SPA΋੩తαΠτ • JS͕ϒϥ΢βͰϨϯμϦϯά͍ͯ͠Δ SPA΋੩తαΠτ
27. • Netlify͕PrerenderingΛαϙʔτ(beta) • Ϋϩʔϥʔ޲͚ʹJSͰϨϯμϦϯάͨ݁͠ՌΛฦͯ͘͠ΕΔɻ • ϗεςΟϯάαʔϏεʹ͍͍ͬͭͯ͘ΔͷͰγʔϜϨεʹઃఆՄೳ • Ҏલ͔Β΋prerender.ioͷΑ͏ͳαʔϏε΋͕͋ͬͨɺ͋·Γྲྀߦ͍ͬͯͳ͍ҹ৅ Netlify Prerenderingͷొ৔
28. ࣄྫ: SmartDrive https://smartdrive.co.jp @takanoripe͞Μ࡞ɻNuxt.jsͷSPAϞʔυ+WordPress REST API
29. ੩తαΠτͰͰ͖Δ͜ͱ͸ͲΜͲΜ૿͍͑ͯΔ ࡞Βͳͯ͘΋͍͍΋ͷ͕૿͑ͨͷͰ ΑΓຊ࣭తͳ΋ͷʹ஫ྗͰ͖Δ࣌୅ʹ ·ͱΊ
30. @mottox2 • ReactͱRuby on RailsΛத৺ʹWebαʔϏε։ൃ͍ͯ͠·͢ • ϒϩά΍ͬͯ·͢(esa.io + note.mu + GatsbyJS) => mottox2.com • ࢓ࣄͰ͸σβΠϯ͠ͳ͕ΒNext(SSR)΍GatsbyJSΛ΍ͬͯ·͢ Freelance web engineer Yuki Takemoto ୭ʁ