Hosting a static website with SSL in AWS using Terraform

By the end of this tutorial, we’ll have set up the required AWS services for securely hosting a static website.

In our example, we’ll use a simple HTML page to demonstrate the project is working, but the process is exactly the same for a more complicated static site, such as a Vue or React App.

By the end of this project, we’ll be hosting our website on AWS using several different services, below is a little about the roles they’ll play;

AWS S3 is an object storage service. In terms of our project, we’ll be using it to store our website’s production files, an index.html file displaying a Hello World message.

AWS CloudFront is a Content Delivery Network (CDN). The CDN will be responsible for replicating our files from S3 into multiple regions. This lowers the the response time of the website, regardless of the geographical location the user is accessing the site.

AWS Route53 will control the DNS for our website. It handles translating our domain name into a location within the AWS network so that when a user loads your website in their browser it knows where to connect them to.

Terraform is pretty flexible with how you can layout your infrastructure files. The techniques applied in this article will create a Terraform Module, with variables that will allow you to create multiple static websites without re-creating the entire project each time.

We start by creating the file structure we require, then fill out each one below.

The following commands will create the files and directories

The terraform.tf file defines what external providers we’ll be using in this project. In our case we only need the AWS provider.

The main terraform file for our application, where we’ll setup our static sites by including our module and passing in the relevant variables

The inputs.tf file is used for defining the root level variables we need for our project. In our case we only need to define the AWS region we’d like to use for our application.

The files for the static site module will be placed within the modules/static-site directory and will define the components talked about within the introduction section by creating an S3 Bucket for storing the website, give it appropriate permissions & create a CloudFront distribution which will be responsible for serving the content securely to the end user using SSL.

We’re going to use S3 to store the files used in our website. We’ll begin by creating an S3.tf file that will contain any Terraform commands performed against S3. This service by service separation allows us to quickly see what services a module accesses just by looking at the file structure and helps us keep individual files small. Terraform includes all .tf files in the directory so you could use whatever method of sorting you prefer.

Properties for several of these resources are automatically inferred by terraform in one of two ways.

Create an iam.tf file for holding our data source:

This document will provide CloudFront with permission to get objects within the bucket specified within the resources block (in this case the bucket we created earlier).

To generate an SSL certificate for our website we’re going to Amazons certificate service ACM. We’ll then use this certificate to serve https encrypted content via CloudFront. The first step is to create an acm.tf file.

We’ll then define the resources to create our certificate in this file

As we’ve specified DNS validation for our certificate, ACM will requre a CNAME record created for the domain which validates ownership. Fortunately we can automate this process too.

To bring all of this together we’re going to create a CloudFront Distribution. It will be responsible for accepting browser requests for our website and serving the content from our S3 bucket back via a HTTPS encrypted connection.

First create the cloudfront.tf file

We then define resources for our Distribution and the identity it’ll use when accessing other AWS services.

Finally, when a user enters your website address in their browser it performs a series of background operations to translate that domain into a location of where to find the content. To handle our websites DNS we’re going to use Amazons Route53 service to route these requests to our CloudFront distribution.

First create a route53.tf file to hold our resources

Within this file we’ll define resources for a Hosted Zone and within it create records for routing requests to our website and validating the SSL certificate that we created with ACM.

Related posts:

Happy New Moon! If you don’t already know, a New Moon marks new beginnings. What an appropriate day to start a new blog! Today, I celebrated the New Moon with oracle and tarot readings, and some…

It is very difficult to tell what is real and what is fake on social media these days. Fake news is easily spread because sharing on social media sites is so easy and many users tend to not check the…

The point of this post: I believe there are 4 categories of systems for which one can develop mental models and subsystems around in order to make life better, and I’d like to share that with you…