Deploying Ember with Varnish

Deploying Ember Apps on Fastly Deploying Ember Apps on Fastly
James A Rosen

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

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, …

Deploying Ember Apps on Fastly Lightning Deployment

Deploying Ember Apps on Fastly S3 + Redis Deployment Developer
Amazon S3 Reverse Proxy Browser Pull Push Redis *.js, *.css, ... index. html

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

Deploying Ember Apps on Fastly Varnish

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

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

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

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

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

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

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

Deploying Ember Apps on Fastly nginx: try_files try_files $uri 404.html
# or for a single-page app: try_files $uri /index.html

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); } }

Deploying Ember Apps on Fastly Purging

Deploying Ember Apps on Fastly S3 + Varnish Deployment Developer
Amazon S3 Varnish Browser Pull Push index.html, *.js, *.css, ... Purge

Deploying Ember Apps on Fastly • Publish: push everything to
S3 • Activate: purge index.html S3 + Varnish Deployment

Deploying Ember Apps on Fastly VCL: Synthetics • Responses directly
from VCL • Really fast • Really really fast on Fastly • Abuses errors for control flow

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>"}; } … }

Deploying Ember Apps on Fastly Edge Dictionaries (Fastly Varnish)

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

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

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

Deploying Ember Apps on Fastly Deploying on Fastly

Deploying Ember Apps on Fastly table appAssets { "index.html": "<!DOCTYPE
html><html>…</html>" } Deploying to Fastly

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

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

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

Deploying Ember Apps on Fastly

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

Deploying Ember with Varnish

Deploying Ember with Varnish

James Alexander Rosen

More Decks by James Alexander Rosen

Other Decks in Programming

Featured

Transcript

Deploying Ember Apps on Fastly Deploying Ember Apps on Fastly

Deploying Ember Apps on Fastly • Lightning Deployment • Just

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

Deploying Ember Apps on Fastly Lightning Deployment

Deploying Ember Apps on Fastly S3 + Redis Deployment Developer

Deploying Ember Apps on Fastly • Publish: push fingerprinted assets

Deploying Ember Apps on Fastly Varnish

Deploying Ember Apps on Fastly vcl_recv — receive and route

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

Deploying Ember Apps on Fastly • Publish: push fingerprinted assets

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

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

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

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

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

Deploying Ember Apps on Fastly VCL: try_files sub vcl_error {

Deploying Ember Apps on Fastly Purging

Deploying Ember Apps on Fastly S3 + Varnish Deployment Developer

Deploying Ember Apps on Fastly • Publish: push everything to

Deploying Ember Apps on Fastly VCL: Synthetics • Responses directly

Deploying Ember Apps on Fastly VCL: Synthetics sub vcl_fetch {

Deploying Ember Apps on Fastly Edge Dictionaries (Fastly Varnish)

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

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

Deploying Ember Apps on Fastly • Can update tables from

Deploying Ember Apps on Fastly Deploying on Fastly

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

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

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

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

Deploying Ember Apps on Fastly

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