Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Gatsby.jsとNetlifyとの付き合い方 / gatsby-js-and-netlify
Search
kikunantoka
May 10, 2019
Technology
3
600
Gatsby.jsとNetlifyとの付き合い方 / gatsby-js-and-netlify
- 導入事例をバシバシ読める法人向けLPをGatsby.jsで作った
- Gatsby.jsのポイント
- Netlifyのポイント
kikunantoka
May 10, 2019
Tweet
Share
More Decks by kikunantoka
See All by kikunantoka
個人開発しているサービスのインフラをAWSからGCPに載せ替えた話 💪 / kojin_kaihatsu_night_3
kikunantoka
0
1.2k
Gatsby.jsとCloud Functionsで毎週自動でコンテンツが更新され続けるフレームワーク比較サイトを作った話 / gotanda_js_13
kikunantoka
1
2.4k
Gatsby.jsとCloud Functionsで毎週自動でコンテンツが更新され続けるフレームワーク比較サイトを作った話 / frontend_night_1
kikunantoka
3
1.6k
サービスがゼロからN億円規模になるまに実践した7つのやっていき / 7_yatteiki_battle_conference_u30_2019
kikunantoka
1
1.4k
Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-for-biz-lp
kikunantoka
2
690
Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-for-biz-lp
kikunantoka
1
1.8k
今日から始める Flood.io / fuka-taisaku-night-01
kikunantoka
0
330
20万RPMを捌くRailsアプリケーションの作り方
kikunantoka
0
820
MVPに絞ったら個人開発でもちゃんとリリースできた話
kikunantoka
1
530
Other Decks in Technology
See All in Technology
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
160
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
380
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
230
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.4k
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
130
Retrospectiveを振り返ろう
nakasho
0
100
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
130
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
150
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
pfn
PRO
3
840
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
1
180
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
526
40k
Building Applications with DynamoDB
mza
96
6.7k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Fireside Chat
paigeccino
41
3.7k
Balancing Empowerment & Direction
lara
5
700
Designing for Performance
lara
610
69k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Become a Pro
speakerdeck
PRO
29
5.6k
GitHub's CSS Performance
jonrohan
1032
470k
The World Runs on Bad Software
bkeepers
PRO
72
11k
The Invisible Side of Design
smashingmag
302
51k
Bash Introduction
62gerente
615
210k
Transcript
Gatsby.jsͱNetlifyͱͷ͖߹͍ํ @kikunantoka Gotanda.js #11 in MobileFactory on 2018/05/10
ࣗݾհ @kikunantoka
ݸਓ։ൃ https://nakamy.com
ϘʔυήʔϜ੍࡞ https://tapir-studio.com
ࣗݾհ about: name: Fumitaka Kikukawa url: https://kikunantoka.com twitter: @kikunantoka job:
engineer work_at: giftee Inc. // giftee is a good company.
giftee Inc, in Gotanda
͍͑ͨ͜ͱ • ಋೖࣄྫΛόγόγಡΊΔ๏ਓ͚LPΛGatsby.jsͰ࡞ͬͨ • Gatsby.jsͷϙΠϯτ • NetlifyͷϙΠϯτ
ಋೖࣄྫΛόγόγಡΊΔ ๏ਓ͚LPΛ Gatsby.jsͰ࡞ͬͨ
՝ײ • ๏ਓ͚LP͕ɺWordPressͷWYSIWYGϓϥάΠϯͰϖʔδ ͕ߏ͞Ε͓ͯΓɺϖʔδͷಡΈࠐΈ͕ΊͬͪΌ͍
՝ײ • αʔόͷอक͞Ε͓ͯΒͣɺPHPͷόʔδϣϯ5ܥͷ·· ͩͬͨ • Α͘མ͍ͪͯͨ • WordPress͕ѱ͍༁Ͱͳ͍
Ϟνϕʔγϣϯ • ๏ਓ͚ϓϩμΫτΛ୲͍ͯͨ͠ͷͰɺͲ͏ʹ͔͔ͨͬ͠ ͨ • Πϯόϯυͷ͍߹ΘͤͰޮΑ͘ϓϩμΫτΛεέʔϧ ͍͖͔ͤͯͨͬͨ͞ • ϦχϡʔΞϧ͢Δ͜ͱʹͳͬͨ
ཁ݅ • ΠϯϑϥΛؚΊͨอकͷ͕͍ • ϏδωεαΠυ͕ඳ͍ͨϫΠϠʔͷ༰Λެ։͍ͨ͠ • ϏδωεαΠυίϯςϯπΛߋ৽͍͖͍ͯͨ͠ • ಋೖࣄྫΛܧଓతʹͲΜͲΜ૿͍͖͍ͯͨ͠
Ͳ͏࣮ͬͯݱ͠Α͏ • ίϯϙʔωϯτԽ͍͚ͯ͠ɺ্ख͍͘·Θͤͦ͏ • ϏδωεαΠυHTMLɺCSSॻ͚Δ͠ɺίϯϙʔωϯτ͑͞ ࡞ͬͯ͠·͑ɺΈ߹ΘͤͯϖʔδΛ࡞ΕΔͷͰઆ • Gitؤுͬͯڭ͑Α͏ • ݁ՌɺͳΜͱ͔ͳͬͨ
Ͳ͏࣮ͬͯݱ͠Α͏ • ͦͦLPͬͯ੩తίϯςϯπͳΜͩ͠ɺ੩తαΠτδΣω ϨʔλͰྑ͍ͷͰ • ϗεςΟϯάNetlifyΛ͑ɺϏϧυ&σϓϩΠϑϩʔ ͤΒΕΔ͠ɺ૬ੑ͕ྑ͍ͷͰ
ͦ͏ͩɺGatsby.js x Netlify ͩ x
ಋೖࣄྫΛόγόγಡΊΔ๏ਓ͚LP✨ https://giftee.biz
ϦϦʔεͯ͠Ͳ͏͔ͩͬͨ • PVతʹ৳ͼͨ • ճ༡͕૿͑ͨ • SEO্͕ͬͨϫʔυ͋ΕԼ͕ͬͨϫʔυ͋Δ • ίϯςϯπ͕ҰؾʹมΘͬͨ •
Gatsby.js Λ͔ͬͨΒSEO͕ҰؾʹԼ͕ͬͨɺͱ͍͏͜ͱ ͳ͍
Gatsby.js ͷϙΠϯτ
Gatsby.jsͱ • https://www.gatsbyjs.org/ • ੩తαΠτδΣωϨʔλ • React ͰSPAͳ੩తαΠτΛ։ൃͰ͖Δ • StaticGen
ΛݟΔݶΓɺ࠷ۙϗοτͳٕज़
Gatsby.jsͱ
Starter ͷબఆ • ެࣜͰ୳ͤΔΑ͏ʹͳ͍ͬͯΔ • v2ͷͷΛ୳͢ͱྑ͍ • https://www.gatsbyjs.org/starters/?v=2
ը૾ͷ࠷దԽgatsby-imageΛ͏ • ಡΈࠐΈʹΑΔΨλπΩΛ͛Δ • ͦͷ·· <img> λάͰը૾ΛಡΈࠐΉͱΨλπΫ • ը૾ͷϦαΠζ&ѹॖͬͯ͘ΕΔ •
.webp ʹରԠͯ͘͠ΕΔ • ϨΠδʔϩʔυͬͯ͘ΕΔ • ߥΒͷBase64Λઌग़ͨ͠͠ΓɺTransitionΛՃ͑ͨΓ
ը૾ͷ࠷దԽgatsby-imageΛ͏ • Before
ը૾ͷ࠷దԽgatsby-imageΛ͏ • After
Gatsby.jsॴײ • ։ൃମݧͱͯ͠ྑ͔ͬͨ • νϡʔτϦΞϧ͕ॆ࣮͍ͯͯ͠ɺΓ͍ͨ͜ͱେମެࣜ ʹॻ͍ͯ͋Δ • Ұ௨ΓඞཁͳϓϥάΠϯ͕ἧ͖͍ͬͯͯΔ • ಛʹ࿑ྗͷ͔͔Δը૾ͷ࠷దԽָ͕ͩͬͨ͜ͱ͕ྑ͔ͬͨ
Netlify ͷϙΠϯτ
Netlify ͱ • https://www.netlify.com/ • GitHubͷϦϙδτϦΛඥ͚Δ͚ͩͰɺϏϧυ & σϓϩΠ͕ Ͱ͖ͯϗεςΟϯάͰ͖Δ •
ΧελϜυϝΠϯ & SSLԽରԠແྉͰରԠͰ͖Δ • Ϗϧυ͕͚͜ΔίϛοτΛͯ͠ɺຊ൪ڥͪΌΜͱಈ࡞͠ ͨ··ͷঢ়ଶ͕อͨΕΔ • ϏδωεαΠυ҆৺ͯ͠ίϛοτͰ͖Δ
ϦμΠϨΫτͷઃఆͰ͖Δ • public/_redirects ϑΝΠϧʹϧʔϧΛهड़͢Δ͚ͩ • ࠓճͷΑ͏ʹϦχϡʔΞϧͱ͔ͰچαΠτͷߏͱ৽αΠτ ͷߏ͕ҧ͏߹ॏๅ͢Δ • ͪΌΜͱઃఆ͢Δ͜ͱͰSEOԼ͕Γʹ͍͘
SLAతʹͲ͏͔ • ࢮ׆ࢹ͠ͳ͕ΒɺProϓϥϯΛ͍ͬͯΔ͕ɺ΄ͱΜͲམͪ ͳ͍ • Businessϓϥϯʹ͢Εɺ99.9%ͷSLAΛಘΔ͜ͱͰ͖Δ
Netlify Ͱࠔͬͨ • Deploy previewsػೳ • σϑΥϧτ͕ ʮAutomatically build…ʯʹͳ͍ͬͯΔ
Netlify Ͱࠔͬͨ • PRΛ࡞ͬͨ࣌ʹϨϏϡʔ༻ͷڥΛཱͯͯ͘ΕΔ • ΊͬͪΌศརʂ • ͕ɺ͔͠͠ɺϚʔδ͞ΕͨޙϖʔδΓଓ͚Δ • ͔͠ɺফͤͳ͍
Netlify Ͱࠔͬͨ • ҰԠɺϩϘοτͳͲʹิ͞Εͳ͍Α͏ʹͳ͍ͬͯΔ ͕ɺաڈͷ։ൃ్தͷͷ͕ݟΕͯ͠·͏ • ͔͠ɺਪଌ͍͢͠URL • https://deploy-preview-1--site-name.netlify.com/ •
Λए͍ͯ͘͘͠ͱɺͲΜͲΜॳظͷը໘͕…
Netlify Ͱࠔͬͨ • ҰԠɺURLʹؚ·ΕΔαΠτ໊σϑΥϧτͰϥϯμϜͳจ ࣈྻʹͳ͍ͬͯΔ • ͕ɺཧͷ߹্ɺ໊લΛ͚͍ͭͨέʔε͋Δ
Netlify Ͱࠔͬͨ • ެࣜʹ࣭ͯ͠Έͨ • طʹͰ͖ͯ͠·ͬͨϓϨ Ϗϡʔ༻ͷϖʔδɺαΠ τ͝ͱফ͔͢͠ফ͢ํ๏ ͳ͍ɺͱͷ͜ͱ
ղܾࡦ • ϓϨϏϡʔڥʹ͚ͩ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
ղܾࡦ • ϖʔδ͕࡞͞Εͯ͠·͏ͱফͤͳ͍͠ɺ͋ͱ͔ΒBasicೝূ͔ ͚ΒΕͳ͍ͷͰɺ࠷ॳͷPRΛ͛Δલʹઃఆ͓ͯ͘͠ͱྑͦ͞͏ • ઃఆΛOFFʹ͢Δ͜ͱͰ͖Δ • ࡞͞Εͯ͠·͍ͬͯΔ߹αΠτ͝ͱফͯ͠ɺ࠶ߏங • ͦ͜·ͰେมͰͳ͍
• ϓϨϏϡʔΛݟͳ͕ΒPRϨϏϡʔ͕Ͱ͖ΔΑ͏ʹͳͬͨ
·ͱΊ
ॴײͳͲ • Gatsby + Netlify ͷΈ߹Θͤศར • ։ൃମݧͱͯ͠ྑ͔ͬͨ • ۀͰ
LPΛ࡞Δࡍͷٕज़ͱͯ͠࠾༻ͨ͠ࣄྫ
ίϚʔγϟϧ • We are hiring!!! - Ұॹʹಇؒ͘Λืूதʂ ձһສਓಥഁʂ ࠃ/PͷΧδϡΞϧΪϑταʔϏε