This is a tutorial on hosting a static website on Amazon S3 and Cloudfront. I made this based on an Angular 6 frontend but this write up can also be used as a guide for other frameworks like React or Vue.js. This tutorial also assumes that you already have an Amazon AWS account and domain name through Google Domains or Amazon Route 53. I use Google Domains as a registrar but I will also cover using Amazon Route 53.
Hosting a static SPA on AWS is a pretty straightforward process. This guide will cover:
- Creating and configuring an S3 bucket for a Single-Page Application (SPA)
- Uploading an application to an Amazon S3 bucket
- Creating and configuring a Cloudfront Distribution
- Configuring Google Domains OR Amazon Route 53
To create an S3 Bucket, log in to your aws account at https://console.aws.amazon.com/console/home. In the second row of services, click S3, then click Create Bucket. A form should appear to configure your S3 bucket. For the bucket name, it is important that you enter www.your-website-name.com. For the region, it is auto-selected based on your current location and that's fine for the purpose of this tutorial, but you are free to select any region you like. Click create. Next, click on the Permissions tab and select Bucket Policy. Copy and paste the following code to edit the bucket permissions and allow access from the outside.
{
"Version": "2008-10-17",
"Statement": [
{
"Sid": "AllowPublicRead",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::www.your-website.com/*"
}
]
}
Next, Select the Properties tab and select Static Web Hosting. To delegate routing to our application and not the server, you will need to set the index and error pages to the same index.html document. Click save and you're good to go on the S3 configuration.
Next, you will need to build your SPA and upload the distribution files in the output of that build. For a plain Angular 6 application you will need to open a terminal window, navigate to your project folder, and run the ng build command:
ng build --prod
The ng build command is an angular 6 command that will bundle, minify and uglify your code as well as remove dead code and optimize it. The ng build command will output a dist folder to your project. To upload these contents to your S3 bucket, go back to Amazon S3 and click on the bucket you created. Then click the blue upload button and navigate to the dist folder and upload all of the files inside of the dist folder.
To create a cloudfront distribution, log into CloudFront at https://console.aws.amazon.com/cloudfront/home. Under the Storage and Content Delivery section, click create distribution. On the next page under the Web section, click get started. The next page should be a really long form where you can configure your distribution. For our purposes most of the fields can be left with their default values but we will change a few of them. The first one to change is the Origin Domain name. Go back to your S3 Bucket, find the endpoint URL in the Static Website Hosting section of the properties, and paste that into the Origin Default Name field. You will need to remove the http:// from the front of that endpoint url. Now your Origin Doman Name field should look something like www.your-website-name.com.s3-website-us-east-1.amazonaws.com. Next, scroll all the way down to Compress Objects Automatically and click yes. Below that, there's a field called Alternate Domain Names. Put the name of the S3 bucket you're using (www.your-website-name.com). Finally, scroll down to the bottom of the form, find the Default Root Object field, and type in index.html, then click Create Distribution. AWS will start creating your CloudFront distribution. You should notice the Status section of your distribution says In Progress. For me it took around 15 minutes to complete. Your site will not be accessible until the status says Deployed.