$30 off During Our Annual Pro Sale. View Details »

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

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

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

Ryotaro Onoue

December 19, 2023
Tweet

More Decks by Ryotaro Onoue

Other Decks in Programming

Transcript

  1. 0. whoami  - ஍਒ؔ࿈ͷFlutter੡ΞϓϦέʔγϣϯΛ ݸਓ։ൃ͍ͯ͠·͢ - AppStore/PlayετΞʹͯެ։ࡁΈ - HPɿhttps:

    / / eqmonitor.app - ΞϓϦࣗମ͸ΦʔϓϯιʔεͰ͢ - https: / / github.com/YumNumm/ EQMonitor
  2. 0. whoami  - ஍਒ؔ࿈ͷFlutter੡ΞϓϦέʔγϣϯΛ ݸਓ։ൃ͍ͯ͠·͢ - AppStore/PlayετΞʹͯެ։ࡁΈ - HPɿhttps:

    / / eqmonitor.app - ΦʔϓϯιʔεͰ͢ - https: / / github.com/YumNumm/ EQMonitor - ͪͳΈʹɺREST APIʹCloudflare Workers, D1Λར༻͍ͯ͠·͢ - WebSocket API͸ɺCloudflareͷෛՙ෼ࢄΛར༻
  3. Cloudflare Workers + R2 Λར༻࣮ͨ͠༻ྫ  0. Today’s Topic ໨࣍

    1. Cloudflare ͱ͸? 2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) 4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) 5. ·ͱΊ
  4. > ʮͲ͜Ͱ΋ͭͳ͕ΔੈքʯͷͨΊͷΫϥ΢υ   https: // www.cloudflare.com/ja-jp/zero-trust/products/ 1. Cloudflareͱ͸? -

    Zero Trust - WebαΠτʹSSOೝূɾIP੍ݶ౳Λઃఆ Ͱ͖Δ - Ex. https: / / wiki.yumnumm.dev/
  5. > ʮͲ͜Ͱ΋ͭͳ͕ΔੈքʯͷͨΊͷΫϥ΢υ   https: // www.cloudflare.com/ja-jp/zero-trust/products/ 1. Cloudflareͱ͸? -

    Zero Trust - WebαΠτʹSSOೝূɾIP੍ݶ౳Λઃఆ Ͱ͖Δ - Ex. https: / / wiki.yumnumm.dev/
  6. αʔόϨεͷ࣮ߦ؀ڥ  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
  7. αʔόϨε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
  8. 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ສ
  9. എܠ  2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) - ߴߍͷಉڃੜ͔Β༠ΘΕ·ͨ͠ - ԣ඿ࢢཱԣ඿αΠΤϯεϑϩϯςΟΞߴ౳ֶߍ - Ԙాߤ༎

    / ShiodaKosuke: ౦ژ᥁ज़େֶ ඒज़ֶ෦ ઌ୺᥁ज़දݱՊ - ౦ژ᥁ज़େֶ ςΫϊϩδʔݚڀձ (௨শ: ςοέϯ) - 9/1~/3 ͷ᥁େࡇͰϓϦϯτγʔϧػ࡞Δ͚Ͳ ը૾ڞ༗෦෼ख఻ͬͯ͘Εͳ͍ ͔? ͱ͓༠͍͍͖ͨͩ·ͨ͠
  10. Cloudflare Workers  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - αʔόϨεͰ΍Γ͍ͨ - 3೔ؒ͋ΔΠϕϯτͰ ΦϯϓϨαʔό͕ࢮΜͰ͍ͳ͍͔ݟଓ͚Δͷ͸ͭΒ͍

    - ՄೳͳΒແྉ࿮ͰऩΊͪΌ͍͍ͨ - > Cloudflare WorkersͷαʔϏε܈Ͱ΍Δͧ! - Cloudflare Workers: JavaScriptͷ࣮ߦ؀ڥ, ແྉ࿮΋σΧ͍ - Cloudflare R2: ը૾ͷετϨʔδ, ແྉ࿮΋σΧ͍
  11. Cloudflare Workers  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - αʔόϨεͰ΍Γ͍ͨ - 3೔ؒ͋ΔΠϕϯτͰ ΦϯϓϨαʔό͕ࢮΜͰ͍ͳ͍͔ݟଓ͚Δͷ͸ͭΒ͍

    - ՄೳͳΒແྉ࿮ͰऩΊͪΌ͍͍ͨ - > Cloudflare WorkersͷαʔϏε܈Ͱ΍Δͧ! - Cloudflare Workers: JavaScriptͷ࣮ߦ؀ڥ, ແྉ࿮΋σΧ͍ - Cloudflare R2: ը૾ͷετϨʔδ, ແྉ࿮΋σΧ͍ - Hono ͱ͍͏ϑϨʔϜϫʔΫΛ ར༻ - Edge࣮ߦ؀ڥ޲͚ͷAPIϑϨʔ ϜϫʔΫ - ೔ຊਓͷYusuke Wada(@yusukebe)͞Μ੍͕࡞ - https: / / hono.dev
  12. ΤϯυϙΠϯτͷઃܭΛߟ͑Δ  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ͷެ։༻υϝΠϯ
  13. ΤϯυϙΠϯτͷத਎࣮૷: PUT /upload/[id]?name=[name]  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - QueryParameter͔Β id Λऔಘ

    - R2Bucket͔ΒҰཡΛऔಘ - ݁ՌΛJSONͰฦ౴ - HonoͷMiddleware ʮZod validatorʯΛ࢖͏͜ͱͰɺָʹ&͖Ε͍ʹparse͔ ͚ΒΕ·͢👍 : ऴΘͬͨޙʹଘࡏΛ஌Γ·ͨ͠
  14. ΤϯυϙΠϯτͷઃܭΛߟ͑Δ  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - GET /list : ͢΂ͯͷը૾ϑΝΠϧͷϦετ [private]

    - GET /list/[id] : [id]͔Β࢝·ΔϑΝΠϧͷϦετ (id: UUID) - PUT /upload/[id]?name=[name] : [id]/[name] ͱͯ͠ϑΝΠϧΛอଘ (id: UUID, name: ϑΝΠϧ໊) [private]
  15. ΤϯυϙΠϯτͷઃܭΛߟ͑Δ  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - GET /list : ͢΂ͯͷը૾ϑΝΠϧͷϦετ [private]

    - GET /list/[id] : [id]͔Β࢝·ΔϑΝΠϧͷϦετ (id: UUID) - PUT /upload/[id]?name=[name] : [id]/[name] ͱͯ͠ϑΝΠϧΛอଘ (id: UUID, name: ϑΝΠϧ໊) [private]
  16. ΤϯυϙΠϯτͷத਎࣮૷: PUT /upload/[id]?name=[name]  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - Path͔Β id, QueryParameter

    ͔Β name Λऔಘ - ϦΫΤετϘσΟ͔ΒΞοϓϩʔυ ͢ΔϑΝΠϧΛऔಘ - R2Bucket΁ file ΛPUT - ݁ՌΛJSONͰฦ౴
  17. ΤϯυϙΠϯτͷઃܭΛߟ͑Δ  3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - GET /list : ͢΂ͯͷը૾ϑΝΠϧͷϦετ [private]

    - GET /list/[id] : [id]͔Β࢝·ΔϑΝΠϧͷϦετ (id: UUID) - PUT /upload/[id]?name=[name] : [id]/[name] ͱͯ͠ϑΝΠϧΛอଘ (id: UUID, name: ϑΝΠϧ໊) [private] - ࡱӨϒʔεɾϥΫΨΩϒʔεͰಈ࡞ ͢ΔPython3ΞϓϦέʔγϣϯ͔ Β ը૾Λૹड৴͢Δ - ClassΛ࡞ͬͯԘా͘Μ΁౉͢
  18. 4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ͱΓ͋͑ͣಈ͚͹Ϥγ! - ࣗ෼͸FlutterΤϯδχΞ - Webͷ͜ͱ͸શવΘ͔ΒΜ - લʹͪΐͬ͜ͱ৮ͬͨ͜ͱͷ͋Δ Next.js

    + React + Tailwind CSS Λ࢖͍͍ͨ - Twitter(X)ͰԿճ͔ݟͨ͜ͱͷ͋Δ shadcn uiΛ࢖ͬͯΈΔ - > Next.js + React + Tailwind CSS + Cloudflare PagesΛϝΠϯʹ࢖͍ͬͯ͘ 
  19. 5. ·ͱΊ Cloudflare ͍͢͝ - Cloudflare WorkersͷαʔϏε܈ศར! - 👍 -

    Workers, R2, PagesΛ࢖͏͜ͱͰɺશͯCloudflareͷ্Ͱಈ͔͢͜ͱ͕Ͱ͖ͨ - ΊͪΌσΧແྉ࿮ͷ͓ӄͰ ༨༟Ͱऩ·Γ·ͨ͠ - 👎 - ແྉ࿮΋σΧ͍͕ ͦ΋ͦ΋ը૾͕σΧ͗ͨ͢ (avg. 1.7MB/ຕ) - > Ξοϓϩʔυʹ͔͔࣌ؒΔ & & UX͕ѱ͍ - ࣄલʹѹॖ͢Δ | | Cloudflare Images ResizeͰΤοδѹॖ͢Δ΂͖ͩͬͨ - هࣄΛॻ͍ͯੵۃతʹΞ΢τϓοτ͡Ό! 
  20. 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