Tweet
Tweet

Slide 1

Slide 1 text

2023.12.19 Cloudflare Workers ͰϓϦϯτγʔϧػͷ ը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩ YUMEMI Inc. Flutter Engineer - Onoue Ryotaro @YumNumm (΋͙΋͙) Serverless Frontend Meetup #4 FaaS LT

Slide 2

Slide 2 text

0. whoami - 2023೥4݄͔Β גࣜձࣾΏΊΈͰFlutter ΤϯδχΞͱͯ͠ۈ຿ - 2023೥11݄ͷFlutterKaigi 2023ʹಉ྅ ͷྛ͞Μͱొஃ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

0. whoami - ஍਒ؔ࿈ͷFlutter੡ΞϓϦέʔγϣϯΛ ݸਓ։ൃ͍ͯ͠·͢ - AppStore/PlayετΞʹͯެ։ࡁΈ - HPɿhttps: / / eqmonitor.app - ΦʔϓϯιʔεͰ͢ - https: / / github.com/YumNumm/ EQMonitor - ͪͳΈʹɺREST APIʹCloudflare Workers, D1Λར༻͍ͯ͠·͢ - WebSocket API͸ɺCloudflareͷෛՙ෼ࢄΛར༻

Slide 5

Slide 5 text

Cloudflare Workers + R2 Λར༻࣮ͨ͠༻ྫ 0. Today’s Topic ໨࣍ 1. Cloudflare ͱ͸? 2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) 4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) 5. ·ͱΊ

Slide 6

Slide 6 text

1. Cloudflare ͱ͸? > ʮͲ͜Ͱ΋ͭͳ͕ΔੈքʯͷͨΊͷΫϥ΢υ

Slide 7

Slide 7 text

> ʮͲ͜Ͱ΋ͭͳ͕ΔੈքʯͷͨΊͷΫϥ΢υ 1. Cloudflareͱ͸? https: // www.cloudflare.com/ja-jp/what-is-cloudflare/

Slide 8

Slide 8 text

> ʮͲ͜Ͱ΋ͭͳ͕ΔੈքʯͷͨΊͷΫϥ΢υ 1. Cloudflareͱ͸? https: // www.cloudflare.com/ja-jp/what-is-cloudflare/

Slide 9

Slide 9 text

> ʮͲ͜Ͱ΋ͭͳ͕ΔੈքʯͷͨΊͷΫϥ΢υ 1. Cloudflareͱ͸? - Zero Trust https: // www.cloudflare.com/ja-jp/zero-trust/products/

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

> ʮͲ͜Ͱ΋ͭͳ͕ΔੈքʯͷͨΊͷΫϥ΢υ 1. Cloudflareͱ͸? - Developer Tools https: // developers.cloudflare.com/products/

Slide 13

Slide 13 text

αʔόϨεͷ࣮ߦ؀ڥ 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

Slide 14

Slide 14 text

αʔόϨε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

Slide 15

Slide 15 text

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ສ

Slide 16

Slide 16 text

2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜ Λ੍࡞͓ͨ͠࿩(֓ཁ) ౦ژ᥁ज़େֶ ςΫϊϩδʔݚڀձʹ͓͡Ό·͠·ͨ͠

Slide 17

Slide 17 text

എܠ 2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) - ߴߍͷಉڃੜ͔Β༠ΘΕ·ͨ͠ - ԣ඿ࢢཱԣ඿αΠΤϯεϑϩϯςΟΞߴ౳ֶߍ - Ԙాߤ༎ / ShiodaKosuke: ౦ژ᥁ज़େֶ ඒज़ֶ෦ ઌ୺᥁ज़දݱՊ - ౦ژ᥁ज़େֶ ςΫϊϩδʔݚڀձ (௨শ: ςοέϯ) - 9/1~/3 ͷ᥁େࡇͰϓϦϯτγʔϧػ࡞Δ͚Ͳ ը૾ڞ༗෦෼ख఻ͬͯ͘Εͳ͍ ͔? ͱ͓༠͍͍͖ͨͩ·ͨ͠

Slide 18

Slide 18 text

