Easily Deploy Static Site with Terraform, CloudFront, and S3

Terraform

Use this Terraform Module to configure the Frontend (e.g react) of your application in a consistent and scalable way. It also makes it easy to deploy the Frontend to different environments, such as production and staging.

module "frontend" {
  source   = "khimananda/frontend/aws"

# make bucket_name name should be globally unique  
  bucket_name =  "example.com-bucket"  
  domain      = "example.com" 
  alias       = ["www.example.com"]
  certificate = "arn:aws:acm:us-east-1:<account-id>:certificate/ACM-ID"
}

output "distribution_id" {
  value = module.frontend.distribution_id
  description = "Cloudfront Distribution ID"
}

output "distribution_domain" {
  value = module.frontend.distribution_domain
  description = "Cloudfront Distribution domain"
}

Here is a brief explanation of each attribute:

• source: The source of the module, which in this case is a GitHub repository.
• bucket_name: The name of the S3 bucket that will be used to store the frontend assets. It will create new bucket, Make sure Bucket name is unique globally.

Bucket policy on the S3 is applied, Ensuring CloudFront-Only Access:

• domain: The domain name that will be used to access the frontend.
• alias: A list of domain aliases that will be used in Cloudfront distribution.
• certificate: The ARN of the ACM certificate that will be used to secure the frontend. this certificate will be attached to the Cloudfront distribution.

Finally, Upload your static build files to the root of s3 bucket.

The output "distribution_domain" block code defines an output that will be used to return the domain name of the Cloudfront distribution that is created by the module "frontend" block, Use this output as a value to your Domain CNAME record.

I hope this helps! Let me know if you have any other questions.