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

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