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.9k
フル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.2k
NeurIPS 2021 論文読み会: How Modular should Neural Module Networks Be for Systematic Generalization?
edvakf
0
160
8年物のJavaのシステムをKotlinに変えていく選択に至るまで
edvakf
2
1.1k
ピクシブ社内のImageFlux利用事例紹介
edvakf
1
2.8k
学びの文化を育む社内読書会のススメ
edvakf
0
270
Goでバイナリを読む+α
edvakf
1
940
お前はこれまでに作ったAPIの数を覚えているのか?
edvakf
0
2.5k
「ふつうのRailsアプリケーション」についての考え方
edvakf
2
830
ggplot.galleryというお遊びウェブアプリケーションを作った話
edvakf
0
400
Other Decks in Technology
See All in Technology
2025advance01
minamizaki
0
130
大事なのは、AIの精度だけじゃない!〜1円のズレも許されない経理領域とAI〜
jun_nemoto
11
5.2k
やさしいClaude Code入門
minorun365
PRO
32
25k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
360k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.2k
Redmineの意外と知らない便利機能 (Redmine 6.0対応版)
vividtone
0
1.3k
いまさら聞けない Git 超入門 〜Gitって結局なに?から始める第一歩〜
devops_vtj
0
170
AIの電力問題を概観する
rmaruy
1
220
プロジェクトマネジメント実践論|現役エンジニアが語る!~チームでモノづくりをする時のコツとは?~
mixi_engineers
PRO
3
180
アプリケーションの中身が見える!Mackerel APMの全貌と展望 / Mackerel APMリリースパーティ
mackerelio
0
450
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
25k
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.3k
Visualization
eitanlees
146
16k
Making Projects Easy
brettharned
116
6.2k
What's in a price? How to price your products and services
michaelherold
245
12k
Being A Developer After 40
akosma
91
590k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Rails Girls Zürich Keynote
gr2m
94
13k
Adopting Sorbet at Scale
ufuk
76
9.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Invisible Side of Design
smashingmag
299
50k
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ฒͷεϐʔ υʹͳΔ • ؆୯ʹݟ͑Δ͕ɺҰͭҰͭ৻ॏʹΒͳ͍ͱࣄނΔ
Ωϟογϯάͷ͝ར༻ܭըతʹ̇