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
520
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
910
Gatsby.jsとCloud Functionsで毎週自動でコンテンツが更新され続けるフレームワーク比較サイトを作った話 / gotanda_js_13
kikunantoka
1
2.3k
Gatsby.jsとCloud Functionsで毎週自動でコンテンツが更新され続けるフレームワーク比較サイトを作った話 / frontend_night_1
kikunantoka
3
1.4k
サービスがゼロからN億円規模になるまに実践した7つのやっていき / 7_yatteiki_battle_conference_u30_2019
kikunantoka
1
1.2k
Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-for-biz-lp
kikunantoka
2
540
Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-for-biz-lp
kikunantoka
1
1.8k
今日から始める Flood.io / fuka-taisaku-night-01
kikunantoka
0
270
20万RPMを捌くRailsアプリケーションの作り方
kikunantoka
0
720
MVPに絞ったら個人開発でもちゃんとリリースできた話
kikunantoka
1
480
Other Decks in Technology
See All in Technology
誰でもできる!OpenAI Embedding API を活用して高度なレコメンド機能を実現してみよう - A story about implementing an advanced recommendation function using the OpenAI Embedding API
sugoikondo
2
170
LLMマルチエージェントのフローエンジニアリングを支えるLLM Ops
pharma_x_tech
4
1k
Android15(SDK35)から強制される、Edge-to-Edgeに対応しなければならない
sansantech
PRO
0
340
【虎の穴ラボ Tech Talk】虎の穴ラボTech Talk説明資料
toranoana
0
120
GitHub Actions/Docker/Terraform/Renovate で最小限の Monorepo CD パイプラインを作る / Minimalistic Monorepo CD Pipeline with GitHub Actions, Docker, Terraform and Renovate
yuyatakeyama
4
290
何故負荷試験が大切かを考える
iriikeita
0
110
mcwithcode プロジェクト概要
takunology
0
7.9k
FastAPIでのasync defとdefの使い分け
takashi1029
5
1.1k
社内でのサーバーレスアプリケーション開発を、プラットフォームエンジニアリングを整備して 迅速化・安定化させる取り組み
wakatsuki
0
2.6k
AI時代のアジャイル開発(XP祭り2024版) / Agile Development in the AI Era in XPJUG
takaking22
8
1.7k
Classmethod AI Talks(CATs) #1 司会進行スライド(2024.09.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol1_2024-09-19
shinyaa31
0
350
My Generation 年配者がこの先生きのこるには/My Generation How elder engineers can survive
kwappa
1
3.9k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
What's new in Ruby 2.0
geeforr
340
31k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
Fireside Chat
paigeccino
31
2.9k
Web Components: a chance to create the future
zenorocha
309
42k
A designer walks into a library…
pauljervisheath
201
24k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
158
15k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
620
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
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ͷΧδϡΞϧΪϑταʔϏε