Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Deploying Ember with Varnish

Avatar for James Alexander Rosen James Alexander Rosen
November 10, 2015
Programming
0
220

Deploying Ember with Varnish

How Fastly uses Varnish to deploy single-page applications
Avatar for James Alexander Rosen

James Alexander Rosen

November 10, 2015
Tweet

More Decks by James Alexander Rosen

See All by James Alexander Rosen
Making Design-by-Committee Work
Avatar for James Alexander Rosen jamesarosen
1
130
Empathetic Experiences
Avatar for James Alexander Rosen jamesarosen
0
240

Other Decks in Programming

See All in Programming
The Nature of Complexity in John Ousterhout’s Philosophy of Software Design
Avatar for Philip Schwarz philipschwarz
PRO
0
170
知識0からカンファレンスやってみたらこうなった！
Avatar for syossan27 syossan27
5
260
私のRubyKaigi 2025 Kaigi Effect / My RubyKaigi 2025 Kaigi Effect
Avatar for chobishiba chobishiba
1
120
設計の本質：コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
Avatar for nrs nrslib
10
3.8k
開発者フレンドリーで顧客も満足？Platformの秘密
Avatar for ALGO ARTIS algoartis
0
230
ComposeでのPicture in Picture
Avatar for takathemax takathemax
0
140
ビカム・ア・コパイロット
Avatar for Kento.Yamada ymd65536
1
130
Road to Ruby for A Linguistics Nerd
Avatar for Hayato Ishida hayat01sh1da
PRO
0
290
大LLM時代にこの先生きのこるには-ITエンジニア編
Avatar for Kuu fumiyakume
8
3.4k
データと事例で振り返るDevin導入の"リアル" / The Realities of Devin Reflected in Data and Case Studies
Avatar for r-kagaya rkaga
3
2k
Rubyの!メソッドをちゃんと理解する
Avatar for Yuto Urushima alstrocrack
1
310
監視 やばい
Avatar for syossan27 syossan27
12
10k

Featured

See All Featured
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
205
24k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
52
2.5k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
800
It's Worth the Effort
Avatar for 3n 3n
184
28k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
5
600
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
227
22k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.4k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
78
6.3k

