静的サイトだけじゃないNetlifyの活用法 / netlify-extra-mode

静的サイトだけじゃないNetlfiyの活用法
Netlify Meetup Tokyo #2で話しました。

事例1: esa.ioをバックエンドとしたブログ https://mottox2.com

Transcript

1. ͷ׆༻๏ @mottox2 / Netlify Meetup Tokyo #2 ੩తαΠτ͚ͩ͡Όͳ͍ ੩తαΠτϗεςΟϯά͚ͩ͡Όͳ͍ʂ
2. • ໨ඪ: ΑΓଟ͘ͷਓʹ࢖ΘΕΔαʔϏεΛ࡞Γ͍ͨ • ݚڀςʔϚ: ΑΓૣ͘αʔϏεΛ্ཱͪ͛Δख๏ • థਧ͖ΤϯδχΞ: ޱథͱϗϧϯΛਧ͖·͢ • OSS׆ಈ: Gatsbyͷϝϯςφʔ mottox2 @ 8FCϑϩϯτΤϯυͱσβΠϯͷϑϦʔϥϯε Who am I?
3. #netlifytokyo Netlify • ੩తαΠτΛϗεςΟϯάͯ͘͠ΕΔαʔϏεa • BuildίϚϯυͱެ։ϦϙδτϦΛࢦఆ͢Δͱ͍͍͔Μ͡ʹσϓϩΠͯ͘͠ΕΔɻ netlify.com
4. 静的サイトホスティングの事例 はもういいかなと思いまして… 静的サイトホスティング以外の活⽤法を紹介
5. 本⽇お伝えするNetlify利⽤法 • ػೳฤ • Netlify FunctionsΛར༻͢Δ • JSONϑΝΠϧΛ഑৴͢Δ • Ԡ༻ฤ • FunctionsͰSaaSͱͭͳ͙ • NetlifyͰCMSΛߏங͢Δ
6. Functionsを利⽤する 機能編
7. #netlifytokyo Netlify Functions ؔ਺͚ͩॻ͚͹͍͍ײ͡ʹಈ͔ͯ͠ΕΔαʔϏεɻத਎͸AWS lambda Function request response URL Call: https://example.com/hoge Status: 200 body: Hello World ͚࣮ͩ͜͜૷͢Δ Functionsͱ͸ʁ
8. #netlifytokyo Netlify Functions ϛχϚϜߏ੒ 1/3 /functions/hello.js /netlify.toml • NetlifyͷઃఆϑΝΠϧ • ࣮ߦϓϩάϥϜΛؚΉσΟϨΫτϦΛࢦఆ • Event͔Βrequest৘ใΛऔಘ • callbackͰresponseΛ࿔Δ
9. #netlifytokyo Netlify Functions ϛχϚϜߏ੒ 2/3
10. #netlifytokyo Netlify Functions ϛχϚϜߏ੒ 3/3
11. JSONを配信する 機能編
12. #netlifytokyo JSONͷ഑৴ • ެ։σΟϨΫτϦΛࢦఆ͢Ε͹഑৴Ͱ͖ΔͷͰɺJSONϑΝΠϧ΋OKɻ public/ ┗ sample.json
13. #netlifytokyo JSONͷ഑৴ • Q. ຖճJSONϑΝΠϧॻ͘ͷਏ͍ͷͰ͸ʁ • A. Θ͔ΔɻBuild commandͰJSONϑΝΠϧΛు͖ग़͢ίʔυΛॻ͚͹Α͍ɻ /netlify.toml /fetch.js Netlfiyの設定ファイル ビルドコマンドと公開ディレクトリを設定 いい感じに処理したオブジェクトを出⼒ Build commandのリダイレクトで public以下にJSONファイルとして保存される JSONͷੜ੒
14. #netlifytokyo JSONͷ഑৴ /public/_headers _headers • ެ։σΟϨΫτϦ௚Լʹஔ͍ͯɺϑΝΠϧ͝ͱʹϔομʔΛࢦఆ͢Δɻ • ͜ͷ৔߹͸഑৴͢ΔJSONϑΝΠϧʹCORS༻ͷϔομʔΛ͚ͭΔྫɻ • Q. ϨεϙϯεϔομʔΛ͍͡Γ͍ͨ • A. ग़དྷ·͢ɻ_headersͱ͍͏ઃఆϑΝΠϧͰՄೳͰ͢ɻ
15. #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 ֦ுࢠͷѻ͍
16. Slack as a CMS FunctionsとJSON配信を組み合わせた例
17. #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Ͱ഑৴͢Δ
18. #netlifytokyo Slack Event API • Slack AppΛ࡞੒ͯ͠Event Subscriptionsͷઃఆ
19. #netlifytokyo GitHub Repository Contents API https://developer.github.com/v3/repos/contents/ • @octkit/rest ϥΠϒϥϦͰ΋createFile API͕ར༻Ͱ͖Δɻ • createFile APIʹΑͬͯ৽͍͠ίϛοτ͕࡞੒͞ΕΔɻ
20. #netlifytokyo Build JSON file • createFile APIͷίϛοτʹΑͬͯϏϧυ͕։࢝͞ΕΔɻ • createFile APIͰอଘͨ͠ϑΝΠϧΛ·ͱΊͯJSONʹग़ྗ͢Δ
21. DEMO
22. mottox2.com 事例 1: esa.ioをバックエンドにしたブログ ੩తαΠτࣄྫ
23. #netlifytokyo ߏ੒ਤ esa.io 1 2 Netlify Build API 3 • 1. esa.ioͷهࣄ͕ߋ৽͞ΕΔɻ • 2. esa.ioͷWebhookͰNetlifyͷBuild hookΛୟ͘ • 3. Ϗϧυதʹesa.ioͷAPIΛୟ͖ͭͭ੩తαΠτΛੜ੒͠ެ։ FLOW
24. #netlifytokyo mottox2.com • Build hooksΛઃఆͯ͠ੜ੒͞ΕͨURLʹPOSTϦΫΤετΛ౤͛ΔͱσϓϩΠͯ͘͠ΕΔɻ • ʮSettings > Build&Deploy => Build hooksʯͰઃఆՄ POINT WebhookΛར༻ͨ͠σϓϩΠ Build hook https://mottox2.com
25. #netlifytokyo mottox2.com • Webhook΍APIͳͲ͕੔උ͞Ε͍ͯΔ։ൃऀϑϨϯυϦʔͳαʔϏε— • ݄500ԁͰυΩϡϝϯτ؅ཧͱϒϩάͷόοΫΤϯυΛ୲ͬͯ͘Ε͍ͯΔɻ esa.io: webhook͕࢖͑Δ৘ใڞ༗αʔϏε https://mottox2.com
26. #netlifytokyo mottox2.com • ίϯςϯπߋ৽࣌ʹPOSTϦΫΤετΛ౤͛Δ POINT esa.io: webhook͕࢖͑Δ৘ใڞ༗αʔϏε Webhook https://mottox2.com
27. #netlifytokyo mottox2.com • ੩తαΠτδΣωϨʔλʔa • Ϗϧυ͢Δࡍʹɺesa.ioͷAPIΛ
 ୟ͍ͯαΠτΛੜ੒a • APIͷϨεϙϯε΋ؚΊͯ੩తϑΝ Πϧʹॻ͖ग़ͯ͘͠ΕΔa • ؔ࿈ϫʔυ: JAM stack POINT GatsbyJS: ֎෦ͷσʔλιʔεΛར༻ͯ͠αΠτΛߏங͢Δ੩తαΠτδΣωϨʔλʔ GatsbyJS https://mottox2.com
28. 外部サービスのAPI化 事例 2: 外部APIをもとにBFF的なAPIを配信
29. #netlifytokyo ֎෦αʔϏεͷAPIԽ • node fetch.js > public/products.json͋ • APIΛୟ͍ͯ੔ܗ͠ग़ྗ͢ΔJS • ׂͱԠ༻ൣғ޿͍ POINT /fetch.js ೚ҙͷαΠτͷWeb APIԽ͕Մೳ Build command
30. 10/8 技術書典5 @池袋サンシャインシティ 最後に宣伝
31. 最後に ٕज़ॻయ൦෍෺ 今⽇のスライドより簡単な内容になっています。 ͚52 ͲͪΒ΋NetlifyͰಈ͔͢લఏͰॻ͍͍ͯ·͢ɻೖ໳͍ͨ͠ͱ͍͏ํ͸ͥͻʂ