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

Deploying Ember with Varnish

James Alexander Rosen
November 10, 2015
Programming
0
220

Deploying Ember with Varnish

How Fastly uses Varnish to deploy single-page applications

James Alexander Rosen

November 10, 2015
Tweet

More Decks by James Alexander Rosen

See All by James Alexander Rosen
Making Design-by-Committee Work
jamesarosen
1
120
Empathetic Experiences
jamesarosen
0
230

Other Decks in Programming

See All in Programming
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
110
PSR-15 はあなたのための ものではない？ - phpcon2024
myamagishi
0
130
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1k
テストコード書いてみませんか？
onopon
2
110
42 best practices for Symfony, a decade later
tucksaun
1
180
Refactor your code - refactor yourself
xosofox
1
260
nekko cloudにおけるProxmox VE利用事例
irumaru
3
430
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
140
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
Jakarta EE meets AI
ivargrimstad
0
250
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
420

Featured

See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Docker and Python
trallard
42
3.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
The Language of Interfaces
destraynor
154
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
Building Adaptive Systems
keathley
38
2.3k
Writing Fast Ruby
sferik
628
61k
Navigating Team Friction
lara
183
15k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Site-Speed That Sticks
csswizardry
2
190
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
How GitHub (no longer) Works
holman
311
140k

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