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

by kikunantoka

Slide 1

Slide 1 text

Gatsby.jsͱNetlifyͱͷ෇͖߹͍ํ @kikunantoka Gotanda.js #11 in MobileFactory on 2018/05/10

Slide 2

Slide 2 text

ࣗݾ঺հ @kikunantoka

Slide 3

Slide 3 text

ݸਓ։ൃ https://nakamy.com

Slide 4

Slide 4 text

ϘʔυήʔϜ੍࡞ https://tapir-studio.com

Slide 5

Slide 5 text

ࣗݾ঺հ about: name: Fumitaka Kikukawa url: https://kikunantoka.com twitter: @kikunantoka job: engineer work_at: giftee Inc. // giftee is a good company.

Slide 6

Slide 6 text

giftee Inc, in Gotanda

Slide 7

Slide 7 text

఻͍͑ͨ͜ͱ • ಋೖࣄྫΛόγόγಡΊΔ๏ਓ޲͚LPΛGatsby.jsͰ࡞ͬͨ • Gatsby.jsͷϙΠϯτ • NetlifyͷϙΠϯτ

Slide 8

Slide 8 text

ಋೖࣄྫΛόγόγಡΊΔ ๏ਓ޲͚LPΛ Gatsby.jsͰ࡞ͬͨ

Slide 9

Slide 9 text

՝୊ײ • ๏ਓ޲͚LP͕ɺWordPressͷWYSIWYGϓϥάΠϯͰϖʔδ ͕ߏ੒͞Ε͓ͯΓɺϖʔδͷಡΈࠐΈ͕ΊͬͪΌ஗͍

Slide 10

Slide 10 text

՝୊ײ • αʔόͷอक΋͞Ε͓ͯΒͣɺPHPͷόʔδϣϯ͸5ܥͷ·· ͩͬͨ • Α͘མ͍ͪͯͨ • WordPress͕ѱ͍༁Ͱ͸ͳ͍

Slide 11

Slide 11 text

Ϟνϕʔγϣϯ • ๏ਓ޲͚ϓϩμΫτΛ୲౰͍ͯͨ͠ͷͰɺͲ͏ʹ͔͔ͨͬ͠ ͨ • Πϯό΢ϯυͷ໰͍߹ΘͤͰޮ཰Α͘ϓϩμΫτΛεέʔϧ ͍͖͔ͤͯͨͬͨ͞ • ϦχϡʔΞϧ͢Δ͜ͱʹͳͬͨ

Slide 12

Slide 12 text

ཁ݅ • ΠϯϑϥΛؚΊͨอकͷ޻਺͕௿͍ • ϏδωεαΠυ͕ඳ͍ͨϫΠϠʔͷ಺༰Λެ։͍ͨ͠ • ϏδωεαΠυ΋ίϯςϯπΛߋ৽͍͖͍ͯͨ͠ • ಋೖࣄྫΛܧଓతʹͲΜͲΜ૿΍͍͖͍ͯͨ͠

Slide 13

Slide 13 text

Ͳ͏΍࣮ͬͯݱ͠Α͏ • ίϯϙʔωϯτԽ͍͚ͯ͠͹ɺ্ख͘࢖͍·Θͤͦ͏ • ϏδωεαΠυ΋HTMLɺCSSॻ͚Δ͠ɺίϯϙʔωϯτ͑͞ ࡞ͬͯ͠·͑͹ɺ૊Έ߹ΘͤͯϖʔδΛ࡞ΕΔͷͰ͸આ • Git͸ؤுͬͯڭ͑Α͏ • ݁ՌɺͳΜͱ͔ͳͬͨ

Slide 14

Slide 14 text

Ͳ͏΍࣮ͬͯݱ͠Α͏ • ͦ΋ͦ΋LPͬͯ੩తίϯςϯπͳΜͩ͠ɺ੩తαΠτδΣω ϨʔλͰྑ͍ͷͰ͸ • ϗεςΟϯά͸NetlifyΛ࢖͑͹ɺϏϧυ&σϓϩΠϑϩʔ͸ ೚ͤΒΕΔ͠ɺ૬ੑ͕ྑ͍ͷͰ͸

Slide 15

Slide 15 text

ͦ͏ͩɺGatsby.js x Netlify ͩ x

Slide 16

Slide 16 text

