How To Host Angular Apps on AWS S3 and CloudFront

Almost every company and many people without a legal business entity would like to setup a web site for some reason or another. Some only need a static website for informational purposes, such as listing their business address, contact information and services and/or products they offer. Others need a dynamic website that can constantly be updated with new data by people other than those who setup the website. One easy and robust way to setup a simple Angular website that is robust and scales well is to serve it on AWS (Amazon Web Services) S3 and AWS CloudFront.

Intro To AWS S3

AWS S3 is an object storage service offered from Amazon Web Services where you can create “buckets” where you can store almost all types of files in many different regions around the world. You can store Terabytes or more of almost any kind of data. You only pay for the amount of storage you use (you get 5GB free and only pay for the storage above that free tier.) Check out full pricing for AWS S3 here

Intro To AWS CloudFront

AWS CloudFront is a globally distributed caching service that can take the data in an AWS S3 bucket and push it to edge locations around the world so the requests to the content are much quicker for the end users. This is because the request will be routed to the nearest edge location to the user. This is a great use for static websites that would like to see great performance load times for their static website.

Creating an Angular 7 Application

Install the Angular CLI via npm : npm install -g @angular/cli
Create a new Angular application: ng new {project-name}
Run the build command to get a version of the app suitable to deploy to AWS S3: ng build
– This will create a directory named dist with all the resources to be deployed within this directory

That is all that is needed on the Angular side to try out deploying a static website to AWS S3

Setting Up AWS S3

Login to Amazon Web Services
Create an AWS S3 bucket to hold your static website resources such as HTML, CSS, JavaScript, and image files
Click on the bucket you just created and then click the Properties tab
– Choose Use this bucket to host a website
– For both Index Document and Error Document put index.html for the value
– Click Save
Now click on the Permissions tab then Bucket Policy
– Insert the following for the bucket policy (make sure to replace {bucket-name} with the actual bucket name you created). This will allow public access to the contents of your bucket, which is what you want if hosting a website in S3

{
 “Version”: “2012–10–17”,
 “Statement”: [
   {
     “Sid”: “PublicReadGetObject”,
     “Effect”: “Allow”,
     “Principal”: “*”,
     “Action”: “s3:GetObject”,
     “Resource”: “arn:aws:s3:::{bucket-name}/*”
   }
 ]
}

NOTE: I normally also add the default AES-256 encryption for all of my AWS S3 buckets. It does not interfere with the hosting of a website and thus, definitely recommended unless you wish to use KMS which is perfectly fine as well and probably better, although more expensive by far). It can be found under Properties > Default Encryption for your bucket

Your AWS S3 bucket should now be ready to host a static website! Now let’s move onto the other pieces of the setup.

AWS S3 And CloudFormation Setup

Upload contents to your S3 bucket

Login to Amazon Web Services
Go to AWS S3 in the AWS Console
Upload your files and folders to your AWS S3 bucket (Do not include the dist/ parent directory, just the contents inside it)

Verify you can view your static website by visiting your bucket’s public URL

Go to AWS S3 and click on the S3 bucket hosting your website
Click on the Properties tab and then Static Web Hosting
Click on the Endpoint url specified at the top of that section to verify if your website is setup

Create an AWS CloudFront distribution

Navigate to AWS CloudFront via the AWS Console
Click on Create Distribution
Under Web click Get Started
For Origin Domain Name choose the S3 bucket you specified to host your website
For Viewer Protocol Policy the best option is Redirect HTTP to HTTPSalthough any will work, but normally its better to redirect users to HTTPS if they try to hit the HTTP endpoint
Under Distribution Settings choose where all you wish to have your static content distributed to. For now, US, Canada, and Europe will work fine. (The more locations its sent to, the more expensive it will be)
If you already have a domain name you wish to use for this website, enter the domain name for Alternate Domain Names (CNAMEs) field
Enter index.html for Default Root Object
Click Create Distribution button and wait for the listing to show Enabled for State (this normally takes a little while as it pushes all the content to all the edge locations)
You can now check that the distribution is live by visiting the URL listed under Domain Name for your distribution

Customizing Domain Name

If you have a custom domain name you want to use with your CloudFront distribution, you need to setup a few things in AWS Route 53
Navigate to AWS Route 53 via the AWS Console
Click on Hosted Zones then Create Hosted Zone
Enter your domain name and choose Public Hosted Zone
Click on the hosted zone you just created
Make sure the Name Servers are correct based on where you registered your domain name at. Either create or edit to use the name server provided by your domain registrar
Create a new Record Set and choose A — IPv4 Address for Type
Choose Yes for Alias then select your CloudFront Distribution from the list
Click Create
Wait a few minutes for the DNS changes to propagate and try visiting your website using your custom domain name