Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
静的サイトだけじゃないNetlifyの活用法 / netlify-extra-mode
mottox2
September 26, 2018
Programming
8
2.1k
静的サイトだけじゃないNetlifyの活用法 / netlify-extra-mode
静的サイトだけじゃないNetlfiyの活用法
Netlify Meetup Tokyo #2で話しました。
事例1: esa.ioをバックエンドとしたブログ
https://mottox2.com
mottox2
September 26, 2018
Tweet
Share
More Decks by mottox2
See All by mottox2
Figma Plugin公開までの壁を乗り越える
mottox2
1
740
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
420
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.2k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
410
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
2.8k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
30k
プレイヤー目線の技術ブランディング / personal branding
mottox2
4
3.2k
JSXで作るDSL / jsx-dsl
mottox2
1
1.6k
SSRを検討する際にSSGも検討しませんか? / ssr or ssg
mottox2
15
9.3k
Other Decks in Programming
See All in Programming
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
Why Money Forward contributes to Ruby and RubyKaigi?
luccafort
0
270
Gradle build: The time is now
nonews
1
510
Glance App Widgetでウィジェットを作ろう / MoT TechTalk #15
mot_techtalk
0
160
Cloudflare Workersと状態管理
chimame
3
510
OSSから学んだPR Descriptionの書き方
fugakkbn
4
140
2023年にクル(かもしれない)通信ミドルウェア技術(仮)
s_hosoai
0
230
Writing Greener Java Applications
hollycummins
0
370
なぜRubyコミュニティにコミットするのか?
luccafort
0
340
社会人 20 年目エンジニア、発信で技術学びなおしてる話
e99h2121
1
150
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
150
23年のJavaトレンドは?Quarkusで理解するコンテナネイティブJava
tatsuya1bm
1
140
Featured
See All Featured
Web development in the modern age
philhawksworth
197
9.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
Thoughts on Productivity
jonyablonski
49
2.7k
YesSQL, Process and Tooling at Scale
rocio
159
12k
Designing Experiences People Love
moore
130
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
BBQ
matthewcrist
75
8.1k
How STYLIGHT went responsive
nonsquared
89
4.2k
Typedesign – Prime Four
hannesfritz
34
1.5k
Making the Leap to Tech Lead
cromwellryan
117
7.7k
The Cult of Friendly URLs
andyhume
69
5.1k
Become a Pro
speakerdeck
PRO
6
3.2k
Transcript
ͷ׆༻๏ @mottox2 / Netlify Meetup Tokyo #2 ੩తαΠτ͚ͩ͡Όͳ͍ ੩తαΠτϗεςΟϯά͚ͩ͡Όͳ͍ʂ
• ඪ: ΑΓଟ͘ͷਓʹΘΕΔαʔϏεΛ࡞Γ͍ͨ • ݚڀςʔϚ: ΑΓૣ͘αʔϏεΛ্ཱͪ͛Δख๏ • థਧ͖ΤϯδχΞ: ޱథͱϗϧϯΛਧ͖·͢ •
OSS׆ಈ: Gatsbyͷϝϯςφʔ mottox2 @ 8FCϑϩϯτΤϯυͱσβΠϯͷϑϦʔϥϯε Who am I?
#netlifytokyo Netlify • ੩తαΠτΛϗεςΟϯάͯ͘͠ΕΔαʔϏεa • BuildίϚϯυͱެ։ϦϙδτϦΛࢦఆ͢Δͱ͍͍͔Μ͡ʹσϓϩΠͯ͘͠ΕΔɻ netlify.com
静的サイトホスティングの事例 はもういいかなと思いまして… 静的サイトホスティング以外の活⽤法を紹介
本⽇お伝えするNetlify利⽤法 • ػೳฤ • Netlify FunctionsΛར༻͢Δ • JSONϑΝΠϧΛ৴͢Δ • Ԡ༻ฤ
• FunctionsͰSaaSͱͭͳ͙ • NetlifyͰCMSΛߏங͢Δ
Functionsを利⽤する 機能編
#netlifytokyo Netlify Functions ͚ؔͩॻ͚͍͍ײ͡ʹಈ͔ͯ͠ΕΔαʔϏεɻதAWS lambda Function request response URL Call:
https://example.com/hoge Status: 200 body: Hello World ͚࣮ͩ͜͜͢Δ Functionsͱʁ
#netlifytokyo Netlify Functions ϛχϚϜߏ 1/3 /functions/hello.js /netlify.toml • NetlifyͷઃఆϑΝΠϧ •
࣮ߦϓϩάϥϜΛؚΉσΟϨΫτϦΛࢦఆ • Event͔ΒrequestใΛऔಘ • callbackͰresponseΛ࿔Δ
#netlifytokyo Netlify Functions ϛχϚϜߏ 2/3
#netlifytokyo Netlify Functions ϛχϚϜߏ 3/3
JSONを配信する 機能編
#netlifytokyo JSONͷ৴ • ެ։σΟϨΫτϦΛࢦఆ͢Ε৴Ͱ͖ΔͷͰɺJSONϑΝΠϧOKɻ public/ ┗ sample.json
#netlifytokyo JSONͷ৴ • Q. ຖճJSONϑΝΠϧॻ͘ͷਏ͍ͷͰʁ • A. Θ͔ΔɻBuild commandͰJSONϑΝΠϧΛు͖ग़͢ίʔυΛॻ͚Α͍ɻ /netlify.toml
/fetch.js Netlfiyの設定ファイル ビルドコマンドと公開ディレクトリを設定 いい感じに処理したオブジェクトを出⼒ Build commandのリダイレクトで public以下にJSONファイルとして保存される JSONͷੜ
#netlifytokyo JSONͷ৴ /public/_headers _headers • ެ։σΟϨΫτϦԼʹஔ͍ͯɺϑΝΠϧ͝ͱʹϔομʔΛࢦఆ͢Δɻ • ͜ͷ߹৴͢ΔJSONϑΝΠϧʹCORS༻ͷϔομʔΛ͚ͭΔྫɻ • Q.
ϨεϙϯεϔομʔΛ͍͡Γ͍ͨ • A. ग़དྷ·͢ɻ_headersͱ͍͏ઃఆϑΝΠϧͰՄೳͰ͢ɻ
#netlifytokyo JSONͷ৴ • Q. ֦ுࢠ͕अຐͰʁ • A. Θ͔Δɻ࣮ݧͨ͠Βग़དྷ·ͨ͠ɻ public/ ┗
1.html posts/ ┗ index.html ┗ => your.domain.netlify.com/posts/1 => your.domain.netlify.com/posts/ POINT ֦ுࢠͷলུ NetliyͰ.htmlলུ͞ΕΔ POINT _headers JSONͱͯ͠ϨεϙϯεฦͤOK ┗ _headers /public/_headers ֦ுࢠͷѻ͍
Slack as a CMS FunctionsとJSON配信を組み合わせた例
#netlifytokyo ߏਤ • 1. SlackͰreaction emoji͕Ճ͞ΕΔ • 2. Event APIʹΑͬͯNetlify
FunctionsʹϦΫΤετ • 3. Netlify FunctionsͰemojiͷՃ͞ΕͨϝοηʔδΛ ɹGitHubͷContentsAPIʹΑͬͯอଘ • 4. ContentsAPIʹΑͬͯੜͨ͡commitʹΑͬͯNetlifyͷϏϧυ͕։࢝ • 5. อଘ͞ΕͨϝοηʔδΛJSONʹ·ͱΊͯެ։ FLOW Slack 1 2 4 3 GitHub New commit Netlify Function Netlify Build&Publish 5 • SlackͰreaction͕͍ͭͨϝοηʔδΛGitHubʹอଘͯ͠ɺNetlifyͰ৴͢Δ
#netlifytokyo Slack Event API • Slack AppΛ࡞ͯ͠Event Subscriptionsͷઃఆ
#netlifytokyo GitHub Repository Contents API https://developer.github.com/v3/repos/contents/ • @octkit/rest ϥΠϒϥϦͰcreateFile API͕ར༻Ͱ͖Δɻ
• createFile APIʹΑͬͯ৽͍͠ίϛοτ͕࡞͞ΕΔɻ
#netlifytokyo Build JSON file • createFile APIͷίϛοτʹΑͬͯϏϧυ͕։࢝͞ΕΔɻ • createFile APIͰอଘͨ͠ϑΝΠϧΛ·ͱΊͯJSONʹग़ྗ͢Δ
DEMO
mottox2.com 事例 1: esa.ioをバックエンドにしたブログ ੩తαΠτࣄྫ
#netlifytokyo ߏਤ esa.io 1 2 Netlify Build API 3 •
1. esa.ioͷهࣄ͕ߋ৽͞ΕΔɻ • 2. esa.ioͷWebhookͰNetlifyͷBuild hookΛୟ͘ • 3. Ϗϧυதʹesa.ioͷAPIΛୟ͖ͭͭ੩తαΠτΛੜ͠ެ։ FLOW
#netlifytokyo mottox2.com • Build hooksΛઃఆͯ͠ੜ͞ΕͨURLʹPOSTϦΫΤετΛ͛ΔͱσϓϩΠͯ͘͠ΕΔɻ • ʮSettings > Build&Deploy =>
Build hooksʯͰઃఆՄ POINT WebhookΛར༻ͨ͠σϓϩΠ Build hook https://mottox2.com
#netlifytokyo mottox2.com • WebhookAPIͳͲ͕උ͞Ε͍ͯΔ։ൃऀϑϨϯυϦʔͳαʔϏε— • ݄500ԁͰυΩϡϝϯτཧͱϒϩάͷόοΫΤϯυΛ୲ͬͯ͘Ε͍ͯΔɻ esa.io: webhook͕͑Δใڞ༗αʔϏε https://mottox2.com
#netlifytokyo mottox2.com • ίϯςϯπߋ৽࣌ʹPOSTϦΫΤετΛ͛Δ POINT esa.io: webhook͕͑Δใڞ༗αʔϏε Webhook https://mottox2.com
#netlifytokyo mottox2.com • ੩తαΠτδΣωϨʔλʔa • Ϗϧυ͢Δࡍʹɺesa.ioͷAPIΛ ୟ͍ͯαΠτΛੜa • APIͷϨεϙϯεؚΊͯ੩తϑΝ Πϧʹॻ͖ग़ͯ͘͠ΕΔa
• ؔ࿈ϫʔυ: JAM stack POINT GatsbyJS: ֎෦ͷσʔλιʔεΛར༻ͯ͠αΠτΛߏங͢Δ੩తαΠτδΣωϨʔλʔ GatsbyJS https://mottox2.com
外部サービスのAPI化 事例 2: 外部APIをもとにBFF的なAPIを配信
#netlifytokyo ֎෦αʔϏεͷAPIԽ • node fetch.js > public/products.json͋ • APIΛୟ͍ͯܗ͠ग़ྗ͢ΔJS •
ׂͱԠ༻ൣғ͍ POINT /fetch.js ҙͷαΠτͷWeb APIԽ͕Մೳ Build command
10/8 技術書典5 @池袋サンシャインシティ 最後に宣伝
最後に ٕज़ॻయ൦ 今⽇のスライドより簡単な内容になっています。 ͚52 ͲͪΒNetlifyͰಈ͔͢લఏͰॻ͍͍ͯ·͢ɻೖ͍ͨ͠ͱ͍͏ํͥͻʂ