ಋೖࣄྫΛόγόγಡΊΔ๏ਓ޲͚LP✨ https://giftee.biz

Slide 17

Slide 17 text

ϦϦʔεͯ͠Ͳ͏͔ͩͬͨ • PVతʹ͸৳ͼͨ • ճ༡͕૿͑ͨ • SEO͸্͕ͬͨϫʔυ΋͋Ε͹Լ͕ͬͨϫʔυ΋͋Δ • ίϯςϯπ͕ҰؾʹมΘͬͨ • Gatsby.js Λ࢖͔ͬͨΒSEO͕ҰؾʹԼ͕ͬͨɺͱ͍͏͜ͱ ͸ͳ͍

Slide 18

Slide 18 text

Gatsby.js ͷϙΠϯτ

Slide 19

Slide 19 text

Gatsby.jsͱ͸ • https://www.gatsbyjs.org/ • ੩తαΠτδΣωϨʔλ • React ͰSPAͳ੩తαΠτΛ։ൃͰ͖Δ • StaticGen ΛݟΔݶΓɺ࠷ۙϗοτͳٕज़

Slide 20

Slide 20 text

Gatsby.jsͱ͸

Slide 21

Slide 21 text

Starter ͷબఆ • ެࣜͰ΋୳ͤΔΑ͏ʹͳ͍ͬͯΔ • v2ͷ΋ͷΛ୳͢ͱྑ͍ • https://www.gatsbyjs.org/starters/?v=2

Slide 22

Slide 22 text

ը૾ͷ࠷దԽ͸gatsby-imageΛ࢖͏ • ಡΈࠐΈʹΑΔΨλπΩΛ๷͛Δ • ͦͷ·· λάͰը૾ΛಡΈࠐΉͱΨλπΫ • ը૾ͷϦαΠζ&ѹॖ΋΍ͬͯ͘ΕΔ • .webp ʹ΋ରԠͯ͘͠ΕΔ • ϨΠδʔϩʔυ΋΍ͬͯ͘ΕΔ • ߥΒ໨ͷBase64Λઌग़ͨ͠͠ΓɺTransitionΛՃ͑ͨΓ

Slide 23

Slide 23 text

ը૾ͷ࠷దԽ͸gatsby-imageΛ࢖͏ • Before

Slide 24

Slide 24 text

ը૾ͷ࠷దԽ͸gatsby-imageΛ࢖͏ • After

Slide 25

Slide 25 text

Gatsby.jsॴײ • ։ൃମݧͱͯ͠ྑ͔ͬͨ • νϡʔτϦΞϧ͕ॆ࣮͍ͯͯ͠ɺ΍Γ͍ͨ͜ͱ͸େମެࣜ ʹॻ͍ͯ͋Δ • Ұ௨ΓඞཁͳϓϥάΠϯ͕ἧ͖͍ͬͯͯΔ • ಛʹ࿑ྗͷ͔͔Δը૾ͷ࠷దԽָ͕ͩͬͨ͜ͱ͕ྑ͔ͬͨ

Slide 26

Slide 26 text

Netlify ͷϙΠϯτ

Slide 27

Slide 27 text

Netlify ͱ͸ • https://www.netlify.com/ • GitHubͷϦϙδτϦΛඥ෇͚Δ͚ͩͰɺϏϧυ & σϓϩΠ͕ Ͱ͖ͯϗεςΟϯάͰ͖Δ • ΧελϜυϝΠϯ & SSLԽରԠ΋ແྉͰରԠͰ͖Δ • Ϗϧυ͕͚͜ΔίϛοτΛͯ͠΋ɺຊ൪؀ڥ͸ͪΌΜͱಈ࡞͠ ͨ··ͷঢ়ଶ͕อͨΕΔ • ϏδωεαΠυ΋҆৺ͯ͠ίϛοτͰ͖Δ

Slide 28

Slide 28 text

ϦμΠϨΫτͷઃఆ΋Ͱ͖Δ • public/_redirects ϑΝΠϧʹϧʔϧΛهड़͢Δ͚ͩ • ࠓճͷΑ͏ʹϦχϡʔΞϧͱ͔ͰچαΠτͷߏ଄ͱ৽αΠτ ͷߏ଄͕ҧ͏৔߹͸ॏๅ͢Δ • ͪΌΜͱઃఆ͢Δ͜ͱͰSEO΋Լ͕Γʹ͍͘

