Gatsby.jsとNetlifyとの付き合い方 / gatsby-js-and-netlify

- 導入事例をバシバシ読める法人向けLPをGatsby.jsで作った
- Gatsby.jsのポイント
- Netlifyのポイント

Transcript

1. Gatsby.jsͱNetlifyͱͷ෇͖߹͍ํ @kikunantoka Gotanda.js #11 in MobileFactory on 2018/05/10
2. ࣗݾ঺հ @kikunantoka
3. ݸਓ։ൃ https://nakamy.com
4. ϘʔυήʔϜ੍࡞ https://tapir-studio.com
5. ࣗݾ঺հ about: name: Fumitaka Kikukawa url: https://kikunantoka.com twitter: @kikunantoka job: engineer work_at: giftee Inc. // giftee is a good company.
6. giftee Inc, in Gotanda
7. ఻͍͑ͨ͜ͱ • ಋೖࣄྫΛόγόγಡΊΔ๏ਓ޲͚LPΛGatsby.jsͰ࡞ͬͨ • Gatsby.jsͷϙΠϯτ • NetlifyͷϙΠϯτ
8. ಋೖࣄྫΛόγόγಡΊΔ ๏ਓ޲͚LPΛ Gatsby.jsͰ࡞ͬͨ
9. ՝୊ײ • ๏ਓ޲͚LP͕ɺWordPressͷWYSIWYGϓϥάΠϯͰϖʔδ ͕ߏ੒͞Ε͓ͯΓɺϖʔδͷಡΈࠐΈ͕ΊͬͪΌ஗͍
10. ՝୊ײ • αʔόͷอक΋͞Ε͓ͯΒͣɺPHPͷόʔδϣϯ͸5ܥͷ·· ͩͬͨ • Α͘མ͍ͪͯͨ • WordPress͕ѱ͍༁Ͱ͸ͳ͍
11. Ϟνϕʔγϣϯ • ๏ਓ޲͚ϓϩμΫτΛ୲౰͍ͯͨ͠ͷͰɺͲ͏ʹ͔͔ͨͬ͠ ͨ • Πϯό΢ϯυͷ໰͍߹ΘͤͰޮ཰Α͘ϓϩμΫτΛεέʔϧ ͍͖͔ͤͯͨͬͨ͞ • ϦχϡʔΞϧ͢Δ͜ͱʹͳͬͨ
12. ཁ݅ • ΠϯϑϥΛؚΊͨอकͷ޻਺͕௿͍ • ϏδωεαΠυ͕ඳ͍ͨϫΠϠʔͷ಺༰Λެ։͍ͨ͠ • ϏδωεαΠυ΋ίϯςϯπΛߋ৽͍͖͍ͯͨ͠ • ಋೖࣄྫΛܧଓతʹͲΜͲΜ૿΍͍͖͍ͯͨ͠
13. Ͳ͏΍࣮ͬͯݱ͠Α͏ • ίϯϙʔωϯτԽ͍͚ͯ͠͹ɺ্ख͘࢖͍·Θͤͦ͏ • ϏδωεαΠυ΋HTMLɺCSSॻ͚Δ͠ɺίϯϙʔωϯτ͑͞ ࡞ͬͯ͠·͑͹ɺ૊Έ߹ΘͤͯϖʔδΛ࡞ΕΔͷͰ͸આ • Git͸ؤுͬͯڭ͑Α͏ • ݁ՌɺͳΜͱ͔ͳͬͨ
14. Ͳ͏΍࣮ͬͯݱ͠Α͏ • ͦ΋ͦ΋LPͬͯ੩తίϯςϯπͳΜͩ͠ɺ੩తαΠτδΣω ϨʔλͰྑ͍ͷͰ͸ • ϗεςΟϯά͸NetlifyΛ࢖͑͹ɺϏϧυ&σϓϩΠϑϩʔ͸ ೚ͤΒΕΔ͠ɺ૬ੑ͕ྑ͍ͷͰ͸
15. ͦ͏ͩɺGatsby.js x Netlify ͩ x
16. ಋೖࣄྫΛόγόγಡΊΔ๏ਓ޲͚LP✨ https://giftee.biz
17. ϦϦʔεͯ͠Ͳ͏͔ͩͬͨ • PVతʹ͸৳ͼͨ • ճ༡͕૿͑ͨ • SEO͸্͕ͬͨϫʔυ΋͋Ε͹Լ͕ͬͨϫʔυ΋͋Δ • ίϯςϯπ͕ҰؾʹมΘͬͨ • Gatsby.js Λ࢖͔ͬͨΒSEO͕ҰؾʹԼ͕ͬͨɺͱ͍͏͜ͱ ͸ͳ͍
18. Gatsby.js ͷϙΠϯτ
19. Gatsby.jsͱ͸ • https://www.gatsbyjs.org/ • ੩తαΠτδΣωϨʔλ • React ͰSPAͳ੩తαΠτΛ։ൃͰ͖Δ • StaticGen ΛݟΔݶΓɺ࠷ۙϗοτͳٕज़
20. Gatsby.jsͱ͸
21. Starter ͷબఆ • ެࣜͰ΋୳ͤΔΑ͏ʹͳ͍ͬͯΔ • v2ͷ΋ͷΛ୳͢ͱྑ͍ • https://www.gatsbyjs.org/starters/?v=2
22. ը૾ͷ࠷దԽ͸gatsby-imageΛ࢖͏ • ಡΈࠐΈʹΑΔΨλπΩΛ๷͛Δ • ͦͷ·· <img> λάͰը૾ΛಡΈࠐΉͱΨλπΫ • ը૾ͷϦαΠζ&ѹॖ΋΍ͬͯ͘ΕΔ • .webp ʹ΋ରԠͯ͘͠ΕΔ • ϨΠδʔϩʔυ΋΍ͬͯ͘ΕΔ • ߥΒ໨ͷBase64Λઌग़ͨ͠͠ΓɺTransitionΛՃ͑ͨΓ
23. ը૾ͷ࠷దԽ͸gatsby-imageΛ࢖͏ • Before
24. ը૾ͷ࠷దԽ͸gatsby-imageΛ࢖͏ • After
25. Gatsby.jsॴײ • ։ൃମݧͱͯ͠ྑ͔ͬͨ • νϡʔτϦΞϧ͕ॆ࣮͍ͯͯ͠ɺ΍Γ͍ͨ͜ͱ͸େମެࣜ ʹॻ͍ͯ͋Δ • Ұ௨ΓඞཁͳϓϥάΠϯ͕ἧ͖͍ͬͯͯΔ • ಛʹ࿑ྗͷ͔͔Δը૾ͷ࠷దԽָ͕ͩͬͨ͜ͱ͕ྑ͔ͬͨ
26. Netlify ͷϙΠϯτ
27. Netlify ͱ͸ • https://www.netlify.com/ • GitHubͷϦϙδτϦΛඥ෇͚Δ͚ͩͰɺϏϧυ & σϓϩΠ͕ Ͱ͖ͯϗεςΟϯάͰ͖Δ • ΧελϜυϝΠϯ & SSLԽରԠ΋ແྉͰରԠͰ͖Δ • Ϗϧυ͕͚͜ΔίϛοτΛͯ͠΋ɺຊ൪؀ڥ͸ͪΌΜͱಈ࡞͠ ͨ··ͷঢ়ଶ͕อͨΕΔ • ϏδωεαΠυ΋҆৺ͯ͠ίϛοτͰ͖Δ
28. ϦμΠϨΫτͷઃఆ΋Ͱ͖Δ • public/_redirects ϑΝΠϧʹϧʔϧΛهड़͢Δ͚ͩ • ࠓճͷΑ͏ʹϦχϡʔΞϧͱ͔ͰچαΠτͷߏ଄ͱ৽αΠτ ͷߏ଄͕ҧ͏৔߹͸ॏๅ͢Δ • ͪΌΜͱઃఆ͢Δ͜ͱͰSEO΋Լ͕Γʹ͍͘
29. SLAతʹ͸Ͳ͏͔ • ࢮ׆؂ࢹ͠ͳ͕ΒɺProϓϥϯΛ࢖͍ͬͯΔ͕ɺ΄ͱΜͲམͪ ͳ͍ • Businessϓϥϯʹ͢Ε͹ɺ99.9%ͷSLAΛಘΔ͜ͱ΋Ͱ͖Δ
30. Netlify Ͱࠔͬͨ఺ • Deploy previewsػೳ • σϑΥϧτ͕ ʮAutomatically build…ʯʹͳ͍ͬͯΔ
31. Netlify Ͱࠔͬͨ఺ • PRΛ࡞ͬͨ࣌ʹϨϏϡʔ༻ͷ؀ڥΛཱͯͯ͘ΕΔ • ΊͬͪΌศརʂ • ͕ɺ͔͠͠ɺϚʔδ͞Εͨޙ΋ϖʔδ͸࢒Γଓ͚Δ • ͔͠΋ɺফͤͳ͍
32. Netlify Ͱࠔͬͨ఺ • ҰԠɺϩϘοτͳͲʹ͸ิ଍͞Εͳ͍Α͏ʹ͸ͳ͍ͬͯΔ ͕ɺաڈͷ։ൃ్தͷ΋ͷ͕ݟΕͯ͠·͏ • ͔͠΋ɺਪଌ͠΍͍͢URL • https://deploy-preview-1--site-name.netlify.com/ • ਺஋Λए͍ͯ͘͘͠ͱɺͲΜͲΜॳظͷը໘͕…
33. Netlify Ͱࠔͬͨ఺ • ҰԠɺURLʹؚ·ΕΔαΠτ໊͸σϑΥϧτͰϥϯμϜͳจ ࣈྻʹ͸ͳ͍ͬͯΔ • ͕ɺ؅ཧͷ౎߹্ɺ໊લΛ͚͍ͭͨέʔε΋͋Δ
34. Netlify Ͱࠔͬͨ఺ • ެࣜʹ࣭໰ͯ͠Έͨ • طʹͰ͖ͯ͠·ͬͨϓϨ Ϗϡʔ༻ͷϖʔδ͸ɺαΠ τ͝ͱফ͔͢͠ফ͢ํ๏͸ ͳ͍ɺͱͷ͜ͱ
35. ղܾࡦ • ϓϨϏϡʔ؀ڥʹ͚ͩBasicೝূΛ͔͚Δ͜ͱ͕Ͱ͖ͨ /* Basic-Auth: hoge:piyo netlify_headers [context.production] command = "gatsby build” [context.deploy-preview] command = "gatsby build && cp netlify_headers public/_headers" netlify.toml
36. ղܾࡦ • ϖʔδ͕࡞੒͞Εͯ͠·͏ͱফͤͳ͍͠ɺ͋ͱ͔ΒBasicೝূ͸͔ ͚ΒΕͳ͍ͷͰɺ࠷ॳͷPRΛ౤͛Δલʹઃఆ͓ͯ͘͠ͱྑͦ͞͏ • ઃఆΛOFFʹ͢Δ͜ͱ΋Ͱ͖Δ • ࡞੒͞Εͯ͠·͍ͬͯΔ৔߹͸αΠτ͝ͱফͯ͠ɺ࠶ߏங • ͦ͜·ͰେมͰ΋ͳ͍ • ϓϨϏϡʔΛݟͳ͕ΒPRϨϏϡʔ͕Ͱ͖ΔΑ͏ʹͳͬͨ
37. ·ͱΊ
38. ॴײͳͲ • Gatsby + Netlify ͷ૊Έ߹Θͤศར • ։ൃମݧͱͯ͠͸ྑ͔ͬͨ • ۀ຿Ͱ LPΛ࡞Δࡍͷٕज़ͱͯ͠࠾༻ͨ͠ࣄྫ
39. ίϚʔγϟϧ • We are hiring!!! - Ұॹʹಇ͘஥ؒΛืूதʂ ձһ਺ສਓಥഁʂ
    ࠃ಺/PͷΧδϡΞϧΪϑταʔϏε