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
フルCDNアーキテクチャでサービス設計した話
Search
Atsushi Takayama
September 22, 2018
Technology
5
3.8k
フルCDNアーキテクチャでサービス設計した話
FUKUOKA Engineers Day 2018 ~Autumn~ で話した内容です。
Atsushi Takayama
September 22, 2018
Tweet
Share
More Decks by Atsushi Takayama
See All by Atsushi Takayama
最高の開発者体験の追求が開発生産性を改善し続ける文化を生み出した話
edvakf
3
1.1k
NeurIPS 2021 論文読み会: How Modular should Neural Module Networks Be for Systematic Generalization?
edvakf
0
140
8年物のJavaのシステムをKotlinに変えていく選択に至るまで
edvakf
2
1k
ピクシブ社内のImageFlux利用事例紹介
edvakf
1
2.7k
学びの文化を育む社内読書会のススメ
edvakf
0
240
Goでバイナリを読む+α
edvakf
1
910
お前はこれまでに作ったAPIの数を覚えているのか?
edvakf
0
2.5k
「ふつうのRailsアプリケーション」についての考え方
edvakf
2
800
ggplot.galleryというお遊びウェブアプリケーションを作った話
edvakf
0
380
Other Decks in Technology
See All in Technology
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
780
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
200
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
190
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
110
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.6k
事業を差別化する技術を生み出す技術
pyama86
2
420
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
200
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
380
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
Art, The Web, and Tiny UX
lynnandtonic
298
20k
A Modern Web Designer's Workflow
chriscoyier
693
190k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Navigating Team Friction
lara
183
15k
Automating Front-end Workflow
addyosmani
1369
200k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
A designer walks into a library…
pauljervisheath
205
24k
Transcript
ϑϧCDNΞʔΩςΫνϟͰ αʔϏεઃܭͨ͠ Fukuoka Engineers Day pixiv.inc Atsushi
Takayama
• ߴࢁ / @edvakf • ϐΫγϒגࣜձࣾCTO ݉ ԬΦϑΟεϚωʔδϟʔ
• JavaScript, Ruby, Go, Scala
ʮϑϧCDNΞʔΩςΫνϟʯ
ʮϑϧCDNΞʔΩςΫνϟʯ
͜Ε͕2016
― 1ޙ ―
dev.to͕ʹ
• Service Worker • CDN
• Service Worker • CDN
ࠓճͷߏ
• iOS: Swift • Web (PWA): Ionic 3,
TypeScript, Firebase • API: Rails, Heroku, CloudFront
chatstory.pixiv.net
• ϑϩϯτΤϯυFirebaseʹϗετ͍ͯ͠ΔͷͰɺ FirebaseʹσϑΥϧτͰ͍͍ͭͯΔCDNΛ׆༻ • firebase.jsonͰCache-ControlLinkϔομʔΛઃఆ
ͯͯ͞͞
ΩϟογϡΛߟ͑Δ্Ͱେࣄͳ͜ͱ
• ͦͦΩϟογϡ͢Δඞཁ͕͋Δͷ͔ • Ωϟογϡͷ༗ޮظݶ • Ωϟογϡͷআ • Ωϟογϡ͍͚ͯ͠ͳ͍ͷΛΩϟογϡ͠ͳ͍
• ͦͦΩϟογϡ͢Δඞཁ͕͋Δͷ͔ • Ωϟογϡͷ༗ޮظݶ • Ωϟογϡͷআ • Ωϟογϡ͍͚ͯ͠ͳ͍ͷΛΩϟογϡ͠ͳ͍
• ΩϟογϡҰೖΕͨΒ֎͢ͷ͔ͳΓ͍͠ • Ωϟογϡ͢Δͱ͍͏͜ͱෳࡶ͞Λ૿͢͜ͱ • →ύϑΥʔϚϯε͕ʹͳΔՕॴ͚ͩΩϟογϡ
HerokuΛCDNͰΩϟογϡ
• Heroku͕ԕ͗͢Δ • ϥϯυτϦοϓ͚ͩͰ100ms • ϖʔδͷදࣔʹΫϦςΟΧϧͳϦΫΤετ CDNͰϢʔβʔͷۙ͘ʹΩϟογϡ͍ͨ͠
• ͦͦΩϟογϡ͢Δඞཁ͕͋Δͷ͔ • Ωϟογϡͷ༗ޮظݶ • Ωϟογϡͷআ • Ωϟογϡ͍͚ͯ͠ͳ͍ͷΛΩϟογϡ͠ͳ͍
CDNΩϟογϡͷ༗ޮظݶ
Cache-Control: public, max-age=0, s-maxage=3600 public => CDNͰΩϟογϡͯ͠ྑ͍ max-age
=> ΫϥΠΞϯτʢϒϥβʣͰΩϟογϡͯ͠ྑ͍ظؒ s-maxage => ϓϩΩγʢCDNʣͰΩϟογϡͯ͠ྑ͍ظؒ Cache-Controlϔομʔ
• ͦͦΩϟογϡ͢Δඞཁ͕͋Δͷ͔ • Ωϟογϡͷ༗ޮظݶ • Ωϟογϡͷআ • Ωϟογϡ͍͚ͯ͠ͳ͍ͷΛΩϟογϡ͠ͳ͍
CloudFrontͷΩϟογϡআ
• API͕͋ΔʢͪΖΜʣ • URLલํҰகͰࢦఆ • ैདྷ10ʙ15͔͔͍ͬͯͨͦ͏͕ͩɺ 2017͔Βશମͷ90%ʹ5ඵɺ࠷େͰ1 •
Fastlyͩͱ150msʢʂʣ
• ߋ৽ܥͷΞΫγϣϯͰΩϟογϡΛআ • ࠣࡉͳߋ৽͑ͯແࢹ
• ͦͦΩϟογϡ͢Δඞཁ͕͋Δͷ͔ • Ωϟογϡͷ༗ޮظݶ • Ωϟογϡͷআ • Ωϟογϡ͍͚ͯ͠ͳ͍ͷΛΩϟογϡ͠ͳ͍
Ωϟογϡࣄނࢭ
• CookieUser-AgentIPΞυϨεɺݸผͷϦΫΤε τʹґଘ͢ΔσʔλΩϟογϡ͠ͳ͍ • ͜͜ΛޡΔࣄނҙ֎ͱଟ্͍ʹɺϓϥΠόγʔ໘ ͰେʹͳΔ͜ͱ͕͋Δ • ཧతʹΩϟογϡΑΓޙΖͰrequestΦϒ
δΣΫτʹ৮Εͳ͘͢Δ ʢݱ࣮తʹ͜ΕͰμϝͳέʔε͋Δʣ
• ࠓճɺcurrent_userΛ͑ΔΞΫγϣϯΛ੍ݶͨ͠ • Ωϟογϡ͢ΔͳΒcurrent_userΛ͏ͳ • current_userΛ͏ͳΒΩϟογϡ͢Δͳ • →ϔϧύʔϝιουԽͯ͠ɺকདྷʹΔࣄނࢭʹ
• Ωϟογϡͯ͠ྑ͍APIͱΩϟογϡ͍͚ͯ͠ͳ͍ APIΛઃܭஈ֊͔Βશʹ • ྫɿϢʔβʔAPIΩϟογϡ͍ͨ͠ͷͰɺʮ͕ࣗ ͜ͷϢʔβʔΛϑΥϩʔ͍ͯ͠Δ͔ʯผAPIʹ͢Δ • ͜ΕʹΑͬͯϦΫΤετ͕૿͑Δͷڐ༰͢Δ
Ͳ͏ͯ͠ذ͍ͨ͠߹
Vary: Accept, Origin AcceptϔομʔͱOriginϔομʔʢϦΫΤετϔομʔʣ͝ͱʹผͷ Ωϟογϡʹ͢Δ ʢUser-AgentͳͲͱॻ͍ͯ͠·͏ͱΩϟογϡώοτ͕Լ͕Γ͗͢Δ ͷͰҙʣ Varyϔομʔ
͕ɺCloudFrontVaryΛແࢹ͢Δ
ࠓճͷॴ
PreflightϦΫΤετ
Cross Origin Resource Sharing (CORS) ʹ͓͍ͯɺ ΧελϜϔο μʔ͚ͭͯϦΫΤετ͍ͨ͠߹
ϒϥβ͕PreflightϦΫΤε τΛૹΓɺαʔόʔ͕Ԡ͢Ε ຊͷϦΫΤετΛૹΔ ʢࡉׂ͔͍༷Ѫʣ
PreflightΩϟογϡ༻CloudFrontઃఆ
͜ΕͰരʂʂ
·ͱΊ
• HerokuͰCDNͰΩϟογϡ͢Εdev.toฒͷεϐʔ υʹͳΔ • ؆୯ʹݟ͑Δ͕ɺҰͭҰͭ৻ॏʹΒͳ͍ͱࣄނΔ
Ωϟογϯάͷ͝ར༻ܭըతʹ̇