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.7k
フル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
1k
NeurIPS 2021 論文読み会: How Modular should Neural Module Networks Be for Systematic Generalization?
edvakf
0
120
8年物のJavaのシステムをKotlinに変えていく選択に至るまで
edvakf
2
990
ピクシブ社内のImageFlux利用事例紹介
edvakf
1
2.6k
学びの文化を育む社内読書会のススメ
edvakf
0
200
Goでバイナリを読む+α
edvakf
1
870
お前はこれまでに作ったAPIの数を覚えているのか?
edvakf
0
2.4k
「ふつうのRailsアプリケーション」についての考え方
edvakf
2
740
ggplot.galleryというお遊びウェブアプリケーションを作った話
edvakf
0
350
Other Decks in Technology
See All in Technology
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
Shift-from-React-to-Vue
calm1205
3
1.3k
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
460
Emacs x Nostr
hakkadaikon
1
150
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
600
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
180
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
130
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
160
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
110
グローバル展開を見据えたサービスにおける機械翻訳プラクティス / dp-ai-translating
cyberagentdevelopers
PRO
1
150
Featured
See All Featured
Happy Clients
brianwarren
97
6.7k
Practical Orchestrator
shlominoach
186
10k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
A better future with KSS
kneath
238
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
YesSQL, Process and Tooling at Scale
rocio
167
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
It's Worth the Effort
3n
183
27k
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ฒͷεϐʔ υʹͳΔ • ؆୯ʹݟ͑Δ͕ɺҰͭҰͭ৻ॏʹΒͳ͍ͱࣄނΔ
Ωϟογϯάͷ͝ར༻ܭըతʹ̇