Gatsby.jsとNetlifyとの付き合い方 / gatsby-js-and-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ͷΧδϡΞϧΪϑταʔϏε