Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cacheable Presigned URL with Cloudflare Workers
Search
oliver
October 06, 2023
Technology
9.6k
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Cacheable Presigned URL with Cloudflare Workers
2023年10月06日「Cloudflare Meetup Nagoya 第3回」にて発表した資料。
https://cfm-cts.connpass.com/event/294096/
oliver
October 06, 2023
More Decks by oliver
See All by oliver
comilioとCloudflare、そして未来へと向けて
oliver_diary
6
2.1k
テキストエディタのブラウザ実装 / tokyo_study
oliver_diary
0
370
迫り来る絶望的状況からの脱却物語 / #CEDEC2021
oliver_diary
7
18k
PWAとクラウドゲーミングの現状そしてPWAとOOParts
oliver_diary
3
13k
OOPartsによるPWA事例紹介
oliver_diary
2
11k
クラウドゲーミング最新開発事例 - #CEDEC2020
oliver_diary
6
19k
クラウドゲーミング時代のPWA
oliver_diary
0
14k
OOPartsが切り開く クラウドゲーミング ✖︎ PWA
oliver_diary
4
18k
今日から始めるFirestoreのテスト
oliver_diary
2
13k
Other Decks in Technology
See All in Technology
人手不足への挑戦:車両保全を支えるIoTとクラウド内製化の道【SORACOM Discovery 2026】
soracom
PRO
0
150
【公開用】AI_Dev_Ex2026_AI_登壇資料
matsuritechnologies
PRO
2
720
MCPをつなげて作る組織横断のAIエージェント基盤
tsubakimoto_s
0
220
Claude Mythos、Fable...フロンティアAIの最新動向と企業のセキュリティ対策
flatt_security
0
160
文字起こし基盤の信頼性
abnoumaru
0
150
GMOフィナンシャルゲートが挑む、「止まらない」決済インフラ構築の裏側【SORACOM Discovery 2026】
soracom
PRO
0
100
新たなDBアーキテクチャ「LTAP」にDeep Dive!!
inoutk
0
130
データと地図で読む 大井町の「かわるもの、かわらないもの」
yoshiyama_hana
0
520
セキュリティ研修【MIXI 26新卒技術研修】
mixi_engineers
PRO
28
22k
クラウドを使う側から、作る側へ / 大吉祥寺.pm 2026前夜祭
fujiwara3
7
1.7k
最高のシステムプロンプトを作るためにフィードバック機能を導入した話
alchemy1115
0
140
AI時代の開発生産性を捉え直す — 経営と現場をつなぐ「開発組織のオブザーバビリティ」— / AI Dev Ex Conference 2026
tkyowa
1
1.8k
Featured
See All Featured
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
230
Rebuilding a faster, lazier Slack
samanthasiow
85
9.6k
Odyssey Design
rkendrick25
PRO
2
730
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
330
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
470
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
200
Ruling the World: When Life Gets Gamed
codingconduct
0
290
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
270
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing Experiences People Love
moore
143
24k
A Modern Web Designer's Workflow
chriscoyier
698
190k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
640
Transcript
Cloud fl are Meetup Nagoya ୈ3ճ Cacheable Presigned URL with
Cloudflare Workers 2023/10/06 oliver
ࣗݾհ • גࣜձࣾϢʔπʔςοΫʢද / ιϑτΣΞΤϯδχΞʣ • લલ৬ࠂ৴ɺલ৬Ϋϥυήʔϛϯά • Cloud fl
areલ͔Βͣͬͱ͔͚͍ͬͯΔ • ͱ͋ΔࣄͰେྔͷը૾৴ΛηΩϡΞͳঢ়ଶͰ৴͢Δٕज़͕ඞཁͱͳͬ ͍ͯΔʢͷͰɺࠓճͷLTͰݕূ݁ՌΛൃද͠Α͏ͱࢥͬͨʣ minakawadaiki.com
ը૾৴ʹCloudflareΛ બ͢Δ1൪ͷཧ༝
σʔλΤάϨεྉ͕ۚ 0ԁ͔ͩΒ https://www.cloud fl are.com/ja-jp/learning/cloud/what-are-data-egress-fees/
֎෦ʹஔ͔ΕͯΔը૾Λ CloudflareͰϓϩΩγ͢Δ
֎෦ʹஔ͔ΕͯΔը૾Λ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/
֎෦ʹஔ͔ΕͯΔը૾ΛCloudflareͰϓϩΩγ͢Δ • ύλʔϯ2ʢDNSΛCloud fl areͰཧͰ͖ͳ͍߹ʣ • Cloud fl are WorkersͰΩϟογϡͯ͋͛͠Δ
• Workersͷݺͼग़͠ྉ͕͔͔ۚΔͷͰҙ • 1͋ͨΓ10ສ݅ͷϦΫΤετ·Ͱແྉʢ202310݄6࣌ʣ • ϦΫΤετ100ສ݅͋ͨΓֹ݄0.15υϧʢ202310݄6࣌ʣ https://developers.cloud fl are.com/workers/examples/cache-api/
DNSΛCloudflareͰཧͰ͖ͳ͍߹ https://<workers-path>/image?src=https://<image-path>
Cloudflare্͚ͩͰը૾৴͢Δ
Cloudflare্͚ͩͰը૾৴͢Δ • ύλʔϯ̍ʢCloud fl are ImagesΛ͏ʣ • ը૾֨ೲ10ສ͋ͨΓ$5ʢ202310݄6࣌ʣ • ը૾৴10ສ͋ͨΓ$1ʢ202310݄6࣌ʣ
• ༷ʑͳը૾ૢ࡞ʢϦαΠζͳͲͷฤूʣ͕URLͰՄೳ • Workers + R2ͱൺͯগׂ͠ߴͳҹ https://www.cloud fl are.com/ja-jp/developer-platform/cloud fl are-images/
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/
Cloudflare Workers + R2Λ͏ https://<workers-path>/< fi le-name>/with-cache ͜͜ͰΩϟογϡ͍ͤͯ͞Δ
ॺ໊͖URLͰը૾ΛकΔ
ॺ໊͖URLͰը૾ΛकΔ • Ϣʔεέʔε • ಛఆͷ৫ʹॴଐ͍ͯ͠Δਓ͚͔ͩ͠ݟΕͳ͍ը૾ • Notionͷը૾ͱ͔GitHubͷը૾ͱ͔ • ອըͳͲΛߪೖͯ͠ઐ༻ͷReaderͳͲͰಡΉ߹ •
kindleͱ͔ͦͷଞອըΞϓϦͱ͔ https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/ShareObjectPreSignedURL.html
ॺ໊͖URLͰը૾ΛकΔ ᶃ ݖݶʹج͍ͮͯॺ໊͖URLΛൃߦ͢Δ ᶄ ॺ໊Λݕূ͠ը૾ΛϨεϙϯε ॺ໊͖URLൃߦαʔόʔ ը૾ετϨʔδ https://<domain>/<image-path>/verify?mac=<MAC>&expiry=<number>
WorkersͰ࣮͢Δ
WorkersͰ࣮͢ΔʢURLੜʣ https://developers.cloud fl are.com/workers/examples/signing-requests/ • `/:image/generate` ͰΞΫηεΛͪड͚Δ • generateSignedUrlؔͰ࡞ͨ͠ॺ໊͖URLΛΫϥΠΞϯτʹϨεϙϯε
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ʣΛ༩
WorkersͰ࣮͢Δʢը૾ΞΫηεʣ • ॺ໊͖URLʹ༩͞Ε͍ͯΔMAC ͱexpiryΛ༻͍ͯɺ`verifySignedUrl` ؔΛ࣮ߦʢৄࡉ࣍ϖʔδʣ • ʮॺ໊͕ਖ਼͍͠ʯ͔ͭʮͦͷॺ໊͕ ༗ޮظݶʯͰ͋Δ͔ΛνΣοΫ • R2͔Βը૾Λऔಘ͠ɺϨεϙϯε
https://developers.cloud fl are.com/workers/examples/signing-requests/
WorkersͰ࣮͢Δʢը૾ΞΫηεʣ • ݕূ༻ͷڞ௨伴Λ࡞͢Δ • URLͰड͚औͬͨMACΛBase64͔Βม • ॺ໊ʹར༻ͨ͠ ʮ`${url.pathname}@${expiry}`ʯΛੜ • ॺ໊Λݕূ
https://developers.cloud fl are.com/workers/examples/signing-requests/
Ωϟογϡ༗ແͰͷΛൺֱ͢Δ
R2 from Workers with no cache ntimes 10 -- curl
‘https://<worker-domain>/<image-path>/no-cache’ --compressed -o /dev/null -w "%{time_total}\n" -s | percentile
Presigned URL With R2 ntimes 10 -- curl ‘https://<r2-domain>.r2.cloud fl
arestorage.com/images/<image-name>?X-Amz-Expires=3600&X-Amz-Date=20231005T200233Z &X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=<credential> &X-Amz-SignedHeaders=host&X-Amz-Signature=<sig>’ --compressed -o /dev/null -w "%{time_total}\n" -s | percentile
R2 from Workers with cache ntimes 10 -- curl ‘https://<workers-domain>/<image-path>/with-cache’
--compressed -o /dev/null -w "%{time_total}\n" -s | percentile
Public bucket on R2 ntimes 10 -- curl ‘https://<public-r2-domain>/images/<image-name>’ --compressed
-o /dev/null -w "%{time_total}\n" -s | percentile
Λൺֱ͢Δʢ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
ຊ
Cacheable Presigned URL with Cloudflare Workers
ΩϟογϡՄೳͳॺ໊͖URL • ͳͥඞཁ͔ • R2ͱ͍͑ɺΩϟογϡ͞Εͯͳ͍ը૾Ϩεϙϯε͕͍ • R2ͷಡΈऔΓΑΓWorkersͷݺͼग़͠ͷํ͕ίετ • Βͳ͚Ε͍͚ͳ͍͜ͱ •
ॺ໊͖URLͷϩδοΫʹΩϟογϡॲཧΛՃ • ॺ໊͖URLΛ࡞͢ΔࡍͷexpireΛௐ͢Δ
ॺ໊͖URLͷϩδοΫʹΩϟογϡॲཧΛՃ • ॺ໊ͷݕূʹޭͨ࣌͠ʹΩϟογϡ͔ Βऔಘ͢ΔίʔυΛՃ • Ωϟογϡ͕ͳ͍߹R2͔Βը૾Λऔ ಘ͠Ϩεϙϯε͢Δ
ॺ໊͖URLΛ࡞͢ΔࡍͷexpireΛௐ͢Δ https://advancedweb.hu/cacheable-s3-signed-urls/
ॺ໊͖URLΛ࡞͢ΔࡍͷexpireΛௐ͢Δ • ࠓճ؆қతʹʮ࣍ͷX࣌0 + 10sʯ Λ༗ޮظݶͱͨ͠ॺ໊͖URLΛ ࡞͍ͯ͠Δ • ཁ͢Δʹ13࣌15ʹੜ͞ΕΔॺ໊URL ͱ13࣌59ʹੜ͞ΕΔॺ໊͖URL͕
ಉҰʹͳΔ͜ͱͰΩϟογϡ͞ΕΔΑ͏ ʹͳΔ
UploadपΓͷ·ͨͲ͔͜Ͱ