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
2
7.5k
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
Share
More Decks by oliver
See All by oliver
comilioとCloudflare、そして未来へと向けて
oliver_diary
6
840
テキストエディタのブラウザ実装 / tokyo_study
oliver_diary
0
320
迫り来る絶望的状況からの脱却物語 / #CEDEC2021
oliver_diary
7
16k
PWAとクラウドゲーミングの現状そしてPWAとOOParts
oliver_diary
3
12k
OOPartsによるPWA事例紹介
oliver_diary
2
9.7k
クラウドゲーミング最新開発事例 - #CEDEC2020
oliver_diary
6
17k
クラウドゲーミング時代のPWA
oliver_diary
0
12k
OOPartsが切り開く クラウドゲーミング ✖︎ PWA
oliver_diary
4
16k
今日から始めるFirestoreのテスト
oliver_diary
2
11k
Other Decks in Technology
See All in Technology
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
370
AIをプライベートや業務で使ってみよう!効果的な認定資格の活かし方
fukazawashun
0
100
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
110
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
890
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
420
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
2
450
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How GitHub (no longer) Works
holman
315
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
We Have a Design System, Now What?
morganepeng
53
7.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
A designer walks into a library…
pauljervisheath
207
24k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Embracing the Ebb and Flow
colly
87
4.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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पΓͷ·ͨͲ͔͜Ͱ