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

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

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

A79762150f8a3c6015ec11c4f494a371?s=128

kikunantoka

May 10, 2019
Tweet

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ͷΧδϡΞϧΪϑταʔϏε