Deploying Ember to AWS Cheat Sheet

Today I set up my second Ember deployment to AWS. What follows is the consolidated recipe that comes from following the combination of my last two posts:

S3 Setup

Create Bucket

  1. Open the AWS S3 Console
  2. Click Create a Bucket
  3. Set the Bucket Name; I’ve set mine to match the app subdomain I am using: app.[appdomain].com
  4. Select a Region close to the app’s expected users (for me, this is US Standard)
  5. Click Create

Edit Bucket Permissions

  1. Select the app.[appdomain].com bucket, click Properties, click Permissions, and click Add bucket policy

  2. Copy and paste the following policy into the Bucket Policy Editor (change app.[appdomain].com to match the name of the bucket):

    {
  "Version":"2012-10-17",
  "Statement": [{
    "Sid": "Allow Public Access to All Objects",
    "Effect": "Allow",
    "Principal": "*",
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::app.[appdomain].com/*"
  }]
}
  3. Click Save

Enable Static Site Hosting and Routing Rules

  1. Within the bucket Properties, click Static Website Hosting
  2. Click Enable Website Hosting
  3. Set Index Document to index.html
  4. Click Save

Make note of the app.[appdomain].com.s3-website-us-east-1.amazonaws.com endpoint displayed uther the Static Website Hosting settings. It will be needed later for CloudFront.

Create SSL Certificate

  1. Open the AWS Certificate Manager Console
  2. Click Get started if no certificates exist or Request a certificate if there are existing certificates
  3. Under Domain name, enter the application subdomain app.[appdomain].com that will be used
  4. Click Review and request
  5. Review the domain name, then click Confirm and request
  6. Check the email address associated with the domain registration for a certificate approval email; in the email, click the link to Amazon Certificate Approvals
  7. On the approval page, click I Approve

CloudFront Setup

Create Distribution

  1. Open the AWS CloudFront Console
  2. Under Web, click Get Started
  3. Fill Origin Domain Name with the S3 Hosting Endpoint (NOT the name of the bucket) app.[appdomain].com.s3-website-us-east-1.amazonaws.com
  4. Set Viewer Protocol Policy to Redirect HTTP to HTTPS
  5. Set Forward Query Strings to Yes (if the app uses query params)
  6. In Alternate Domain Names (CNAMEs), enter the app.[appdomain].com custom domain that I want to use
  7. Under SSL Certificate, choose Custom SSL Certificate (example.com)
  8. In the dropdown, select the ACM certificate for app.[appdomain].com
  9. Set Default Root Object to index.html
  10. Click Create Distribution

Add CloudFront custom error response

This will handle requests for other routes within the Ember application without using a hash-based redirect.

  1. Open the AWS CloudFront Console
  2. Click on the [Distribution ID]
  3. Click the Error Pages tab
  4. Click Create Custom Error Response
  5. Set HTTP Error Code to 404: Not Found
  6. Under Customize Error Response, click Yes
  7. Set Response Page Path to /index.html
  8. Set HTTP Response Code to 200: OK
  9. Click Create

Domain DNS

  1. Open the domain’s DNS settings (mine are managed on DNSimple)
  2. Create a CNAME record that sets app.[appdomain].com as an alias for the CloudFront distribution at [cloudfrontcode].cloudfront.net

AWS Access Key Setup

  1. Open the AWS IAM Console
  2. Click Users, then click Create New Users
  3. In box 1, type a name for the user (I used the name of my Ember app), then click Create

  4. Click Show User Credentials and copy the Access Key ID and Secret Access Key into a file named .env.deploy.production in the root of the ember-cli app:

    AWS_KEY=[Access Key ID]
AWS_SECRET=[Secret Access Key]
PRODUCTION_BUCKET=[AWS Bucket]
PRODUCTION_REGION=[AWS Region]
PRODUCTION_DISTRIBUTION=[CloudFront Distribution ID]
  5. Click close (and again to confirm) to return to the list of users
  6. Click on the new user, click the Permissions tab, and click Attach Policy
  7. Select the policies named AmazonS3FullAccess and CloudFrontFullAccess
  8. Click Attach Policy

ember-cli-deploy Setup

  1. Install ember-cli-deploy and the plugin pack

    $ ember install ember-cli-deploy
$ ember install ember-cli-deploy-aws-pack

  2. Deploy Ember application

    $ ember deploy production