Transcript

  1. Deploying Ember Apps on Fastly Deploying Ember Apps on Fastly

    James A Rosen

  2. Deploying Ember Apps on Fastly • Lightning Deployment • Just

    enough Varnish & VCL to be dangerous • The Fastly Content Delivery Network • Putting it together: GitHub, Travis, Google Cloud Storage, & Fastly What You’ll Learn

  3. Deploying Ember Apps on Fastly What You’ll Learn Developer GitHub

    Travis CI Google Cloud Storage Fastly Edge Server Browser Fastly API Pull Push index.html *.css, *.js, …

  4. Deploying Ember Apps on Fastly Lightning Deployment

  5. Deploying Ember Apps on Fastly S3 + Redis Deployment Developer

    Amazon S3 Reverse Proxy Browser Pull Push Redis *.js, *.css, ... index. html

  6. Deploying Ember Apps on Fastly • Publish: push fingerprinted assets

    to S3 • Activate: push index.html to Redis • samselikoff/ember-deploy • Merged into ember-cli-deploy • The Art of Ember Deployment ember-deploy

  7. Deploying Ember Apps on Fastly Varnish

  8. Deploying Ember Apps on Fastly vcl_recv — receive and route

    the request vcl_fetch — make request to origin on cache miss vcl_deliver — post-process response before delivery to client vcl_error — handle errors from origin VCL: Flow

  9. Deploying Ember Apps on Fastly • https://www.varnish-cache.org/ • Caching Reverse

    Proxy • Reduce load, increase speed • You need to store your content somewhere else • Fast purges • Varnish Configuration Language (VCL) Varnish

  10. Deploying Ember Apps on Fastly • Publish: push fingerprinted assets

    to S3 • Activate: push index.html to Redis • Use Varnish as reverse proxy S3 + Redis + Varnish Deployment

  11. Deploying Ember Apps on Fastly Routing Requirements https://myapp.com/assets/app.js s3://assets/app.js https://myapp.com/robots.txt

    s3://robots.txt https://myapp.com/billing/ redis://index.html https://myapp.com/ redis://index.html

  12. Deploying Ember Apps on Fastly sub vcl_recv { if (req.http.Accept

    == "text/html") { set req.http.url = "/index.html"; set req.backend = redis; } else { set req.backend = s3; } } VCL: Routing

  13. Deploying Ember Apps on Fastly IE8: image/gif, image/jpeg, image/pjpeg, application/x-ms-application,

    application/vnd.ms-xpsdocument, application/xaml+xml, application/x-ms-xbap, */* VCL: Routing

  14. Deploying Ember Apps on Fastly sub vcl_recv { if (req.http.url

    ~ "^/assets(/|$)" || req.http.url == "/robots.txt" || …) { set req.backend = s3; } else { set req.http.url = "/index.html"; set req.backend = redis; } } VCL: Routing

  15. Deploying Ember Apps on Fastly nginx: try_files try_files $uri 404.html

    # or for a single-page app: try_files $uri /index.html

  16. Deploying Ember Apps on Fastly VCL: try_files sub vcl_error {

    if (resp.status == 404 && !req.http.tried-index-html) { set req.url = "/index.html"; set req.http.tried-index-html = true; return (restart); } }

  17. Deploying Ember Apps on Fastly Purging

  18. Deploying Ember Apps on Fastly S3 + Varnish Deployment Developer

    Amazon S3 Varnish Browser Pull Push index.html, *.js, *.css, ... Purge

  19. Deploying Ember Apps on Fastly • Publish: push everything to

    S3 • Activate: purge index.html S3 + Varnish Deployment

  20. Deploying Ember Apps on Fastly VCL: Synthetics • Responses directly

    from VCL • Really fast • Really really fast on Fastly • Abuses errors for control flow

  21. Deploying Ember Apps on Fastly VCL: Synthetics sub vcl_fetch {

    if (req.http.url == "/index.html") { error 900 "index.html"; } … } sub vcl_error { if (obj.status == 900) { set obj.status = 200; set obj.response = "OK"; synthetic {"<!DOCTYPE html><html>…</html>"}; } … }

  22. Deploying Ember Apps on Fastly Edge Dictionaries (Fastly Varnish)

  23. Deploying Ember Apps on Fastly Before: if (req.http.user-agent ~ "Bot

    1") { error 404 "Bot Detected"; } else if (req.http.user-agent ~ "Bot 2") { error 404 "Bot Detected"; } … Fastly VCL: Edge Dictionaries

  24. Deploying Ember Apps on Fastly After: table bots { "Bot

    1": "true", "Bot 2": "true", … } … if (table.lookup(bots, req.http.User-Agent)) Fastly VCL: Edge Dictionaries

  25. Deploying Ember Apps on Fastly • Can update tables from

    API without uploading new VCL • Update globally in seconds • Limited storage space Fastly VCL: Edge Dictionaries

  26. Deploying Ember Apps on Fastly Deploying on Fastly

  27. Deploying Ember Apps on Fastly table appAssets { "index.html": "<!DOCTYPE

    html><html>…</html>" } Deploying to Fastly

  28. Deploying Ember Apps on Fastly sub vcl_recv { unset req.http.X-App-Content;

    if (req.url.path == "/" || req.url.path == "/index.html") { set req.http.X-App-Content = table.lookup(appAssets, "index.html"); error 900 "index"; } } Deploying to Fastly

  29. Deploying Ember Apps on Fastly sub vcl_error { if (obj.status

    == 900) { set obj.status = 200; set obj.response = "OK"; synthetic X-App-Content; } } Deploying to Fastly

  30. Deploying Ember Apps on Fastly What You’ve Learned Developer GitHub

    Travis CI Google Cloud Storage Fastly Edge Server Browser Fastly API Pull Push *.css, *.js, … index.html

  31. Deploying Ember Apps on Fastly

  32. Deploying Ember Apps on Fastly • https://www.varnish-cache.org/ • https://github.com/samselikoff/ember-deploy •

    https://github.com/ember-cli/ember-cli-deploy • https://www.youtube.com/watch?v=4EDetv_Rw5U • http://blog.testdouble.com/posts/2015-11-03-deploying- ember-to-aws-cloudfront-using-ember-cli-deploy.html • https://docs.fastly.com References