Slide 29

Slide 29 text

SLAతʹ͸Ͳ͏͔ • ࢮ׆؂ࢹ͠ͳ͕ΒɺProϓϥϯΛ࢖͍ͬͯΔ͕ɺ΄ͱΜͲམͪ ͳ͍ • Businessϓϥϯʹ͢Ε͹ɺ99.9%ͷSLAΛಘΔ͜ͱ΋Ͱ͖Δ

Slide 30

Slide 30 text

Netlify Ͱࠔͬͨ఺ • Deploy previewsػೳ • σϑΥϧτ͕ ʮAutomatically build…ʯʹͳ͍ͬͯΔ

Slide 31

Slide 31 text

Netlify Ͱࠔͬͨ఺ • PRΛ࡞ͬͨ࣌ʹϨϏϡʔ༻ͷ؀ڥΛཱͯͯ͘ΕΔ • ΊͬͪΌศརʂ • ͕ɺ͔͠͠ɺϚʔδ͞Εͨޙ΋ϖʔδ͸࢒Γଓ͚Δ • ͔͠΋ɺফͤͳ͍

Slide 32

Slide 32 text

Netlify Ͱࠔͬͨ఺ • ҰԠɺϩϘοτͳͲʹ͸ิ଍͞Εͳ͍Α͏ʹ͸ͳ͍ͬͯΔ ͕ɺաڈͷ։ൃ్தͷ΋ͷ͕ݟΕͯ͠·͏ • ͔͠΋ɺਪଌ͠΍͍͢URL • https://deploy-preview-1--site-name.netlify.com/ • ਺஋Λए͍ͯ͘͘͠ͱɺͲΜͲΜॳظͷը໘͕…

Slide 33

Slide 33 text

Netlify Ͱࠔͬͨ఺ • ҰԠɺURLʹؚ·ΕΔαΠτ໊͸σϑΥϧτͰϥϯμϜͳจ ࣈྻʹ͸ͳ͍ͬͯΔ • ͕ɺ؅ཧͷ౎߹্ɺ໊લΛ͚͍ͭͨέʔε΋͋Δ

Slide 34

Slide 34 text

Netlify Ͱࠔͬͨ఺ • ެࣜʹ࣭໰ͯ͠Έͨ • طʹͰ͖ͯ͠·ͬͨϓϨ Ϗϡʔ༻ͷϖʔδ͸ɺαΠ τ͝ͱফ͔͢͠ফ͢ํ๏͸ ͳ͍ɺͱͷ͜ͱ

Slide 35

Slide 35 text

ղܾࡦ • ϓϨϏϡʔ؀ڥʹ͚ͩ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

Slide 36

Slide 36 text

ղܾࡦ • ϖʔδ͕࡞੒͞Εͯ͠·͏ͱফͤͳ͍͠ɺ͋ͱ͔ΒBasicೝূ͸͔ ͚ΒΕͳ͍ͷͰɺ࠷ॳͷPRΛ౤͛Δલʹઃఆ͓ͯ͘͠ͱྑͦ͞͏ • ઃఆΛOFFʹ͢Δ͜ͱ΋Ͱ͖Δ • ࡞੒͞Εͯ͠·͍ͬͯΔ৔߹͸αΠτ͝ͱফͯ͠ɺ࠶ߏங • ͦ͜·ͰେมͰ΋ͳ͍ • ϓϨϏϡʔΛݟͳ͕ΒPRϨϏϡʔ͕Ͱ͖ΔΑ͏ʹͳͬͨ

Slide 37

Slide 37 text

·ͱΊ

Slide 38

Slide 38 text

ॴײͳͲ • Gatsby + Netlify ͷ૊Έ߹Θͤศར • ։ൃମݧͱͯ͠͸ྑ͔ͬͨ • ۀ຿Ͱ LPΛ࡞Δࡍͷٕज़ͱͯ͠࠾༻ͨ͠ࣄྫ

Slide 39

Slide 39 text

ίϚʔγϟϧ • We are hiring!!! - Ұॹʹಇ͘஥ؒΛืूதʂ ձһ਺ສਓಥഁʂ ࠃ಺/PͷΧδϡΞϧΪϑταʔϏε