More Web Proxy on the site http://driver.im/

すぐ使える Cloudflare Workers！

March 09, 2024

3.3k

すぐ使える Cloudflare Workers！

Kei Kamikawa

March 09, 2024

Tweet

More Decks by Kei Kamikawa

See All by Kei Kamikawa

どこでも使える Cloudflare Workers！

6

670

2

320

Go to Cloudflare Workers

8

2k

AI Gateway 使っているよ！

2

1.5k

日時処理の新スタンダード: Synchro によるタイムゾーン安全、楽々開発

1

2k

Cloudflare Workers は楽しい！

9

3.2k

gRPC Client on Cloudflare Workers

2

5.6k

NOT A HOTEL AI コンシェルジュ「Kevin」とキャッシュ

1

1.6k

NOT A HOTEL AIコンシェルジュ「Kevin」の開発秘話

8

140k

Featured

See All Featured

26

5k

Fashionably flexible responsive web design (full day workshop)

405

65k

Cheating the UX When There Is Nothing More to Optimize - PixelPioneers

stephaniewalter

280

13k

[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails

33

1.9k

Site-Speed That Sticks

2

190

The Power of CSS Pseudo Elements

73

5.4k

The Straight Up "How To Draw Better" Workshop

232

140k

Music & Morning Musume

46

6.2k

For a Future-Friendly Web

175

9.4k

Large-scale JavaScript Application Architecture

510

110k

Save Time (by Creating Custom Rails Generators)

28

900

Improving Core Web Vitals using Speculation Rules API

sergeychernyshev

0

94

Transcript

͙͢࢖͑Δ$MPVE fl BSF8PSLFSTʂ $MPVE fl BSF.FFUVQ0LJOBXB7PM  
!DPEFIFY !$PEF)FY w /05")05&-Ͱಇ͍͍ͯ·͢ w 1P$Λ࡞ͬͯɺӡ༻·Ͱ͍࣋ͬͯ͘ w ࣗಈԽɺ"*ΠϯςάϨʔγϣϯ w ͓٬༷޲͚ɺࣾ಺޲͚
͙͢ʹ࢖ָ͍͑ͯ͠ʂ
͙͢ʹ࢖ָ͍͑ͯ͠ʂ w σϓϩΠ͢Ε͹͙͢ʹ࢖͑Δʂ w ؆୯ͳ+BWB4DSJQUͷίʔυ͚ͩͰ΋࢖͑Δʂ w ࢝ΊΔͨΊʹ֮͑Δ͜ͱ͕গͳ͍ʂ w ૣ͍ʂʂ
IUUQTTQFBLFSEFDLDPNDPEFIFYDMPVE fl BSFXPSLFSTIBMFTJJ
ΞϓϦέʔγϣϯͷ։ൃ؀ڥΛ੔͑Δ ίϯςφΛ࢖ͬͨ؀ڥͱͷൺֱ
ίϯςφ࣌୅ͷ։ൃ؀ڥ
ίϯςφ࣌୅ͷ։ൃ؀ڥ w ։ൃ؀ڥΛ੔͑Δͷ͸໘౗͍͘͞ʂ w   w  
ίϯςφ࣌୅ͷ։ൃ؀ڥ w ։ൃ؀ڥΛ੔͑Δͷ͸໘౗͍͘͞ʂ w %PDLFS fi MFͷهड़ɺΞϓϦΛಈ͔ͨ͢Ίͷઃఆ ϑΝΠϧͷهड़ɺ؀ڥม਺ͳͲ w  
ίϯςφ࣌୅ͷ։ൃ؀ڥ w ։ൃ؀ڥΛ੔͑Δͷ͸໘౗͍͘͞ʂ w %PDLFS fi MFͷهड़ɺΞϓϦΛಈ͔ͨ͢Ίͷઃఆ ϑΝΠϧͷهड़ɺ؀ڥม਺ͳͲ w %#ͩͬͨΓ2VFVFͩͬͨΓɺ$SPO+PCͳͲ
ΛϩʔΧϧͰ༻ҙ͢Δͷ΋େม
None
֮͑Δ͜ͱ͕͍ͬͺ͍ʂʂ
$MPVE fl BSF8PSLFSTͷ৔߹
$MPVE fl BSF8PSLFSTͷ৔߹ w ։ൃ؀ڥ͸ςϯϓϨʔτΛ࢖ͬͯηοτΞοϓՄೳ w ։ൃ؀ڥͱσϓϩΠ؀ڥͷဃ཭͕গͳ͍ w ϥϯλΠϜͷXPSLFSE͸044  
IUUQTHJUIVCDPNDMPVE fl BSFXPSLFSE w Πϯϑϥͷػೳ΋XPSLFSEΛܦ༝ͯ͠ར༻Ͱ͖Δ
ΞϓϦέʔγϣϯͷ։ൃ؀ڥΛ੔͑Δ $ npx create-cloudflare my-app --framework hono \ --deploy false
ΞϓϦέʔγϣϯͷ։ൃ؀ڥΛ੔͑Δ $ tree my-app --gitignore my-app ├── README.md ├── package.json
├── src │ └── index.ts ├── tsconfig.json   └── wrangler.toml
ΞϓϦέʔγϣϯͷ։ൃ؀ڥΛ੔͑Δ $ cd my-app && npm run dev   $
curl http://localhost:8787   Hello Hono!
w XSBOHMFSUPNMʹ͸σϓϩΠޙʹར༻͢Δ؀ڥม਺Λॻ͘ w EFWWBSTʹ͸ϩʔΧϧͰར༻͍ͨ͠؀ڥม਺Λॻ͘ ؀ڥม਺Λ੔͑Δ
؀ڥม਺Λ੔͑Δ $ echo "ENV = \"local\"" >> .dev.vars   $
ls .dev.vars .dev.vars
name = "my-app" compatibility_date = "2023-01-01" [vars] ENV = "development"
؀ڥม਺Λ੔͑Δ XSBOHMFSUPNM
import { Hono } from "hono"; const app = new
Hono<{ Bindings: { ENV: string; }; }>(); app.get("/", (c) => c.text(c.env.ENV)); export default app; ؀ڥม਺Λ੔͑Δ JOEFYUT
؀ڥม਺Λ੔͑Δ $ cd my-app && npm run dev   $
curl http://localhost:8787   local
w XSBOHMFSίϚϯυΛར༻ͯ͠ϦιʔεΛ࡞੒ w ϦιʔεΛར༻͢ΔͨΊʹXSBOHMFSUPNM΁ઃఆΛهड़ w $MPVE fl BSF8PSLFSTͰར༻Ͱ͖Δϛυϧ΢ΣΞ͸   جຊಉ͡
ϛυϧ΢ΣΞΛ੔͑Δ
ϛυϧ΢ΣΞΛ੔͑Δʢྫ,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" }
[[kv_namespaces]] binding = "TEST_KV" id = "da56a0e3ee6641fabf26b726e60fa550" XSBOHMFSUPNM ϛυϧ΢ΣΞΛ੔͑Δʢྫ,7ʣ
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ʣ
$ curl http://localhost:8787/counter   1 ϛυϧ΢ΣΞΛ੔͑Δʢྫ,7ʣ
ͪΐͬͱͨ͠Ϣʔεέʔε /05")05&-ͷ৔߹
$034ͷϔομ௥Ճ
$034ͷϔομ௥Ճ
$034ͷϔομ௥Ճ
໰͍߹Θͤͷϝλ৘ใ௥Ճ
w ΞϓϦ͔Β;FOEFTLͷ໰͍߹ΘͤϑΥʔϜ΁ͷ   ಋઢ͕༻ҙ͞Ε͍ͯΔ w ϩάΠϯதͷͲͷ͓٬༷͔Βͷ͓໰͍߹Θ͔ͤ   ೺Ѳ͍ͨ͠ w ؔ࿈͢Δ৘ใ΋஌Γ͍ͨ
  ໰͍߹Θͤͷϝλ৘ใ௥Ճ
