A Step-By-Step Guide To Host a Static Website on AWS S3 using Terraform

In this article, I will explain step by step how to set up a S3 bucket in AWS using terraform code.

To start things off we have to create a s3 bucket in AWS where you will store your state files.

I did this manually by going into AWS, clicking Created bucket and calling it elenas-game-app-terraform. Make sure to give it a globally unique name otherwise, you will get a warning.

Once created you have to give it the right permissions. Click on the permissions section, then click on the edit Bucket policy. Here you will have to update the IAM id, root (if needed) and name of the bucket.

For all my terraform files I decided to create a directory where I will store all of my files, just to keep my code nice and tidy.

mkdir terraform 
cd terraform 
touch providers.tf
touch variables.tf
touch terraform.tfvars
touch s3.tf

providers.tf

In order for Terraform to communicate with the remote system will need to set up some plugins.

This file will also act as the main file for our terraform configuration and we define where the state files will be stored.

The terraform block will define the version of both AWS provider and terraform.

The backend “s3” block will specify where the files are going to be stored. Again make sure you edit the bucket name and region.

I am deploying this from London so my region is eu-west-2, but make sure you are updating that based on your location.

variables.tf

In this file, we will define our variables. For this project, I used only two but you can add more if need it.

terraform.tfvars

Here we have to set a value for our variables. You will have to update them based on your domain.

s3.tf

It’s time to set up our S3 bucket.

The first S3 bucket is where we are going to host all our website files. I would suggest at a minimum, you will need to upload an index.html and a 404.html file in this bucket once created.

You want to ensure the bucket has the proper policy configuration access so external users can access your URL website and your bucket has Public access. This means block_public_policy and block_public_acls have to be updated to false rather than the default value true.

Terraform command

Time to deploy your infrastructure. For this make sure that your computer is set up with the correct AWS credentials and then you are all ready to run the following commands:

This will install your providers:

terraform init

This will create an execution plan which lets you preview the changes that Terraform plans to make to your infrastructure.

terraform plan

It looks something like this:

This command will run our plan and will ask for your confirmation. Just type ‘yes’ than Enter.

terraform apply

Finally, to upload my files in the S3 bucket I wrote a universal deployment script that makes it easy for you to deploy my code and files:

#!/bin/sh

aws s3 cp index.html s3://elenas-game-app
aws s3 cp style.css s3://elenas-game-app
aws s3 cp script.js s3://elenas-game-app
aws s3 cp 404.html s3://elenas-game-app
aws s3 cp images s3://elenas-game-app/images --recursive

When I tried to run this I got this error:

Make sure you give your file the right permissions. If the permission is not set, you can enable it using the chmod command. For example, to make the script executable for the owner, you can run: chmod +x deploy.sh.

Now you can go to your AWS S3 bucket and see your website up and running!

Let me know down below you if found this useful!