اը֓ཁ 2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 1. νέοτߪೖ 2. ࡱӨϒʔεͰࣸਅࡱӨ 3. ϥΫΨΩλΠϜ 4. ը૾DL

Slide 19

Slide 19 text

اը֓ཁ 2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 1. νέοτߪೖ 2. ࡱӨϒʔεͰࣸਅࡱӨ 3. ϥΫΨΩλΠϜ 4. ը૾DL

Slide 20

Slide 20 text

اը֓ཁ 2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 1. νέοτߪೖ 2. ࡱӨϒʔεͰࣸਅࡱӨ 3. ϥΫΨΩλΠϜ 4. ը૾DL

Slide 21

Slide 21 text

اը֓ཁ 2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 1. νέοτߪೖ 2. ࡱӨϒʔεͰࣸਅࡱӨ 3. ϥΫΨΩλΠϜ 4. ը૾DL

Slide 22

Slide 22 text

اը֓ཁ 2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 1. νέοτߪೖ 2. ࡱӨϒʔεͰࣸਅࡱӨ 3. ϥΫΨΩλΠϜ 4. ը૾DL

Slide 23

Slide 23 text

اը֓ཁ 2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 1. νέοτߪೖ 2. ࡱӨϒʔεͰࣸਅࡱӨ 3. ϥΫΨΩλΠϜ 4. ը૾DL

Slide 24

Slide 24 text

اը֓ཁ 2. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(֓ཁ) 1. νέοτߪೖ 2. ࡱӨϒʔεͰࣸਅࡱӨ 3. ϥΫΨΩλΠϜ 4. ը૾DL https: / / tekken.work/art-market/[UUID]

Slide 25

Slide 25 text

3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜ Λ੍࡞͓ͨ͠࿩(API) Cloudflare Workers + R2

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Cloudflare Workers 3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - αʔόϨεͰ΍Γ͍ͨ - 3೔ؒ͋ΔΠϕϯτͰ ΦϯϓϨαʔό͕ࢮΜͰ͍ͳ͍͔ݟଓ͚Δͷ͸ͭΒ͍ - ՄೳͳΒແྉ࿮ͰऩΊͪΌ͍͍ͨ - > Cloudflare WorkersͷαʔϏε܈Ͱ΍Δͧ! - Cloudflare Workers: JavaScriptͷ࣮ߦ؀ڥ, ແྉ࿮΋σΧ͍ - Cloudflare R2: ը૾ͷετϨʔδ, ແྉ࿮΋σΧ͍ - Hono ͱ͍͏ϑϨʔϜϫʔΫΛ ར༻ - Edge࣮ߦ؀ڥ޲͚ͷAPIϑϨʔ ϜϫʔΫ - ೔ຊਓͷYusuke Wada(@yusukebe)͞Μ੍͕࡞ - https: / / hono.dev

Slide 29

Slide 29 text

ΤϯυϙΠϯτͷઃܭΛߟ͑Δ 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ͷެ։༻υϝΠϯ

Slide 30

Slide 30 text

ΤϯυϙΠϯτͷอޢ 3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - HonoͷMiddlewareػೳΛ࢖͍·͢ - /list/[id] ΁ͷϦΫΤετ͸ͦͷ·· - ͦΕҎ֎͸ɺϔομʔ಺ x-api-key ͷ஋͕؀ڥม਺(JWT)ͱಉ͔͡νΣοΫ

Slide 31

Slide 31 text

ΤϯυϙΠϯτͷத਎࣮૷: GET /list/[id] 3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - Path͔Β id Λऔಘ - R2Bucket͔ΒҰཡΛऔಘ - ݁ՌΛJSONͰฦ౴

Slide 32

Slide 32 text

ΤϯυϙΠϯτͷத਎࣮૷: PUT /upload/[id]?name=[name] 3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - QueryParameter͔Β id Λऔಘ - R2Bucket͔ΒҰཡΛऔಘ - ݁ՌΛJSONͰฦ౴ - HonoͷMiddleware ʮZod validatorʯΛ࢖͏͜ͱͰɺָʹ&͖Ε͍ʹparse͔ ͚ΒΕ·͢👍 : ऴΘͬͨޙʹଘࡏΛ஌Γ·ͨ͠

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

