Deploy Ember With Ember Cli Deploy
Feb 17, 2016
6 minute read

In this post I will be showing you how to configure your Ember JS application for a production environment, how to set up a production environment using Amazon Web Services, and how to deploy your application to your new environment using a single command.

First we wil assume a couple of things.

  • Your application was built using ember-cli
  • You have an Amazon account setup with Amazon Web Services.

Configuring Amazon Web Services

To begin we must first configure Amazon Web Services to host your application. We will not be worrying about hosting a backend using AWS as this post is geared solely towards hosting your Ember app. I will likely cover deploying various types of backend applications to AWS in future posts.

Create S3 buckets to host your application.

We will begin by creating two S3 buckets to host our application. We will be using one bucket to host our applications assets and another to manage our index.html file. The reason for this seperation will become clear as you progress.

Create your two buckets from the AWS Console by navigating to S3 > Create Bucket. For this post I will be naming our index bucket myapp and our assets bucket myapp-assets. The region selection for your buckets does not matter.

Create an IAM user for deploying your application

The ember-cli addon we will be using to deploy our application will need to authenticate with AWS somehow in order to write to the buckets we created. To create an IAM user with the appropriate permissions from within the AWS management console simply navigate to Services > IAM > Create New users and create a user. Ensure you have generate an access key for each user selected. Once created you will be presented with a dropdown titled Show User Security Credentials. Open this dropdown and copy your Access Key ID and Secret Access Key. You will not be able to view your access key after leaving this screen so ensure that you have copied it.

Now that the user has been created you will need to give it write access to the S3 buckets you have created. Click on your new user in the IAM users panel and click on inline policies then follow the on screen options to create a new inline policy. We will be creating a custom policy with the following values:

{
  \"Statement\": [
    {
      \"Action\": \"s3:*\",
      \"Effect\": \"Allow\",
      \"Resource\": [
        \"arn:aws:s3:::myapp\",
        \"arn:aws:s3:::myapp/*\",
        \"arn:aws:s3:::myapp-assets\",
        \"arn:aws:s3:::myapp-assets/*\"
      ]
    }
  ]
}

Be sure to replace the bucket names with the ones you created. This will give the new IAM user access to the S3 buckets we created in the previous step.

Configuring Cloudfront

Next we will need to start serving content from the buckets we created. We will be using Amazon’s Cloudfront service to do this and will be leveraging their content delivery network to quickly serve our application assets. We will be created two Cloudfront distrobutions, one for each of the buckets we created earlier.

Create a new Cloudfront distrobution from within the AWS management console by navigating to Services > Cloudfront > Create Distribution. When given the choice select a delivery method, select Web.

The majority of the settings for each Cloundfront distribution can be left at their default values. There are really only a few settings we need to change.

  • In the Origin Domain Name dropdown, select the endpoint corresponding with your S3 bucket.
  • Default Root Object is not required for the assets distribution, but should be set to index.html for the index distribution.
  • In the Alternate Domain Names (CNAMEs) be sure to include any domain names you will be pointing at this application.

You should now have two Cloudfront distributions created. Following the bucket naming scheme I used above mine would look like this.

Index Distribution
  • Origin Domain Name: myapp.s3.amazonaws.com
  • Default Root Object: index.html
  • Alternate Domain Names: myapp.com
Assets Distribution
  • Origin Domain Name: myapp-assets.s3.amazonaws.com
  • Alternate Domain Names: assets.myapp.com

I will not cover actually pointing your domain name to these Cloudfront distrobutions as this is out of the scope of this tutorial. However, all you need to do is create the appropriate CNAME record for your domain name wherever you are hosting your DNS.

We are finally done setting up AWS and can move on to configuring deployment from ember-cli.

Installing and Configuring ember-cli-deploy and S3 addons

We will first begin by installing a couple of ember-cli addons that will allow us to easily deploy our application. These addons are ember-cli-deploy, ember-cli-deploy-s3, and ember-cli-deploy-s3-index. Use the ember install command to add these addons to your application.

ember install ember-cli-deploy
ember install ember-cli-deploy-s3
ember install ember-cli-deploy-s3-index

We will be using the following command to deploy our application using the ember-cli-deploy addon.

ember deploy <deployTarget>

ember-cli-deploy requires you to create a deploy.js file in your applications config/ directory. This file is used to configure your deployment based on your deployment target. It is a module which exports a function that takes a deploy target as a parameter and returns an environment object with the appropriate deployment settings. If you are confused by this, just know that whatever you specified as your <deployTarget> in the deploy command will be passed into the below method as the deployTarget parameter.

We will be using ‘production’ as the deploy target of our production environment.

module.exports = function(deployTarget){
    var ENV = {};
    if(deployTarget === 'production'){

        // Configure Index Deployment to S3
        ENV['s3-index'] = {
            accessKeyId:      <AWS Access Key ID for IAM user>,
            secretAccessKey:  <AWS Secret Access Key for IAM user>,
            bucket:           <INDEX BUCKET NAME>,
            region:           <INDEX BUCKET REGION>
        };

        // Configure Asset deployment to S3
        ENV['s3'] = {
            accessKeyId:      <AWS Access Key ID for IAM user>,
            secretAccessKey:  <AWS Secret Access Key for IAM user>,
            bucket:           <ASSET BUCKET NAME>,
            region:           <ASSET BUCKET REGION>
        };
    }
    return ENV;
}

Simply replace the access key and secret with the ones you copied earlier for your IAM user and the bucket names and regions with the ones for the buckets you created.

Deploying Your Application

You should now be able to deploy application to AWS using the following command.

ember deploy production

If successful, this command will give you a revision ID. To activate this revision on AWS use the following command with the revision ID provided by the deploy command

ember deploy:activate production --revision=<REVISION ID>

Optionally, you can deploy and activate the deployed revision entirely in one step using the following command.

ember deploy production --activate

Assuming your deployment was successful, your Ember application should now be up and running on Amazon Web Services. As development on your application continues updates can be pushed to your production environment using the above deployment commands.

Using the methods outlined in this guide you can set up multiple environments and deployment targets. This is useful is wish to have a staging environment for testing new features before deploying them to production. If you are looking for more information on using different environment variables, deploy targets, or environments with ember-cli-deploy I recommend reffering to the official documention.