໰͍߹Θͤͷϝλ৘ใ௥Ճ
w ΞϓϦ͔Βͷಋઢ͸શͯ$MPVE fl BSF8PSLFSTͷ   63-Λࢦఆ͢Δ w ϝλ৘ใ͸63-ΫΤϦύϥϝʔλʔʹηοτ͢Δ w 8PSLFS্ͰΫΤϦύϥϝʔλʔͱҰக͢Δ
  νέοτϑΟʔϧυ൪߸΁ࠩ͠ସ͑Δ UG@ ໰͍߹Θͤͷϝλ৘ใ௥Ճ
ϝϯςφϯεϞʔυ
ϝϯςφϯεϞʔυ IUUQTTQFBLFSEFDLDPNDPEFIFYHSQDDMJFOUPODMPVE fl BSFXPSLFST
$IBU(151SPYZ
w (15TͷΞΫγϣϯ͔Β/05")05&-"1*Λ   ར༻͢ΔͨΊͷ1SPYZ w $IBU(15͸0"VUIೝূΛఏڙ͍ͯ͠ΔͷͰ   ϩάΠϯ͕Ͱ͖Ε͹/")"1*Λ࢖͑Δ w "1*ͱ0"VUIαʔόʔ͸ಉ͡3PPU63-͡Όͳ͍ͱ
ར༻Ͱ͖ͳ੍͍ݶ͕͋ΔͨΊ $IBU(151SPYZ
$IBU(151SPYZ w BVUIPSJ[BUJPOͱUPLFOΛఏڙ w 4DPQF͸'JSFCBTF"VUIͰඞཁͳ   ಺༰Λೖྗ͢Δ
$IBU(151SPYZ
%ZOBNJD-JOLT
w 'JSFCBTFͰఏڙ͞Ε͍ͯΔػೳ w %ZOBNJD-JOLT͸ഇࢭ༧ఆ w ϢχόʔαϧϦϯΫͷ࢓༷ʹԊͬͯ։ൃ͢Δඞ ཁ͕͋ͬͨ w ϦϯΫΛ։͘ͱɺରԠ͢ΔΞϓϦ͕ىಈ ͞Εɺͦͷը໘Λ։͘͜ͱ͕Ͱ͖Δ
w ΋ͪΖΜϓϨϏϡʔը໘΋͋Δ %ZOBNJD-JOLT
%ZOBNJD-JOLT w ୹ॖ63-Λൃߦ͢ΔΠϝʔδ w 63-ʹ࢖͏จࣈྻ͕ඃΒͳ͍Α͏ʹ   %VSBCMF0CKFDUTͷτϥϯβΫγϣϯΛར༻ w )POPΛ࢖ͬͯɺϓϨϏϡʔը໘ͱࣝผࢠͷ৘ใΛؚ Ίͨ+40/ϑΝΠϧʢ"TTFU-JOL
fi MFʣΛฦ͢
ΧελϚΠζ ֎෦ͷσʔλετϨʔδΛ࢖͏
ίϯγΣϧδϡϓϥοτϑΥʔϜ
֎෦ͷϩάج൫Λ࢖͏ ($1$MPVE-PHHJOH
ʜͷલʹ-PH1VTIͷ঺հ
-PH1VTI
w $MPVE fl BSFʹؔ࿈ͨ͠ϩάΛ࿈ܞͰ͖Δ   ετϨʔδ΁ϩάΛૹΓ͚ͭΔػೳ w $MPVE fl BSF8PSLFSTͷ৔߹͸DPOTPMFMPHͷ
  த਎Λ1VTIͰ͖Δ -PH1VTI
-PH1VTI
-PH1VTI
-PH1VTI
-PH1VTI
-PH1VTI
ࣗ෼ͰϩάΛૹΔ
w ͓ͦΒ͘།Ұͷऑ఺ w $MPVE fl BSFͷΈͩͱϩάΛ୳͢ͷʹۤ࿑͢Δ w ͏ͪͷϢʔεέʔεͩͱ$MPVE-PHHJOHΛܦ༝ͯ͠   ௚઀ૹΔํ͕͍҆
ࣗ෼ͰϩάΛૹΔ
2VFVFͰϩάΛૹ৴͢Δ
w ($1ͷ$MPVE-PHHJOH΁ૹ৴͢Δ w ࠓͩͱ5BJM8PSLFSTΛར༻͢Δͷ͕Φεεϝ͔΋ 2VFVFͰϩάΛૹ৴͢Δ
2VFVFͰϩάΛૹ৴͢Δ w 4DPQFΛهड़ w $MPVE-PHHJOHͷ"1*΁ ϦΫΤετ͢Δ
2VFVFͰϩάΛૹ৴͢Δ w -PHHFS$MBTT w ഑ྻΛ࣋ͭϓϩύςΟ FOUSJFT w "1*ϋϯυϥͰ͸   ͜ͷϝιουΛݺͼग़͢
2VFVFͰϩάΛૹ৴͢Δ w "1*ͷॲཧͷ࠷ޙʹ   FOUSJFTΛΩϡʔʹૹ৴͢Δ w όοναΠζͷ্ݶ͸   NFTTBHFT
2VFVFͰϩάΛૹ৴͢Δ w $POTVNFSͰϝοηʔδΛ   ड৴͢Δ w $MPVE-PHHJOH΁ૹ৴  
֎෦ͷΩϡʔΛ࢖͏ $MPVE5BTLTͷซ༻
8PSLFST2VFVF CFUB ͕ෆ҆ఆ
8PSLFST2VFVF͕ෆ҆ఆ ͨ·ʹΩϡʔ͕٧·Δ
8PSLFST2VFVF͕ෆ҆ఆ αʔόʔ͔ΒͷλΠϜΞ΢τ͸ͳ͍
w $MPVE fl BSF8PSLFST্ʹඇಉظ޲͚ͷ   ΤϯυϙΠϯτΛ࡞੒͢Δ w 8PSLFSTܦ༝Ͱ5BTLΛ࡞੒͢Δ w ࡞੒͞Εͨ5BTLΛ΋ͱʹ$MPVE5BTLTܦ༝Ͱ
  ΤϯυϙΠϯτ͕ୟ͔ΕΔ $MPVE5BTLTΛ࢖͏
$MPVE5BTLTΛ࢖͏
͙͢ʹ࢖ָ͍͑ͯ͠🔥
͙͢ʹ࢖ָ͍͑ͯ͠🔥 w ։ൃͨ͠ΞϓϦΛ୭͔ʹ࢖ͬͯ΋Β͏·Ͱͷ   εςοϓ͕୹͘ͳͬͨ w ։ൃˠϦϦʔεˠϑΟʔυόοΫʢϧʔϓʣ w ΍Γ͍ͨ͜ͱͷຊ࣭ʹूதͰָ͖͍ͯ͠ʂʂ