Static Website Deployment with Terraform/Terragrunt for AWS S3 and Cloudflare Integration

Terraform and Terragrunt configurations tailored for deploying static websites seamlessly on AWS S3 while leveraging Cloudflare for DNS management and SSL/TLS encryption.

Visit GitHub Repository Here

Prerequisites

  • An AWS account with access to S3 | Sign up or log in here

  • A Cloudflare account and a configured domain | Sign up or manage your domains here

  • Git, for cloning the repository | Download it here.

  • Terraform (version >= 0.12) | Installation instructions are available here

  • Terragrunt, for simplified Terraform workflow | Learn how to install it here

  • A shell environment like PowerShell for Windows users or Bash for Linux/macOS users

Before starting, ensure you have the following:

Directory Structure


Each .tf file contains Terraform configurations for setting up different parts of the infrastructure. The terragrunt.hcl files are used to apply the configurations with Terragrunt.

Initial Setup

Clone the Repository


This will create a directory named terraform-s3-static-website in your current working directory.

Acquiring Environment Variables

You will need to set the following environment variables in your shell:


The variables can be attained by following the steps below

AWS IAM User Setup

It is important to create an IAM user rather than using your AWS account's root user

  1. Login to AWS Console: Go to the AWS Management Console and log in.

  2. Navigate to IAM: Search for and select IAM. Go to "Users" ā†’ "Create User".

  3. Create User: Provide a username and proceed.

  4. Assign Permissions: Assign the "AdministratorAccess" policy for full AWS account management capabilities.

  5. Finalize User Creation: Click "Next" and "Create User".

  6. Generate Access Keys:

    • After creation, find the user under "Users".

    • Select "Security credentials" tab.

    • Under "Access keys", click "Create access key".

    • Choose the "CLI" option and confirm.

  7. Securely Store Keys: Save the Access Key ID and Secret Access Key securely.

Cloudflare Setup for API Token and Zone ID

  1. Log In to Cloudflare: Open the Cloudflare dashboard and sign in.

  2. Create API Token: Go to Account > My Profile > API Tokens > Create Token > Create Custom Token.

  3. Name Your Token: Enter a name for the token, such as "Edit Zone".

  4. Configure Permissions: Set the following permissions for the token:

    • Zone: Zone Settings - Edit

    • Zone: Zone - Read

    • Zone: Page Rules - Edit

    • Zone: DNS - Edit
      Each permission should be applied to the "Zone" level for precise control.

  5. Create Token: Click the button to create your token.

  6. Securely Store Token: Save the Cloudflare token securely.

  7. Obtain Zone ID:

    • Select the relevant domain from the dashboard.

    • Click on the Overview tab.

    • Locate the Zone ID in the API section on the right-hand panel.

    • Record the Zone ID securely.

Environment Variables

Setting Environment Variables

Environment variables can be set in the terminal using $env: for PowerShell (Windows) or export for Bash (Linux/macOS).

Replace the placeholder text with your actual credentials.

The AWS_BUCKET_NAME should match the domain name configured in Cloudflare, excluding 'www' or any other subdomains. e.g. example.com

PowerShell (Windows):


Bash (Linux/macOS):


Website Deployment

Prepare Static Files

Place all your static website files into the website folder located at AWS/S3/website. This is where Terraform will look for files to upload to the S3 bucket.

Initialize & Apply Configuration

In the root directory, initialize and apply the configuration


Once the configuration has been applied the live website can be viewed on your domain name.

To remove all deployed resources:

 

Ā© 2024 Adam Murray