Skip to content

Latest commit

 

History

History
70 lines (52 loc) · 5.22 KB

infra_heroku_fastly_setup.md

File metadata and controls

70 lines (52 loc) · 5.22 KB
Raw

Heroku + Fastly setup for ember apps

This is a reference on how to setup a new ember app in our infrastructure.

Important consideration & Website repo configuration

If the ember app is going to exist in a subpath of https://emberjs.com, e.g., https://emberjs.com/api then the term api is going to be important for us in multiple aspects. Let us use this subpath in this guide to understand more,

  • Ensure there are no files/folders in the emberjs website source named api. If it does exist, delete them in the branch that introduces the proxy changes for the new app. This is required since heroku static buildpack will serve the local files if they exist before considering the proxy routes.

  • In the static.json add an entry under the proxies section as shown below. Its important not to hardcode the value here. This enables us to use staging urls of this app with the staging app of website on heroku. This variable is configured via settings tab of the website app by clicking on the Reveal Config Vars button. The key in this case would be EMBER_API_DOCS_URL and the value would be the fastly url of the ember app. You also need to configure this variable in the app.json (see the link for reference).

//static.json
{
    "proxies": {
        "/api": {
          "origin": "${EMBER_API_DOCS_URL}"
        },
    }
}

Ember app requirements

  • Create a file with the name Procfile with the content below. This enables heroku to run purge on our fastly cache on post build but just before deployment during its release phase . In this script FASTLY_PURGE_KEY is the api token of any of the admins of our fastly account. If you're one of our fastly admin, you can create one under the personal API tokens page. FASTLY_SERVICE_ID is the service id of our app on fastly. You can find it by following these instructions
release: npm i -g fastly-cli && fastly purge-all -k $FASTLY_PURGE_KEY -s $FASTLY_SERVICE_ID
  • In the config/environment.js file, after rootURL add two new fields routerRootUrl with value / and apiHost with value ''. Override their values for production as shown in this reference.
  • In router.js change rootURL: config.rootURL to rootURL: config.routerRootURL. This ensures internal links & redirection works as expected.
  • If your app fetches any static content from within the app then make sure you set the host field of your ember data adapter with the apiHost from config. Follow the same if you have fetch/ajax calls with relative urls. In case the app uses prember then configure the host name as shown in deprecation app's application adapter.
  • In your ember-cli-build.js set the fingerprint prepend value with the cdn url. See deprecation-app/ember-cli-build.js for reference.
  • Configure your config/deploy.js file's production target as shown in this reference

Fastly configuration

  • Go to https://manage.fastly.com/services/all, click on CREATE SERVICE. Fill in details as shown in the screenshot below. Note that there's a naming convention to follow depending on the app name in heroku. The url we enter in the domain field will be the FASTLY_DOMAIN variable's value in heroku. service creation

  • Once created, you'll see the following page. service created

  • Click on CONFIGURATION dropdown and click on clone active. On the left nav, click Content. Under Headers section click on CREATE YOUR FIRST HEADER. Set the exact content from the screenshot below & save it. header setup

  • On the same page click on SET UP GZIP and click CREATE.

  • Once these are done, click on the ACTIVATE button to activate the new changes.