Cloudflare Workers でプリントシール機の画像共有システムを制作したお話 @serverlessF

Serverless Frontend Meetup #4 「FaaS」 #serverlessF
https://serverless-frontend.connpass.com/event/304564/

Transcript

1. 2023.12.19 Cloudflare Workers ͰϓϦϯτγʔϧػͷ ը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩ YUMEMI Inc. Flutter Engineer - Onoue Ryotaro @YumNumm (΋͙΋͙)  Serverless Frontend Meetup #4 FaaS LT
2. 0. whoami  - 2023೥4݄͔Β גࣜձࣾΏΊΈͰFlutter ΤϯδχΞͱͯ͠ۈ຿ - 2023೥11݄ͷFlutterKaigi 2023ʹಉ྅ ͷྛ͞Μͱొஃ
3. 0. whoami  - ஍਒ؔ࿈ͷFlutter੡ΞϓϦέʔγϣϯΛ ݸਓ։ൃ͍ͯ͠·͢ - AppStore/PlayετΞʹͯެ։ࡁΈ - HPɿhttps: / / eqmonitor.app - ΞϓϦࣗମ͸ΦʔϓϯιʔεͰ͢ - https: / / github.com/YumNumm/ EQMonitor
4. 0. whoami  - ஍਒ؔ࿈ͷFlutter੡ΞϓϦέʔγϣϯΛ ݸਓ։ൃ͍ͯ͠·͢ - AppStore/PlayετΞʹͯެ։ࡁΈ - HPɿhttps: / / eqmonitor.app - ΦʔϓϯιʔεͰ͢ - https: / / github.com/YumNumm/ EQMonitor - ͪͳΈʹɺREST APIʹCloudflare Workers, D1Λར༻͍ͯ͠·͢ - WebSocket API͸ɺCloudflareͷෛՙ෼ࢄΛར༻
5. Cloudflare Workers + R2 Λར༻࣮ͨ͠༻ྫ  0. Today’s Topic ໨࣍ 1. Cloudflare ͱ͸? 2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) 4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) 5. ·ͱΊ
6. 1. Cloudflare ͱ͸? > ʮͲ͜Ͱ΋ͭͳ͕ΔੈքʯͷͨΊͷΫϥ΢υ
7. > ʮͲ͜Ͱ΋ͭͳ͕ΔੈքʯͷͨΊͷΫϥ΢υ  1. Cloudflareͱ͸? https: // www.cloudflare.com/ja-jp/what-is-cloudflare/
8. > ʮͲ͜Ͱ΋ͭͳ͕ΔੈքʯͷͨΊͷΫϥ΢υ  1. Cloudflareͱ͸? https: // www.cloudflare.com/ja-jp/what-is-cloudflare/
9. > ʮͲ͜Ͱ΋ͭͳ͕ΔੈքʯͷͨΊͷΫϥ΢υ  1. Cloudflareͱ͸? - Zero Trust https: // www.cloudflare.com/ja-jp/zero-trust/products/
10. > ʮͲ͜Ͱ΋ͭͳ͕ΔੈքʯͷͨΊͷΫϥ΢υ   https: // www.cloudflare.com/ja-jp/zero-trust/products/ 1. Cloudflareͱ͸? - Zero Trust - WebαΠτʹSSOೝূɾIP੍ݶ౳Λઃఆ Ͱ͖Δ - Ex. https: / / wiki.yumnumm.dev/
11. > ʮͲ͜Ͱ΋ͭͳ͕ΔੈքʯͷͨΊͷΫϥ΢υ   https: // www.cloudflare.com/ja-jp/zero-trust/products/ 1. Cloudflareͱ͸? - Zero Trust - WebαΠτʹSSOೝূɾIP੍ݶ౳Λઃఆ Ͱ͖Δ - Ex. https: / / wiki.yumnumm.dev/
12. > ʮͲ͜Ͱ΋ͭͳ͕ΔੈքʯͷͨΊͷΫϥ΢υ  1. Cloudflareͱ͸? - Developer Tools https: // developers.cloudflare.com/products/
13. αʔόϨεͷ࣮ߦ؀ڥ  1. Cloudflareͱ͸? - Workers - αʔόϨε!? ෺ཧαʔόͳ͍ͷ!? - ͍͍͑ɺ͋Γ·͢ - Cloudflare͕༗͢ΔɺΤοδ࣮ߦ؀ڥͰJSΛ࣮ߦ - AWSͷLambda@Edge, GCPͷCloud Run౳ͱࣅͨίϯηϓτ - Cloudflareͷ৭ΜͳαʔϏεͱ࿈ܞ - ͔͠΋ܹ҆! - Workers Free: 10ສreq/day(10msͷCPU) - Workers Paid: 1000ສreq/month free + $0.3/100ສreq 3000ສ msͷCPU free + $0.02/100ສms CPU
14. αʔόϨεSQLσʔλϕʔε  1. Cloudflareͱ͸? - D1 - Τοδ؀ڥͰ࣮ߦ͞ΕΔ SQLite3 - CloudflareͷάϩʔόϧωοτϫʔΫͰϨϓϦέʔγϣϯΛߦ͍ɺϢʔβ͔Βۙ ͍৔ॴ͔ΒಡΈऔΓ - 30೔ؒ(Paid) 7೔ؒ(Free)ͷ೚ҙͷλΠϜελϯϓ΁ϩʔϧόοΫ - ͔͠΋ܹ҆! - Workers Free: Read 500ສߦ, Write 10ສߦ/day, 1GBͷετϨʔδ - Workers Paid: Read 250ԯߦ + $0.001/100ສߦ, 5000ສߦ + $1.00/100ສߦ, 5GB + $0.75/GB
15. AWS S3ޓ׵ΦϒδΣΫτετϨʔδ  1. Cloudflareͱ͸? - R2 - AWS S3ޓ׵ΦϒδΣΫτετϨʔδ - Ϧʔδϣϯઃఆෆཁ - ৴པੑ͸ 99.999999999% Π Ϩ ϒ ϯ φ Π ϯ - ͔͠΋ܹ҆! - ΤάϨεྉۚແྉ! - Forever Free: 10GB/݄, ΫϥεA(ঢ়ଶมߋ) 100ສ/month, ΫϥεB(ঢ়ଶ ಡΈऔΓ) 1000ສ/݄ - Paid: $0.015/GBɾ݄, ΫϥεA $4.50/100ສ, ΫϥεB $0.36/100ສ
16. 2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜ Λ੍࡞͓ͨ͠࿩(֓ཁ) ౦ژ᥁ज़େֶ ςΫϊϩδʔݚڀձʹ͓͡Ό·͠·ͨ͠
17. എܠ  2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) - ߴߍͷಉڃੜ͔Β༠ΘΕ·ͨ͠ - ԣ඿ࢢཱԣ඿αΠΤϯεϑϩϯςΟΞߴ౳ֶߍ - Ԙాߤ༎ / ShiodaKosuke: ౦ژ᥁ज़େֶ ඒज़ֶ෦ ઌ୺᥁ज़දݱՊ - ౦ژ᥁ज़େֶ ςΫϊϩδʔݚڀձ (௨শ: ςοέϯ) - 9/1~/3 ͷ᥁େࡇͰϓϦϯτγʔϧػ࡞Δ͚Ͳ ը૾ڞ༗෦෼ख఻ͬͯ͘Εͳ͍ ͔? ͱ͓༠͍͍͖ͨͩ·ͨ͠
18. اը֓ཁ  2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 1. νέοτߪೖ 2. ࡱӨϒʔεͰࣸਅࡱӨ 3. ϥΫΨΩλΠϜ 4. ը૾DL
19. اը֓ཁ  2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 1. νέοτߪೖ 2. ࡱӨϒʔεͰࣸਅࡱӨ 3. ϥΫΨΩλΠϜ 4. ը૾DL
20. اը֓ཁ  2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 1. νέοτߪೖ 2. ࡱӨϒʔεͰࣸਅࡱӨ 3. ϥΫΨΩλΠϜ 4. ը૾DL
21. اը֓ཁ  2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 1. νέοτߪೖ 2. ࡱӨϒʔεͰࣸਅࡱӨ 3. ϥΫΨΩλΠϜ 4. ը૾DL
22. اը֓ཁ  2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 1. νέοτߪೖ 2. ࡱӨϒʔεͰࣸਅࡱӨ 3. ϥΫΨΩλΠϜ 4. ը૾DL
23. اը֓ཁ  2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 1. νέοτߪೖ 2. ࡱӨϒʔεͰࣸਅࡱӨ 3. ϥΫΨΩλΠϜ 4. ը૾DL
24. اը֓ཁ  2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 1. νέοτߪೖ 2. ࡱӨϒʔεͰࣸਅࡱӨ 3. ϥΫΨΩλΠϜ 4. ը૾DL https: / / tekken.work/art-market/[UUID]
25. 3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜ Λ੍࡞͓ͨ͠࿩(API) Cloudflare Workers + R2
26. Cloudflare Workers  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - αʔόϨεͰ΍Γ͍ͨ - 3೔ؒ͋ΔΠϕϯτͰ ΦϯϓϨαʔό͕ࢮΜͰ͍ͳ͍͔ݟଓ͚Δͷ͸ͭΒ͍ - ՄೳͳΒແྉ࿮ͰऩΊͪΌ͍͍ͨ - > Cloudflare WorkersͷαʔϏε܊Ͱ΍Δͧ!
27. Cloudflare Workers  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - αʔόϨεͰ΍Γ͍ͨ - 3೔ؒ͋ΔΠϕϯτͰ ΦϯϓϨαʔό͕ࢮΜͰ͍ͳ͍͔ݟଓ͚Δͷ͸ͭΒ͍ - ՄೳͳΒແྉ࿮ͰऩΊͪΌ͍͍ͨ - > Cloudflare WorkersͷαʔϏε܈Ͱ΍Δͧ! - Cloudflare Workers: JavaScriptͷ࣮ߦ؀ڥ, ແྉ࿮΋σΧ͍ - Cloudflare R2: ը૾ͷετϨʔδ, ແྉ࿮΋σΧ͍
28. Cloudflare Workers  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - αʔόϨεͰ΍Γ͍ͨ - 3೔ؒ͋ΔΠϕϯτͰ ΦϯϓϨαʔό͕ࢮΜͰ͍ͳ͍͔ݟଓ͚Δͷ͸ͭΒ͍ - ՄೳͳΒແྉ࿮ͰऩΊͪΌ͍͍ͨ - > Cloudflare WorkersͷαʔϏε܈Ͱ΍Δͧ! - Cloudflare Workers: JavaScriptͷ࣮ߦ؀ڥ, ແྉ࿮΋σΧ͍ - Cloudflare R2: ը૾ͷετϨʔδ, ແྉ࿮΋σΧ͍ - Hono ͱ͍͏ϑϨʔϜϫʔΫΛ ར༻ - Edge࣮ߦ؀ڥ޲͚ͷAPIϑϨʔ ϜϫʔΫ - ೔ຊਓͷYusuke Wada(@yusukebe)͞Μ੍͕࡞ - https: / / hono.dev
29. ΤϯυϙΠϯτͷઃܭΛߟ͑Δ  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - GET /list : ͢΂ͯͷը૾ϑΝΠϧͷϦετ [private] - GET /list/[id] : [id]͔Β࢝·ΔϑΝΠϧͷϦετ (id: UUID) - PUT /upload/[id]?name=[name] : [id]/[name] ͱͯ͠ϑΝΠϧΛอଘ (id: UUID, name: ϑΝΠϧ໊) [private] - - - - api.tekken.work: - Cloudflare Workersʹͭͳ͕ΔυϝΠϯ - objects.tekken.work: - Cloudflare R2ͷެ։༻υϝΠϯ
30. ΤϯυϙΠϯτͷอޢ  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - HonoͷMiddlewareػೳΛ࢖͍·͢ - /list/[id] ΁ͷϦΫΤετ͸ͦͷ·· - ͦΕҎ֎͸ɺϔομʔ಺ x-api-key ͷ஋͕؀ڥม਺(JWT)ͱಉ͔͡νΣοΫ
31. ΤϯυϙΠϯτͷத਎࣮૷: GET /list/[id]  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - Path͔Β id Λऔಘ - R2Bucket͔ΒҰཡΛऔಘ - ݁ՌΛJSONͰฦ౴
32. ΤϯυϙΠϯτͷத਎࣮૷: PUT /upload/[id]?name=[name]  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - QueryParameter͔Β id Λऔಘ - R2Bucket͔ΒҰཡΛऔಘ - ݁ՌΛJSONͰฦ౴ - HonoͷMiddleware ʮZod validatorʯΛ࢖͏͜ͱͰɺָʹ&͖Ε͍ʹparse͔ ͚ΒΕ·͢👍 : ऴΘͬͨޙʹଘࡏΛ஌Γ·ͨ͠
33. ΤϯυϙΠϯτͷઃܭΛߟ͑Δ  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - GET /list : ͢΂ͯͷը૾ϑΝΠϧͷϦετ [private] - GET /list/[id] : [id]͔Β࢝·ΔϑΝΠϧͷϦετ (id: UUID) - PUT /upload/[id]?name=[name] : [id]/[name] ͱͯ͠ϑΝΠϧΛอଘ (id: UUID, name: ϑΝΠϧ໊) [private]
34. ΤϯυϙΠϯτͷઃܭΛߟ͑Δ  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - GET /list : ͢΂ͯͷը૾ϑΝΠϧͷϦετ [private] - GET /list/[id] : [id]͔Β࢝·ΔϑΝΠϧͷϦετ (id: UUID) - PUT /upload/[id]?name=[name] : [id]/[name] ͱͯ͠ϑΝΠϧΛอଘ (id: UUID, name: ϑΝΠϧ໊) [private]
35. ΤϯυϙΠϯτͷத਎࣮૷: PUT /upload/[id]?name=[name]  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - Path͔Β id, QueryParameter ͔Β name Λऔಘ - ϦΫΤετϘσΟ͔ΒΞοϓϩʔυ ͢ΔϑΝΠϧΛऔಘ - R2Bucket΁ file ΛPUT - ݁ՌΛJSONͰฦ౴
36. ΤϯυϙΠϯτͷઃܭΛߟ͑Δ  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - GET /list : ͢΂ͯͷը૾ϑΝΠϧͷϦετ [private] - GET /list/[id] : [id]͔Β࢝·ΔϑΝΠϧͷϦετ (id: UUID) - PUT /upload/[id]?name=[name] : [id]/[name] ͱͯ͠ϑΝΠϧΛอଘ (id: UUID, name: ϑΝΠϧ໊) [private] - ࡱӨϒʔεɾϥΫΨΩϒʔεͰಈ࡞ ͢ΔPython3ΞϓϦέʔγϣϯ͔ Β ը૾Λૹड৴͢Δ - ClassΛ࡞ͬͯԘా͘Μ΁౉͢
37. 4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜ Λ੍࡞͓ͨ͠࿩(Web) Next.js + Cloudflare Pages
38. 4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ͱΓ͋͑ͣಈ͚͹Ϥγ! - ࣗ෼͸FlutterΤϯδχΞ - Webͷ͜ͱ͸શવΘ͔ΒΜ - લʹͪΐͬ͜ͱ৮ͬͨ͜ͱͷ͋Δ Next.js + React + Tailwind CSS Λ࢖͍͍ͨ - Twitter(X)ͰԿճ͔ݟͨ͜ͱͷ͋Δ shadcn uiΛ࢖ͬͯΈΔ - > Next.js + React + Tailwind CSS + Cloudflare PagesΛϝΠϯʹ࢖͍ͬͯ͘ 
39. 4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ͪΐͬͱ͔͍͍ͬ͜τοϓϖʔδΛ࡞Γ͍ͨΜ͡Ό - ͍ͩͿલʹݟͨ QiitaهࣄΛࢀߟ ʹ͍͍ײ͡ͷϊΠζάϥσʔγϣϯΛ! 
40. 4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ͪΐͬͱ͔͍͍ͬ͜τοϓϖʔδΛ࡞Γ͍ͨΜ͡Ό - ͳʹ΋Θ͔ΒΜͷͰύΫ Δ! - Next.jsͷTemplate୳ ͠ͷཱྀ - MIT LicenseͳͷͰOK 
41. 4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ͪΐͬͱ͔͍͍ͬ͜τοϓϖʔδΛ࡞Γ͍ͨΜ͡Ό 
42. 4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ͪΐͬͱ͔͍͍ͬ͜τοϓϖʔδΛ࡞Γ͍ͨΜ͡Ό 
43. 4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ؊৺ͷը૾ڞ༗ - Cloudflare WorkersͷAPI͔ΒUUIDʹର͢Δը૾Ұཡऔಘ - React Hooks ͷ useSWR Λ࢖ͬͯΈΔ - <Image / > ͰϨϯμϦϯά - Ϥγ! 
44. 4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ؊৺ͷը૾ڞ༗  https: // tekken.work/art-market/?id=24fa58b8-d052-4fd5-b849-a5faf39ad604
45. 4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ؊৺ͷը૾ڞ༗  https: // tekken.work/art-market/?id=24fa58b8-d052-4fd5-b849-a5faf39ad604
46. 5. ·ͱΊ Cloudflare ͍͢͝ - Cloudflare WorkersͷαʔϏε܈ศར! - 👍 - Workers, R2, PagesΛ࢖͏͜ͱͰɺશͯCloudflareͷ্Ͱಈ͔͢͜ͱ͕Ͱ͖ͨ - ΊͪΌσΧແྉ࿮ͷ͓ӄͰ ༨༟Ͱऩ·Γ·ͨ͠ - 👎 - ແྉ࿮΋σΧ͍͕ ͦ΋ͦ΋ը૾͕σΧ͗ͨ͢ (avg. 1.7MB/ຕ) - > Ξοϓϩʔυʹ͔͔࣌ؒΔ & & UX͕ѱ͍ - ࣄલʹѹॖ͢Δ | | Cloudflare Images ResizeͰΤοδѹॖ͢Δ΂͖ͩͬͨ - هࣄΛॻ͍ͯੵۃతʹΞ΢τϓοτ͡Ό! 
47. API: https: / / github.com/YumNumm/art-market-api APP: https: / / github.com/YumNumm/art-market-app ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠!  Follow me on X: @YumNumm https: / / qiita.com/YumNumm/items/bb170f594cfb90202084 https: / / qiita.com/ShiodaKosuke/items/8080c28e0155c46e9f1d