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

Cacheable Presigned URL with Cloudflare Workers

oliver
October 06, 2023

Cacheable Presigned URL with Cloudflare Workers

2023年10月06日「Cloudflare Meetup Nagoya 第3回」にて発表した資料。
https://cfm-cts.connpass.com/event/294096/

oliver

October 06, 2023
Tweet

More Decks by oliver

Other Decks in Technology

Transcript

  1. Cloud
    fl
    are Meetup Nagoya ୈ3ճ
    Cacheable Presigned URL with
    Cloudflare Workers
    2023/10/06 oliver

    View full-size slide

  2. ࣗݾ঺հ
    • גࣜձࣾϢʔπʔςοΫʢ୅ද / ιϑτ΢ΣΞΤϯδχΞʣ

    • લલ৬͸޿ࠂ഑৴ɺલ৬͸Ϋϥ΢υήʔϛϯά

    • Cloud
    fl
    are͸਺೥લ͔Βͣͬͱ௥͔͚͍ͬͯΔ

    • ͱ͋Δࣄ৘Ͱେྔͷը૾഑৴ΛηΩϡΞͳঢ়ଶͰ഑৴͢Δٕज़͕ඞཁͱͳͬ
    ͍ͯΔʢͷͰɺࠓճͷLTͰݕূ݁ՌΛൃද͠Α͏ͱࢥͬͨʣ
    minakawadaiki.com

    View full-size slide

  3. ը૾഑৴ʹCloudflareΛ


    બ୒͢Δ1൪ͷཧ༝

    View full-size slide

  4. σʔλΤάϨεྉ͕ۚ


    0ԁ͔ͩΒ
    https://www.cloud
    fl
    are.com/ja-jp/learning/cloud/what-are-data-egress-fees/

    View full-size slide

  5. ֎෦ʹஔ͔ΕͯΔը૾Λ
    CloudflareͰϓϩΩγ͢Δ

    View full-size slide

  6. ֎෦ʹஔ͔ΕͯΔը૾ΛCloudflareͰϓϩΩγ͢Δ
    • ύλʔϯ1ʢDNSΛCloud
    fl
    areͰ؅ཧͰ͖Δ৔߹ʣ
    • DNS ProxyΛઃఆͯ͋͛͠Ε͹OK

    • Ωϟογϡͤͨ͘͞ͳ͍΋ͷ·ͰΩϟογϡͤ͞ͳ͍Α͏ʹ஫ҙ
    https://developers.cloud
    fl
    are.com/support/third-party-software/others/con
    fi
    guring-an-amazon-web-services-static-site-to-use-cloud
    fl
    are/

    View full-size slide

  7. ֎෦ʹஔ͔ΕͯΔը૾ΛCloudflareͰϓϩΩγ͢Δ
    • ύλʔϯ2ʢDNSΛCloud
    fl
    areͰ؅ཧͰ͖ͳ͍৔߹ʣ
    • Cloud
    fl
    are WorkersͰΩϟογϡͯ͋͛͠Δ

    • Workersͷݺͼग़͠ྉ͕͔͔ۚΔͷͰ஫ҙ

    • 1೔͋ͨΓ10ສ݅ͷϦΫΤετ·Ͱແྉʢ2023೥10݄6೔࣌఺ʣ

    • ϦΫΤετ100ສ݅͋ͨΓֹ݄0.15υϧʢ2023೥10݄6೔࣌఺ʣ
    https://developers.cloud
    fl
    are.com/workers/examples/cache-api/

    View full-size slide

  8. DNSΛCloudflareͰ؅ཧͰ͖ͳ͍৔߹
    https:///image?src=https://

    View full-size slide

  9. Cloudflare্͚ͩͰը૾഑৴͢Δ

    View full-size slide

  10. Cloudflare্͚ͩͰը૾഑৴͢Δ
    • ύλʔϯ̍ʢCloud
    fl
    are ImagesΛ࢖͏ʣ
    • ը૾֨ೲ10ສ఺͋ͨΓ$5ʢ2023೥10݄6೔࣌఺ʣ

    • ը૾഑৴10ສ఺͋ͨΓ$1ʢ2023೥10݄6೔࣌఺ʣ

    • ༷ʑͳը૾ૢ࡞ʢϦαΠζͳͲͷฤूʣ͕URLͰՄೳ

    • Workers + R2ͱൺ΂ͯগׂ͠ߴͳҹ৅
    https://www.cloud
    fl
    are.com/ja-jp/developer-platform/cloud
    fl
    are-images/

    View full-size slide

  11. Cloudflare্͚ͩͰը૾഑৴͢Δ
    • ύλʔϯ̎ʢCloud
    fl
    are Workers + R2Λ࢖͏ʣ
    • R2ͷྉۚʢಡΈऔΓʹ͔͔Δ෦෼͚ͩهࡌʣ

    • ετϨʔδ: $0.015 / GB ετϨʔδ

    • ΫϥεBૢ࡞ɿطଘͷঢ়ଶΛಡΈऔΔ: $0.36 / 100ສ

    • ը૾ૢ࡞͸WorkersͰ΋ผ్՝ۚ͢Ε͹Մೳ
    https://developers.cloud
    fl
    are.com/r2/api/workers/workers-api-usage/

    View full-size slide

  12. Cloudflare Workers + R2Λ࢖͏
    https:///<
    fi
    le-name>/with-cache
    ͜͜ͰΩϟογϡ͍ͤͯ͞Δ

    View full-size slide

  13. ॺ໊෇͖URLͰը૾ΛकΔ

    View full-size slide

  14. ॺ໊෇͖URLͰը૾ΛकΔ
    • Ϣʔεέʔε
    • ಛఆͷ૊৫ʹॴଐ͍ͯ͠Δਓ͚͔ͩ͠ݟΕͳ͍ը૾

    • Notionͷը૾ͱ͔GitHubͷը૾ͱ͔

    • ອըͳͲΛߪೖͯ͠ઐ༻ͷReaderͳͲͰಡΉ৔߹

    • kindleͱ͔ͦͷଞອըΞϓϦͱ͔
    https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/ShareObjectPreSignedURL.html

    View full-size slide

  15. ॺ໊෇͖URLͰը૾ΛकΔ
    ᶃ ݖݶʹج͍ͮͯॺ໊෇͖URLΛൃߦ͢Δ
    ᶄ ॺ໊Λݕূ͠ը૾ΛϨεϙϯε
    ॺ໊෇͖URLൃߦαʔόʔ
    ը૾ετϨʔδ
    https:////verify?mac=&expiry=

    View full-size slide

  16. WorkersͰ࣮૷͢Δ

    View full-size slide

  17. WorkersͰ࣮૷͢ΔʢURLੜ੒ʣ
    https://developers.cloud
    fl
    are.com/workers/examples/signing-requests/
    • `/:image/generate` ͰΞΫηεΛ଴ͪड͚Δ

    • generateSignedUrlؔ਺Ͱ࡞੒ͨ͠ॺ໊෇͖URLΛΫϥΠΞϯτʹϨεϙϯε

    View full-size slide

  18. WorkersͰ࣮૷͢ΔʢURLੜ੒ʣ
    https://developers.cloud
    fl
    are.com/workers/examples/signing-requests/
    • Web Crypto API ͰΩʔΛੜ੒

    • ΞϧΰϦζϜ͸ॺ໊෇͖URLͰΑ͘༻͍ΒΕΔ

    HMAC-SHA256Λ࠾༻

    • HMAC͸ڞ௨伴҉߸ํࣜͳͷͰ

    ॺ໊ଆͱݕূଆͰಉ͡ΩʔΛ༻͍Δ
    • ॺ໊URLʹ࠷௿ݶඞཁͳ৘ใ͸ɺͦͷURLͷ༗ޮظݶͱΞΫ
    ηεൣғʢ ࠓճͰ͍͏ͱ `url.pathname` ʣͰ͋ΓɺͦΕΒ
    ΛؚΊͯॺ໊͍ͯ͠Δ
    • ॺ໊ͯ͠ੜ੒͞ΕͨMACΛURLʹؚΊΔͨΊBase64ʹม׵

    • `+`จࣈ͸URLʹؚΊΔͱόάΛੜΉͨΊɺ `-` ʹม׵

    • URLͷQuery ParamsʹMACͱ༗ޮظݶʢexpiryʣΛ෇༩

    View full-size slide

  19. WorkersͰ࣮૷͢Δʢը૾ΞΫηεʣ
    • ॺ໊෇͖URLʹ෇༩͞Ε͍ͯΔMAC
    ͱexpiryΛ༻͍ͯɺ`verifySignedUrl`
    ؔ਺Λ࣮ߦʢৄࡉ࣍ϖʔδʣ
    • ʮॺ໊͕ਖ਼͍͠ʯ͔ͭʮͦͷॺ໊͕
    ༗ޮظݶ಺ʯͰ͋Δ͔ΛνΣοΫ
    • R2͔Βը૾Λऔಘ͠ɺϨεϙϯε
    https://developers.cloud
    fl
    are.com/workers/examples/signing-requests/

    View full-size slide

  20. WorkersͰ࣮૷͢Δʢը૾ΞΫηεʣ
    • ݕূ༻ͷڞ௨伴Λ࡞੒͢Δ
    • URLͰड͚औͬͨMACΛBase64͔Βม׵

    • ॺ໊ʹར༻ͨ͠

    ʮ`${url.pathname}@${expiry}`ʯΛੜ੒
    • ॺ໊Λݕূ
    https://developers.cloud
    fl
    are.com/workers/examples/signing-requests/

    View full-size slide

  21. Ωϟογϡ༗ແͰͷ଎౓Λൺֱ͢Δ

    View full-size slide

  22. R2 from Workers with no cache
    ntimes 10 -- curl ‘https:////no-cache’ --compressed -o /dev/null -w "%{time_total}\n" -s | percentile

    View full-size slide

  23. Presigned URL With R2
    ntimes 10 -- curl ‘https://.r2.cloud
    fl
    arestorage.com/images/?X-Amz-Expires=3600&X-Amz-Date=20231005T200233Z

    &X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=

    &X-Amz-SignedHeaders=host&X-Amz-Signature=’ --compressed -o /dev/null -w "%{time_total}\n" -s | percentile

    View full-size slide

  24. R2 from Workers with cache
    ntimes 10 -- curl ‘https:////with-cache’ --compressed -o /dev/null -w "%{time_total}\n" -s | percentile

    View full-size slide

  25. Public bucket on R2
    ntimes 10 -- curl ‘https:///images/’ --compressed -o /dev/null -w "%{time_total}\n" -s | percentile

    View full-size slide

  26. ଎౓Λൺֱ͢Δʢ20MBͷը૾ʣ
    Workers with no cache
    Presigned URL
    Workers with cache
    Public bucket
    0 0.3 0.6 0.9 1.2
    S S S S S

    View full-size slide

  27. Cacheable Presigned URL with
    Cloudflare Workers

    View full-size slide

  28. ΩϟογϡՄೳͳॺ໊෇͖URL
    • ͳͥඞཁ͔
    • R2ͱ͸͍͑ɺΩϟογϡ͞Εͯͳ͍ը૾͸Ϩεϙϯε͕஗͍
    • R2ͷಡΈऔΓΑΓWorkersͷݺͼग़͠ͷํ͕௿ίετ
    • ΍Βͳ͚Ε͹͍͚ͳ͍͜ͱ
    • ॺ໊෇͖URLͷϩδοΫʹΩϟογϡॲཧΛ௥Ճ

    • ॺ໊෇͖URLΛ࡞੒͢ΔࡍͷexpireΛௐ੔͢Δ

    View full-size slide

  29. ॺ໊෇͖URLͷϩδοΫʹΩϟογϡॲཧΛ௥Ճ
    • ॺ໊ͷݕূʹ੒ޭͨ࣌͠ʹΩϟογϡ͔
    Βऔಘ͢ΔίʔυΛ௥Ճ
    • Ωϟογϡ͕ͳ͍৔߹͸R2͔Βը૾Λऔ
    ಘ͠Ϩεϙϯε͢Δ

    View full-size slide

  30. ॺ໊෇͖URLΛ࡞੒͢ΔࡍͷexpireΛௐ੔͢Δ
    https://advancedweb.hu/cacheable-s3-signed-urls/

    View full-size slide

  31. ॺ໊෇͖URLΛ࡞੒͢ΔࡍͷexpireΛௐ੔͢Δ
    • ࠓճ͸؆қతʹʮ࣍ͷX࣌0෼ + 10sʯ

    Λ༗ޮظݶͱͨ͠ॺ໊෇͖URLΛ

    ࡞੒͍ͯ͠Δ

    • ཁ͢Δʹ13࣌15෼ʹੜ੒͞ΕΔॺ໊URL
    ͱ13࣌59෼ʹੜ੒͞ΕΔॺ໊෇͖URL͕
    ಉҰʹͳΔ͜ͱͰΩϟογϡ͞ΕΔΑ͏
    ʹͳΔ

    View full-size slide

  32. UploadपΓͷ࿩͸·ͨͲ͔͜Ͱ

    View full-size slide