ΤϯυϙΠϯτͷத਎࣮૷: PUT /upload/[id]?name=[name] 3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - Path͔Β id, QueryParameter ͔Β name Λऔಘ - ϦΫΤετϘσΟ͔ΒΞοϓϩʔυ ͢ΔϑΝΠϧΛऔಘ - R2Bucket΁ file ΛPUT - ݁ՌΛJSONͰฦ౴

Slide 36

Slide 36 text

ΤϯυϙΠϯτͷઃܭΛߟ͑Δ 3. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(API) - GET /list : ͢΂ͯͷը૾ϑΝΠϧͷϦετ [private] - GET /list/[id] : [id]͔Β࢝·ΔϑΝΠϧͷϦετ (id: UUID) - PUT /upload/[id]?name=[name] : [id]/[name] ͱͯ͠ϑΝΠϧΛอଘ (id: UUID, name: ϑΝΠϧ໊) [private] - ࡱӨϒʔεɾϥΫΨΩϒʔεͰಈ࡞ ͢ΔPython3ΞϓϦέʔγϣϯ͔ Β ը૾Λૹड৴͢Δ - ClassΛ࡞ͬͯԘా͘Μ΁౉͢

Slide 37

Slide 37 text

4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜ Λ੍࡞͓ͨ͠࿩(Web) Next.js + Cloudflare Pages

Slide 38

Slide 38 text

4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ͱΓ͋͑ͣಈ͚͹Ϥγ! - ࣗ෼͸FlutterΤϯδχΞ - Webͷ͜ͱ͸શવΘ͔ΒΜ - લʹͪΐͬ͜ͱ৮ͬͨ͜ͱͷ͋Δ Next.js + React + Tailwind CSS Λ࢖͍͍ͨ - Twitter(X)ͰԿճ͔ݟͨ͜ͱͷ͋Δ shadcn uiΛ࢖ͬͯΈΔ - > Next.js + React + Tailwind CSS + Cloudflare PagesΛϝΠϯʹ࢖͍ͬͯ͘

Slide 39

Slide 39 text

4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ͪΐͬͱ͔͍͍ͬ͜τοϓϖʔδΛ࡞Γ͍ͨΜ͡Ό - ͍ͩͿલʹݟͨ QiitaهࣄΛࢀߟ ʹ͍͍ײ͡ͷϊΠζάϥσʔγϣϯΛ!

Slide 40

Slide 40 text

4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ͪΐͬͱ͔͍͍ͬ͜τοϓϖʔδΛ࡞Γ͍ͨΜ͡Ό - ͳʹ΋Θ͔ΒΜͷͰύΫ Δ! - Next.jsͷTemplate୳ ͠ͷཱྀ - MIT LicenseͳͷͰOK

Slide 41

Slide 41 text

4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ͪΐͬͱ͔͍͍ͬ͜τοϓϖʔδΛ࡞Γ͍ͨΜ͡Ό

Slide 42

Slide 42 text

4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ͪΐͬͱ͔͍͍ͬ͜τοϓϖʔδΛ࡞Γ͍ͨΜ͡Ό

Slide 43

Slide 43 text

4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ؊৺ͷը૾ڞ༗ - Cloudflare WorkersͷAPI͔ΒUUIDʹର͢Δը૾Ұཡऔಘ - React Hooks ͷ useSWR Λ࢖ͬͯΈΔ - ͰϨϯμϦϯά - Ϥγ!

Slide 44

Slide 44 text

4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ؊৺ͷը૾ڞ༗ https: // tekken.work/art-market/?id=24fa58b8-d052-4fd5-b849-a5faf39ad604

Slide 45

Slide 45 text

4. ϓϦϯτγʔϧػͷը૾ڞ༗γεςϜΛ੍࡞͓ͨ͠࿩(Web) ؊৺ͷը૾ڞ༗ https: // tekken.work/art-market/?id=24fa58b8-d052-4fd5-b849-a5faf39ad604

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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