Deploying a Static HTTPS Website to AWS S3 Using Terraform & GitHub Actions — Part 1

This is a 3-parter series structured as follows:

- Part 1: Adding an S3 bucket and static website hosting on AWS using terraform.

- Part 2: Adding GitHub Actions to your repository to automatically build and push to hosted S3

- Part 3: Adding SSL config & Domain to your Static website using AWS tools & Terraform

Prerequisites

Install Terraform: Ensure that Terraform is installed on your local machine. You can download it from the Terraform website: https://developer.hashicorp.com/terraform/tutorials/aws-get-started/install-cli

AWS CLI: Install and configure the AWS CLI with your credentials. Follow the AWS CLI installation guide.: https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html

Static Website Files: Prepare the static files (HTML, CSS, JavaScript, images, etc.) that you want to host on S3.

AWS Setup with Terraform

Set Up AWS Credentials: Configure your AWS CLI with the AWS configure command and provide your AWS Access Key, Secret Key, region, and output format.

Create a Key Pair: Generate an SSH key pair to access your EC2 instance. Use the following command:

ssh-keygen -t rsa -b 2048 -f ~/.ssh/aws -N ""

This will create a public key file

(~/.ssh/aws.pub) and a private key file (~/.ssh/aws).

Create a Terraform Directory: Create a directory for your Terraform files and navigate into it:

mkdir terraform-deploy

cd terraform-deploy

Static Website Code: Place your static website files in the following directory structure:

<terraform-dir>/website/index.html
<terraform-dir>/website/styles.css
<terraform-dir>/website/script.js

Terraform Configuration Files

main.tf: This file contains the main configuration for deploying an EC2 instance.

provider "aws" {
  region = var.aws_region
}
resource "aws_s3_bucket" "static_website" {
  bucket = var.bucket_name
  acl = "public-read"
  website {
    index_document = "index.html"
    error_document = "error.html"
  }
}
resource "aws_s3_bucket_object" "website_files" {
  for_each = fileset("${path.module}/website", "**")
  bucket = aws_s3_bucket.static_website.bucket
  key = each.value
  source = "${path.module}/website/${each.value}"
  acl = "public-read"
}
output "website_url" {
  value = aws_s3_bucket.static_website.website_endpoint
}

1. variables.tf: This file defines the variables used in the Terraform configuration.’

variable "aws_region" {
  description = "The AWS region to deploy to"
  default = "us-east-1"
}
variable "bucket_name" {
  description = "The name of the S3 bucket"
  default = "my-static-website-bucket"
}

1. outputs.tf: This file outputs the public IP address of the EC2 instance.

output "website_url" {
  description = "The URL of the static website"
  value = aws_s3_bucket.static_website.website_endpoint
}

Deploying with Terraform

Initialize Terraform: Run the following command to initialize Terraform. This will download the necessary providers and set up the environment.
terraform init

Plan the Deployment: Create an execution plan to ensure everything is configured correctly.
terraform plan

Apply the Deployment: Apply the configuration to deploy the resources to AWS.
terraform apply

Retrieve the Website URL: Once the deployment is complete, you can retrieve the URL of the static website.
terraform output website_url

Access Your Static Website: Use the provided URL to access your static website hosted on AWS S3.

Conclusion

By following these steps, you can deploy your static website to AWS S3 using Terraform. This setup ensures that your website is hosted on a scalable and cost-effective platform, leveraging the infrastructure as code approach to manage your deployment.

Feel free to customize the provided Terraform configuration files according to your specific requirements. Happy deploying!

ABOUT AISQUARE

AISquare is an innovative platform designed to gamify the learning process for developers. Leveraging an advanced AI system, AISquare generates and provides access to millions, potentially billions, of questions across multiple domains. By incorporating elements of competition and skill recognition, AISquare not only makes learning engaging but also helps developers demonstrate their expertise in a measurable way. The platform is backed by the Dynamic Coalition on Gaming for Purpose (DC-G4P), which is recognized by the United Nations Internet Governance Forum Secretariat, which actively works on gamifying learning and exploring the potential uses of gaming across various sectors. Together, AISquare and DC-G4P are dedicated to creating games with a purpose, driving continuous growth and development in the tech industry.

You can reach us at LinkedIn, X, Instagram, Discord.

Author - Jatin Saini