Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

mottox2
September 26, 2018

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

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

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

mottox2

September 26, 2018
Tweet

More Decks by mottox2

Other Decks in Programming

Transcript

  1. ͷ׆༻๏
    @mottox2
    /
    Netlify Meetup Tokyo #2
    ੩తαΠτ͚ͩ͡Όͳ͍
    ੩తαΠτϗεςΟϯά͚ͩ͡Όͳ͍ʂ

    View full-size slide

  2. • ໨ඪ: ΑΓଟ͘ͷਓʹ࢖ΘΕΔαʔϏεΛ࡞Γ͍ͨ
    • ݚڀςʔϚ: ΑΓૣ͘αʔϏεΛ্ཱͪ͛Δख๏
    • థਧ͖ΤϯδχΞ: ޱథͱϗϧϯΛਧ͖·͢
    • OSS׆ಈ: Gatsbyͷϝϯςφʔ
    mottox2
    @
    8FCϑϩϯτΤϯυͱσβΠϯͷϑϦʔϥϯε
    Who am I?

    View full-size slide

  3. #netlifytokyo
    Netlify
    • ੩తαΠτΛϗεςΟϯάͯ͘͠ΕΔαʔϏεa
    • BuildίϚϯυͱެ։ϦϙδτϦΛࢦఆ͢Δͱ͍͍͔Μ͡ʹσϓϩΠͯ͘͠ΕΔɻ
    netlify.com

    View full-size slide

  4. 静的サイトホスティングの事例
    はもういいかなと思いまして…
    静的サイトホスティング以外の活⽤法を紹介

    View full-size slide

  5. 本⽇お伝えするNetlify利⽤法
    • ػೳฤ
    • Netlify FunctionsΛར༻͢Δ
    • JSONϑΝΠϧΛ഑৴͢Δ
    • Ԡ༻ฤ
    • FunctionsͰSaaSͱͭͳ͙
    • NetlifyͰCMSΛߏங͢Δ

    View full-size slide

  6. Functionsを利⽤する
    機能編

    View full-size slide

  7. #netlifytokyo
    Netlify Functions
    ؔ਺͚ͩॻ͚͹͍͍ײ͡ʹಈ͔ͯ͠ΕΔαʔϏεɻத਎͸AWS lambda
    Function
    request response
    URL Call:
    https://example.com/hoge
    Status: 200
    body: Hello World
    ͚࣮ͩ͜͜૷͢Δ
    Functionsͱ͸ʁ

    View full-size slide

  8. #netlifytokyo
    Netlify Functions
    ϛχϚϜߏ੒ 1/3
    /functions/hello.js
    /netlify.toml
    • NetlifyͷઃఆϑΝΠϧ
    • ࣮ߦϓϩάϥϜΛؚΉσΟϨΫτϦΛࢦఆ
    • Event͔Βrequest৘ใΛऔಘ
    • callbackͰresponseΛ࿔Δ

    View full-size slide

  9. #netlifytokyo
    Netlify Functions
    ϛχϚϜߏ੒ 2/3

    View full-size slide

  10. #netlifytokyo
    Netlify Functions
    ϛχϚϜߏ੒ 3/3

    View full-size slide

  11. JSONを配信する
    機能編

    View full-size slide

  12. #netlifytokyo
    JSONͷ഑৴
    • ެ։σΟϨΫτϦΛࢦఆ͢Ε͹഑৴Ͱ͖ΔͷͰɺJSONϑΝΠϧ΋OKɻ
    public/
    ┗ sample.json

    View full-size slide

  13. #netlifytokyo
    JSONͷ഑৴
    • Q. ຖճJSONϑΝΠϧॻ͘ͷਏ͍ͷͰ͸ʁ
    • A. Θ͔ΔɻBuild commandͰJSONϑΝΠϧΛు͖ग़͢ίʔυΛॻ͚͹Α͍ɻ
    /netlify.toml
    /fetch.js
    Netlfiyの設定ファイル
    ビルドコマンドと公開ディレクトリを設定
    いい感じに処理したオブジェクトを出⼒
    Build commandのリダイレクトで
    public以下にJSONファイルとして保存される
    JSONͷੜ੒

    View full-size slide

  14. #netlifytokyo
    JSONͷ഑৴
    /public/_headers
    _headers
    • ެ։σΟϨΫτϦ௚Լʹஔ͍ͯɺϑΝΠϧ͝ͱʹϔομʔΛࢦఆ͢Δɻ
    • ͜ͷ৔߹͸഑৴͢ΔJSONϑΝΠϧʹCORS༻ͷϔομʔΛ͚ͭΔྫɻ
    • Q. ϨεϙϯεϔομʔΛ͍͡Γ͍ͨ
    • A. ग़དྷ·͢ɻ_headersͱ͍͏ઃఆϑΝΠϧͰՄೳͰ͢ɻ

    View full-size slide

  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
    ֦ுࢠͷѻ͍

    View full-size slide

  16. Slack as a CMS
    FunctionsとJSON配信を組み合わせた例

    View full-size slide

  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Ͱ഑৴͢Δ

    View full-size slide

  18. #netlifytokyo
    Slack Event API
    • Slack AppΛ࡞੒ͯ͠Event Subscriptionsͷઃఆ

    View full-size slide

  19. #netlifytokyo
    GitHub Repository Contents API
    https://developer.github.com/v3/repos/contents/
    • @octkit/rest ϥΠϒϥϦͰ΋createFile API͕ར༻Ͱ͖Δɻ
    • createFile APIʹΑͬͯ৽͍͠ίϛοτ͕࡞੒͞ΕΔɻ

    View full-size slide

  20. #netlifytokyo
    Build JSON file
    • createFile APIͷίϛοτʹΑͬͯϏϧυ͕։࢝͞ΕΔɻ
    • createFile APIͰอଘͨ͠ϑΝΠϧΛ·ͱΊͯJSONʹग़ྗ͢Δ

    View full-size slide

  21. mottox2.com
    事例 1: esa.ioをバックエンドにしたブログ
    ੩తαΠτࣄྫ

    View full-size slide

  22. #netlifytokyo
    ߏ੒ਤ
    esa.io
    1 2
    Netlify
    Build
    API
    3
    • 1. esa.ioͷهࣄ͕ߋ৽͞ΕΔɻ
    • 2. esa.ioͷWebhookͰNetlifyͷBuild hookΛୟ͘
    • 3. Ϗϧυதʹesa.ioͷAPIΛୟ͖ͭͭ੩తαΠτΛੜ੒͠ެ։
    FLOW

    View full-size slide

  23. #netlifytokyo
    mottox2.com
    • Build hooksΛઃఆͯ͠ੜ੒͞ΕͨURLʹPOSTϦΫΤετΛ౤͛ΔͱσϓϩΠͯ͘͠ΕΔɻ
    • ʮSettings > Build&Deploy => Build hooksʯͰઃఆՄ
    POINT
    WebhookΛར༻ͨ͠σϓϩΠ
    Build hook
    https://mottox2.com

    View full-size slide

  24. #netlifytokyo
    mottox2.com
    • Webhook΍APIͳͲ͕੔උ͞Ε͍ͯΔ։ൃऀϑϨϯυϦʔͳαʔϏε—
    • ݄500ԁͰυΩϡϝϯτ؅ཧͱϒϩάͷόοΫΤϯυΛ୲ͬͯ͘Ε͍ͯΔɻ
    esa.io: webhook͕࢖͑Δ৘ใڞ༗αʔϏε
    https://mottox2.com

    View full-size slide

  25. #netlifytokyo
    mottox2.com
    • ίϯςϯπߋ৽࣌ʹPOSTϦΫΤετΛ౤͛Δ
    POINT
    esa.io: webhook͕࢖͑Δ৘ใڞ༗αʔϏε
    Webhook
    https://mottox2.com

    View full-size slide

  26. #netlifytokyo
    mottox2.com
    • ੩తαΠτδΣωϨʔλʔa
    • Ϗϧυ͢Δࡍʹɺesa.ioͷAPIΛ

    ୟ͍ͯαΠτΛੜ੒a
    • APIͷϨεϙϯε΋ؚΊͯ੩తϑΝ
    Πϧʹॻ͖ग़ͯ͘͠ΕΔa
    • ؔ࿈ϫʔυ: JAM stack
    POINT
    GatsbyJS: ֎෦ͷσʔλιʔεΛར༻ͯ͠αΠτΛߏங͢Δ੩తαΠτδΣωϨʔλʔ
    GatsbyJS
    https://mottox2.com

    View full-size slide

  27. 外部サービスのAPI化
    事例 2: 外部APIをもとにBFF的なAPIを配信

    View full-size slide

  28. #netlifytokyo
    ֎෦αʔϏεͷAPIԽ
    • node fetch.js > public/products.json͋
    • APIΛୟ͍ͯ੔ܗ͠ग़ྗ͢ΔJS
    • ׂͱԠ༻ൣғ޿͍
    POINT
    /fetch.js
    ೚ҙͷαΠτͷWeb APIԽ͕Մೳ
    Build command

    View full-size slide

  29. 10/8 技術書典5
    @池袋サンシャインシティ
    最後に宣伝

    View full-size slide

  30. 最後に
    ٕज़ॻయ൦෍෺
    今⽇のスライドより簡単な内容になっています。
    ͚52
    ͲͪΒ΋NetlifyͰಈ͔͢લఏͰॻ͍͍ͯ·͢ɻೖ໳͍ͨ͠ͱ͍͏ํ͸ͥͻʂ

    View full-size slide