Recently I have been a small part of a team at OptimalBI building a new Angular app. When we approached the point where we wanted to start deploying on AWS I did the standard thing I have always done; create a S3 bucket, setup the bucket for hosting static sites, configure DNS, configure CloudFront, and educate the rest of the team on the deployment process. Then I remembered the buzz around AWS Amplify from last re:Invent and thought why not give it a go? Here is what I found out!

It’s Easy

If you know the AWS console, have an Angular app ready to go in a git repository you might as well go and experiment right now. Just open up the Amplify part of the AWS console and follow the prompts. You will have a functional site up in no time. Go!

What do you need to use AWS Amplify Deploy?

Amplify deploy really only has two major requirements

• An AWS user account with access to the AWS Amplify console
• A supported front-end application that Amplify can deploy, stored in a supported Git repository (GitHub, BitBucket, GitLab, AWS CodeCommit)

Getting Started

The AWS Amplify Console

Best place to start is opening the AWS console to the Amplify page, and click Get Started under Deploy to open the deployment module.

Now we need to select the type of Git provider that is hosting our code from the list of; GitHub, BitBucket, GitLab, AWS CodeCommit. Once we have selected our source Amplify will need to authenticate against this source so that it can retrieve your code.

Amplify can now talk to our Git provider, so we need to select the repository that we are going to deploy from.

Now we are at the stage where we need to define how our application gets built. In this example we are deploying an Angular application. You can see that its figured out that the framework is Angular and provisioned a default build “script” for us. This script worked fine for the application I was deploying, but you might want to change this if there are some files you wish to include/exclude or configuration changes that need to be made.

This is also the section where we can add environment variables if we need to deploy environment specific stuff. Don’t worry if you don’t know what you need, all this can be changed later.

Once we  have finished that we are ready to deploy. Confirm that everything looks correct on the review screen and hit Save and Deploy.

On the next screens you will be able to see the progress of the first deployment of the application, and once its complete be able to visit the result with the given URL.

Have updates to your application? All you need to do is push to the master branch of your git repository and Amplify will automatically handle the rest with no need for any manual intervention. Easy! You can even set up sites for your development branches so that you can test your applications before pushing them live.

Rewrites for Angular

For Single Page Application frameworks like Angular (or anything that uses client side routing) we need to rewrite the URL in the case the user refreshes or uses their browsers back buttons. This can be easily done once the application has successfully deployed, just visit the “Rewrites and redirects” section of the App settings, and add a redirect with the following configuration.

{
     "source": "</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
     "target": "/index.html",
     "status": "200",
     "condition": null
}

This redirects any Angular style urls to the root of the site, unless they have a file type they are requesting specifically.

What's Amplify done then?

So this magic has given you a production ready deployed website, but what has it actually done?
As far as I can tell this provisions an S3 bucket and CloudFront as per the best practices Amazon publish themselves, but unlike many other AWS services that provision services on your account (via CloudFormation generally) these services are hidden from you. This means you have nothing to maintain, and Amplify takes care of everything for you.

Pricing

AWS Amplify Deploy's pricing is very reasonable. For building and deploying it will cost you $0.01 USD per minute. For hosting you have to part with $0.023 per GB stored per month, and $0.15 per GB of traffic on your site.

Drawbacks of Amplify

With all this automation you do lose some of the nice-to-have's from building out these services yourself. One thing I have missed the most is direct access to the CloudFront distribution, creating custom origins, and access to metrics could be very useful for monitoring your site. This is only a small price to pay for the ease of use that Amplify gives.

So as you can see Amplify is so easy its worth having a go right now!

Until next time...
Coffee to Code
Tim Gray