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

Cloudflare Workers は楽しい!

Kei Kamikawa
November 24, 2023

Cloudflare Workers は楽しい!

2023-11-24 の Cloudflare Workers Meetup by NOT A HOTEL で話ました
https://notahotel-cf.peatix.com/

Kei Kamikawa

November 24, 2023
Tweet

More Decks by Kei Kamikawa

Other Decks in Programming

Transcript

  1. $MPVE
    fl
    BSF8PSLFST͸ָ͍͠ʂ
    $MPVE
    fl
    BSF8PSLFST.FFUVQCZ/05")05&-

    View full-size slide

  2. !DPEFIFY !$PEF)FY
    w /05")05&-Ͱಇ͍͍ͯ·͢
    w 1P$Λ࡞ͬͯɺӡ༻·Ͱ͍࣋ͬͯ͘
    w ࣗಈԽɺ"*ΠϯςάϨʔγϣϯ
    w ͓٬༷޲͚ɺࣾ಺޲͚

    View full-size slide

  3. IUUQTXPSLFSTUFDIDPOOQBTTDPNFWFOU

    View full-size slide

  4. ʮ෼͔Γ΍͍͢ʯ͸ָ͍͠

    View full-size slide

  5. ʮ෼͔Γ΍͍͢ʯ͸ָ͍͠
    w ΞϓϦέʔγϣϯͷ։ൃ؀ڥΛ੔͑Δ
    w ։ൃͨ͠ػೳΛσϓϩΠͯ͠࢖ͬͯ΋Β͏

    View full-size slide

  6. ΞϓϦέʔγϣϯͷ։ൃ؀ڥΛ੔͑Δ
    ίϯςφΛ࢖ͬͨ؀ڥͱͷൺֱ

    View full-size slide

  7. ίϯςφ࣌୅ͷ։ൃ؀ڥ

    View full-size slide

  8. ίϯςφ࣌୅ͷ։ൃ؀ڥ
    w ։ൃ؀ڥΛ੔͑Δͷ͸໘౗͍͘͞ʂ
    w

    w

    View full-size slide

  9. ίϯςφ࣌୅ͷ։ൃ؀ڥ
    w ։ൃ؀ڥΛ੔͑Δͷ͸໘౗͍͘͞ʂ
    w %PDLFS
    fi
    MFͷهड़ɺΞϓϦΛಈ͔ͨ͢Ίͷઃఆ
    ϑΝΠϧͷهड़ɺ؀ڥม਺ͳͲ
    w

    View full-size slide

  10. ίϯςφ࣌୅ͷ։ൃ؀ڥ
    w ։ൃ؀ڥΛ੔͑Δͷ͸໘౗͍͘͞ʂ
    w %PDLFS
    fi
    MFͷهड़ɺΞϓϦΛಈ͔ͨ͢Ίͷઃఆ
    ϑΝΠϧͷهड़ɺ؀ڥม਺ͳͲ
    w %#ͩͬͨΓ2VFVFͩͬͨΓɺ$SPO+PCͳͲ
    ΛϩʔΧϧͰ༻ҙ͢Δͷ΋େม

    View full-size slide

  11. ֮͑Δ͜ͱ͕͍ͬͺ͍ʂʂ

    View full-size slide

  12. $MPVE
    fl
    BSF8PSLFSTͷ৔߹

    View full-size slide

  13. $MPVE
    fl
    BSF8PSLFSTͷ৔߹
    w ։ൃ؀ڥ͸ςϯϓϨʔτΛ࢖ͬͯηοτΞοϓՄೳ
    w ։ൃ؀ڥͱσϓϩΠ؀ڥͷဃ཭͕গͳ͍
    w ϥϯλΠϜͷXPSLFSE͸044

    IUUQTHJUIVCDPNDMPVE
    fl
    BSFXPSLFSE
    w Πϯϑϥͷػೳ΋XPSLFSEΛܦ༝ͯ͠ར༻Ͱ͖Δ

    View full-size slide

  14. ΞϓϦέʔγϣϯͷ։ൃ؀ڥΛ੔͑Δ
    $ npx create-cloudflare my-app --framework hono \


    --deploy false

    View full-size slide

  15. ΞϓϦέʔγϣϯͷ։ൃ؀ڥΛ੔͑Δ
    $ tree my-app --gitignore


    my-app


    ├── README.md


    ├── package.json


    ├── src


    │ └── index.ts


    ├── tsconfig.json

    └── wrangler.toml

    View full-size slide

  16. ΞϓϦέʔγϣϯͷ։ൃ؀ڥΛ੔͑Δ
    $ cd my-app && npm run dev

    $ curl http://localhost:8787

    Hello Hono!

    View full-size slide

  17. w XSBOHMFSUPNMʹ͸σϓϩΠޙʹར༻͢Δ؀ڥม਺Λॻ͘
    w EFWWBSTʹ͸ϩʔΧϧͰར༻͍ͨ͠؀ڥม਺Λॻ͘
    ؀ڥม਺Λ੔͑Δ

    View full-size slide

  18. ؀ڥม਺Λ੔͑Δ
    $ echo "ENV = \"local\"" >> .dev.vars

    $ ls .dev.vars


    .dev.vars

    View full-size slide

  19. name = "my-app"


    compatibility_date = "2023-01-01"


    [vars]


    ENV = "development"
    ؀ڥม਺Λ੔͑Δ
    XSBOHMFSUPNM

    View full-size slide

  20. import { Hono } from "hono";


    const app = new Hono<{


    Bindings: {


    ENV: string;


    };


    }>();


    app.get("/", (c) => c.text(c.env.ENV));


    export default app;
    ؀ڥม਺Λ੔͑Δ
    JOEFYUT

    View full-size slide

  21. ؀ڥม਺Λ੔͑Δ
    $ cd my-app && npm run dev

    $ curl http://localhost:8787

    local

    View full-size slide

  22. w XSBOHMFSίϚϯυΛར༻ͯ͠ϦιʔεΛ࡞੒
    w ϦιʔεΛར༻͢ΔͨΊʹXSBOHMFSUPNM΁ઃఆΛهड़
    w $MPVE
    fl
    BSF8PSLFSTͰར༻Ͱ͖Δϛυϧ΢ΣΞ͸

    جຊಉ͡
    ϛυϧ΢ΣΞΛ੔͑Δ

    View full-size slide

  23. ϛυϧ΢ΣΞΛ੔͑Δʢྫ,7ʣ
    $ npx wrangler kv:namespace create TEST_KV


    ⛅ wrangler 3.17.1


    -------------------


    🌀 Creating namespace with title "my-app-TEST_KV"


    ✨ Success!


    Add the following to your configuration file in

    your kv_namespaces array:


    { binding = "TEST_KV", id = "da56a0e3ee6641fabf26b726e60fa550" }

    View full-size slide

  24. [[kv_namespaces]]


    binding = "TEST_KV"


    id = "da56a0e3ee6641fabf26b726e60fa550"
    XSBOHMFSUPNM
    ϛυϧ΢ΣΞΛ੔͑Δʢྫ,7ʣ

    View full-size slide

  25. const app = new Hono<{


    Bindings: { TEST_KV: KVNamespace }


    }>();


    app.get("/counter", async (c) => {


    const key = c.req.query()["key"] || "defaultKey";


    const count = Number(await c.env.TEST_KV.get(key));


    const count = !isNaN(value) ? value + 1 : 1;


    await c.env.TEST_KV.put(key, String(count));


    return c.text(String(count));


    });


    export default app;
    JOEFYUT
    ϛυϧ΢ΣΞΛ੔͑Δʢྫ,7ʣ

    View full-size slide

  26. $ curl http://localhost:8787/counter

    1
    ϛυϧ΢ΣΞΛ੔͑Δʢྫ,7ʣ

    View full-size slide

  27. ։ൃͨ͠ػೳΛσϓϩΠ͢Δ
    εςʔδϯάͷ෼཭

    View full-size slide

  28. σϓϩΠ͢Δ
    $ npx wrangler deploy src/index.ts

    ⛅ wrangler 3.17.1


    -------------------


    Your worker has access to the following bindings:


    - KV Namespaces:


    - TEST_KV: da56a0e3ee6641fabf26b726e60fa550


    Total Upload: 45.37 KiB / gzip: 10.97 KiB


    Uploaded my-app (0.93 sec)


    Published my-app (0.45 sec)


    https://my-app.example.workers.dev


    Current Deployment ID: 3fa11a11-bb8e-4442-bafb-4d16b157ee34

    View full-size slide

  29. σϓϩΠ͢Δ
    $ curl https://my-app.example.workers.dev

    development

    $ curl https://my-app.example.workers.dev/counter


    1

    View full-size slide

  30. w XSBOHMFSUPNMʹ֤؀ڥʹ߹ΘͤͨઃఆΛهड़Ͱ͖Δ
    w Πϯϑϥ΋֤؀ڥ͝ͱʹ༻ҙՄೳ
    σϓϩΠ؀ڥΛෳ਺༻ҙ͢Δ

    View full-size slide

  31. σϓϩΠ؀ڥΛෳ਺༻ҙ͢Δ
    name = "my-app-dev"

    [[env.prd]]


    name = "my-app-prd"


    [env.prd.vars]


    ENV = "production"


    [[env.prd.kv_namespaces]]


    binding = "TEST_KV"


    id = "6054ddfbe0bc4f00b1abaa74af92b413"
    XSBOHMFSUPNM

    View full-size slide

  32. w هड़ͯͨ͠OBNFNZBQQΛNZBQQEFW΁मਖ਼
    w ৽͘͠ຊ൪༻ͷઃఆΛ௥ه
    σϓϩΠ؀ڥΛෳ਺༻ҙ͢Δ

    View full-size slide

  33. ։ൃεςʔδ΁σϓϩΠ͢Δ
    $ npx wrangler deploy src/index.ts

    ⛅ wrangler 3.17.1


    -------------------


    Your worker has access to the following bindings:


    - KV Namespaces:


    - TEST_KV: da56a0e3ee6641fabf26b726e60fa550


    Total Upload: 45.37 KiB / gzip: 10.97 KiB


    Uploaded my-app-dev (0.93 sec)


    Published my-app-dev (0.45 sec)


    https://my-app-dev.example.workers.dev


    Current Deployment ID: 3fa11a11-bb8e-4442-bafb-4d16b157ee34

    View full-size slide

  34. ։ൃεςʔδ΁σϓϩΠ͢Δ
    $ curl https://my-app-dev.example.workers.dev

    development

    $ curl https://my-app-dev.example.workers.dev/counter


    1

    View full-size slide

  35. ຊ൪εςʔδ΁σϓϩΠ͢Δ
    $ npx wrangler deploy src/index.ts —-env prd

    ⛅ wrangler 3.17.1


    -------------------


    Your worker has access to the following bindings:


    - KV Namespaces:


    - TEST_KV: 6054ddfbe0bc4f00b1abaa74af92b413


    Total Upload: 45.37 KiB / gzip: 10.97 KiB


    Uploaded my-app-dev (0.93 sec)


    Published my-app-prd (0.45 sec)


    https://my-app-prd.example.workers.dev


    Current Deployment ID: 7219bd7f-e4d3-47d0-970b-5917523da603

    View full-size slide

  36. ຊ൪εςʔδ΁σϓϩΠ͢Δ
    $ curl https://my-app-prd.example.workers.dev

    production

    $ curl https://my-app-prd.example.workers.dev/counter


    1

    View full-size slide

  37. w Ϗϧυ࣌ؒͱH[JQѹॖ࣌ؒͰ͕͔͔࣌ؒΔ͕ɺͦΕͰ΋

    ෼ະຬͰ׬͍ྃͯ͠Δ
    w σϓϩΠ͸ϏϧυࡁΈͷ+BWB4DSJQUϑΝΠϧΛΞοϓ
    ϩʔυ͢Δײ͡ͳͷͰ଎͍ʂ
    σϓϩΠ࣌ؒ

    View full-size slide

  38. ʮؾܰʹ࢖͑Δʯ͸ָ͍͠

    View full-size slide

  39. ʮؾܰʹ࢖͑Δʯ͸ָ͍͠
    w ͪΐͬͱͨ͠ϓϩΩγαʔόʔ
    w جຊ41"͚ͩͲɺগ͠ͷॲཧͰόοΫΤϯυ

    αʔόʔ͕ཉ͍͠
    w ؆୯ʹ༻ҙ͍ͨ͠

    View full-size slide

  40. ͪΐͬͱͨ͠Ϣʔεέʔε
    /05")05&-ͷ৔߹

    View full-size slide

  41. $034ͷϔομ௥Ճ

    View full-size slide

  42. $034ͷϔομ௥Ճ

    View full-size slide

  43. $034ͷϔομ௥Ճ

    View full-size slide

  44. ໰͍߹Θͤͷϝλ৘ใ௥Ճ

    View full-size slide

  45. w ΞϓϦ͔Β;FOEFTLͷ໰͍߹ΘͤϑΥʔϜ΁ͷ

    ಋઢ͕༻ҙ͞Ε͍ͯΔ
    w ϩάΠϯதͷͲͷ͓٬༷͔Βͷ͓໰͍߹Θ͔ͤ

    ೺Ѳ͍ͨ͠
    w ؔ࿈͢Δ৘ใ΋஌Γ͍ͨ

    ໰͍߹Θͤͷϝλ৘ใ௥Ճ

    View full-size slide

  46. ໰͍߹Θͤͷϝλ৘ใ௥Ճ

    View full-size slide

  47. w ΞϓϦ͔Βͷಋઢ͸શͯ$MPVE
    fl
    BSF8PSLFSTͷ

    63-Λࢦఆ͢Δ
    w ϝλ৘ใ͸63-ΫΤϦύϥϝʔλʔʹηοτ͢Δ
    w 8PSLFS্ͰΫΤϦύϥϝʔλʔͱҰக͢Δ

    νέοτϑΟʔϧυ൪߸΁ࠩ͠ସ͑Δ UG@

    ໰͍߹Θͤͷϝλ৘ใ௥Ճ

    View full-size slide

  48. ϝϯςφϯεϞʔυ

    View full-size slide

  49. ϝϯςφϯεϞʔυ
    IUUQTTQFBLFSEFDLDPNDPEFIFYHSQDDMJFOUPODMPVE
    fl
    BSFXPSLFST

    View full-size slide

  50. ʮΧελϚΠζʯ͸ָ͍͠

    View full-size slide

  51. ʮΧελϚΠζʯ͸ָ͍͠
    w ඞͣ͠΋$MPVE
    fl
    BSF8PSLFSTͷੈք͚ͩʹ

    ด͡ͳͯ͘΋ྑ͍ʂ
    w ֎෦ͷσʔλετϨʔδΛ࢖͏
    w ֎෦ͷϩάج൫Λ࢖͏

    View full-size slide

  52. ֎෦ͷσʔλετϨʔδΛ࢖͏
    /05")05&-ͷέʔε

    View full-size slide

  53. ίϯγΣϧδϡϓϥοτϑΥʔϜ

    View full-size slide

  54. 4VQBCBTF1PTUHSF42-

    View full-size slide

  55. w 1PTUHSF42-Λఏڙ͍ͯ͠Δ
    w

    w

    4VQBCBTF1PTUHSF42-

    View full-size slide

  56. w 1PTUHSF42-Λఏڙ͍ͯ͠Δ
    w %#͚ͩͰͳ͘ίωΫγϣϯϓʔϧΛߦ͏

    ϓϩΩγ΋ఏڙͯ͘͠ΕΔ 4VQBWJTPS

    w

    4VQBCBTF1PTUHSF42-

    View full-size slide

  57. w 1PTUHSF42-Λఏڙ͍ͯ͠Δ
    w %#͚ͩͰͳ͘ίωΫγϣϯϓʔϧΛߦ͏

    ϓϩΩγ΋ఏڙͯ͘͠ΕΔ 4VQBWJTPS

    w /05")05&-ͷ৔߹͸-*45&//05*':΋

    ࢖༻͍ͯ͠Δ
    4VQBCBTF1PTUHSF42-

    View full-size slide

  58. w 1PTUHSF42-Λఏڙ͍ͯ͠Δ
    w %#͚ͩͰͳ͘ίωΫγϣϯϓʔϧΛߦ͏

    ϓϩΩγ΋ఏڙͯ͘͠ΕΔ 4VQBWJTPS

    w /05")05&-ͷ৔߹͸-*45&//05*':΋

    ࢖༻͍ͯ͠Δ
    4VQBCBTF1PTUHSF42-

    View full-size slide

  59. )ZQFSESJWF
    IUUQTCMPHDMPVE
    fl
    BSFDPNIZQFSESJWFNBLJOHSFHJPOBM
    EBUBCBTFTGFFMEJTUSJCVUFE

    View full-size slide

  60. )ZQFSESJWF
    IUUQTEFWFMPQFSTDMPVE
    fl
    BSFDPNIZQFSESJWFMFBSOJOHDPOOFDUUP
    QPTUHSFTUSBOTBDUJPOBOETUBUFNFOUTVQQPSU
    αϙʔτ͞Εͯͳ͍ʂ

    View full-size slide

  61. ͦͷ··4VQBWJTPSΛར༻

    View full-size slide

  62. 4VQBWJTPSΛར༻
    w DPOOSFRલఏ
    w ,ZTFMZΛ࢖͏
    w ઃఆ͸NBY

    NBY6TFT
    IUUQTUXJUUFSDPNDPEFIFYTUBUVT T

    View full-size slide

  63. ֎෦ͷϩάج൫Λ࢖͏
    /05")05&-ͷέʔε

    View full-size slide

  64. ϩάج൫͕ඍົ

    View full-size slide

  65. w ͓ͦΒ͘།Ұͷऑ఺
    w $MPVE
    fl
    BSFͷΈͩͱϩάΛ୳͢ͷʹۤ࿑͢Δ
    w -PHQVTIΛ࢖͑͹֎෦ͷϩάج൫΁ૹͬͯ͘ΕΔ
    w ରԠ͍ͯ͠Δج൫͕গͳ͍ɺ੍໿͋Γ
    w 5BJM8PSLFST 2VFVF࢖ͬͯૹΔ෦෼Λ

    ࣗલͰ࣮૷͢Δ
    ϩάج൫͕ඍົ

    View full-size slide

  66. w ͓ͦΒ͘།Ұͷऑ఺
    w $MPVE
    fl
    BSFͷΈͩͱϩάΛ୳͢ͷʹۤ࿑͢Δ
    w -PHQVTIΛ࢖͑͹֎෦ͷϩάج൫΁ૹͬͯ͘ΕΔ
    w ରԠ͍ͯ͠Δج൫͕গͳ͍ɺ੍໿͋Γ
    w 5BJM8PSLFST 2VFVF࢖ͬͯૹΔ෦෼Λ

    ࣗલͰ࣮૷͢Δ
    ϩάج൫͕ඍົ

    View full-size slide

  67. 2VFVFͰϩάΛૹ৴͢Δ

    View full-size slide

  68. w ($1ͷ$MPVE-PHHJOH΁ૹ৴͢Δ
    w ࠓͩͱ5BJM8PSLFSTΛར༻͢Δͷ͕Φεεϝ
    2VFVFͰϩάΛૹ৴͢Δ

    View full-size slide

  69. 2VFVFͰϩάΛૹ৴͢Δ
    w 4DPQFΛهड़
    w $MPVE-PHHJOHͷ"1*΁
    ϦΫΤετ͢Δ

    View full-size slide

  70. 2VFVFͰϩάΛૹ৴͢Δ
    w -PHHFS$MBTT
    w ഑ྻΛ࣋ͭϓϩύςΟ
    FOUSJFT
    w "1*ϋϯυϥͰ͸

    ͜ͷϝιουΛݺͼग़͢

    View full-size slide

  71. 2VFVFͰϩάΛૹ৴͢Δ
    w "1*ͷॲཧͷ࠷ޙʹ

    FOUSJFTΛΩϡʔʹૹ৴͢Δ
    w όοναΠζͷ্ݶ͸

    NFTTBHFT

    View full-size slide

  72. 2VFVFͰϩάΛૹ৴͢Δ
    w $POTVNFSͰϝοηʔδΛ

    ड৴͢Δ
    w $MPVE-PHHJOH΁ૹ৴

    View full-size slide

  73. ʮָ͍͠ʯͷ࠶དྷ🔥

    View full-size slide

  74. ʮָ͍͠ʯͷ࠶དྷ🔥
    w ։ൃͨ͠ΞϓϦΛ୭͔ʹ࢖ͬͯ΋Β͏·Ͱͷ

    εςοϓ͕୹͘ͳͬͨ
    w ։ൃˠϦϦʔεˠϑΟʔυόοΫʢϧʔϓʣ
    w ΍Γ͍ͨ͜ͱͷຊ࣭ʹूதͰָ͖͍ͯ͠ʂʂ

    View full-size slide