Cloudfront

In this section, you'll learn how to set up your frontend infrastructure using an S3 bucket to store your web application's static files and CloudFront to deliver them securely and efficiently to users around the world.

Step 1: Create a Unique Identifier

The first step is to generate a unique identifier for naming your S3 bucket. This ensures that your bucket name is unique across all of AWS.

resource "random_id" "example" {
  byte_length = 4
  prefix      = "tf-example-"
}

What This Does:

• Generates a Random ID: The random_id resource creates a unique ID with a specific prefix (tf-example-). This ID will be used to name your S3 bucket.

Step 2: Create an S3 Bucket

Now, let's create an S3 bucket using the unique identifier we generated.

resource "aws_s3_bucket" "this" {
  bucket = "apps-${random_id.example.hex}"
}

What This Does:

• Creates an S3 Bucket: The aws_s3_bucket resource creates a new S3 bucket with a unique name, combining a fixed prefix (apps-) with the random ID we generated earlier.

Step 3: Secure the S3 Bucket

It's important to secure your S3 bucket to prevent unauthorized access. We'll do this by blocking public access to the bucket.

resource "aws_s3_bucket_public_access_block" "this" {
  bucket = aws_s3_bucket.this.id

  block_public_acls       = true
  block_public_policy     = true
  ignore_public_acls      = true
  restrict_public_buckets = true
}

What This Does:

• Blocks Public Access: The aws_s3_bucket_public_access_block resource secures the S3 bucket by blocking any public access. This ensures that your files are only accessible through CloudFront or other controlled means.

Step 4: Set Up CloudFront Distribution

Next, you'll set up a CloudFront distribution that will serve your content stored in the S3 bucket to users globally with low latency.

module "cloudfront_app" {
  source = "../modules/cloudfront-app"

  context = {
    namespace = "example"
    stage     = "dev"
    name      = "app"
  }
  app_id          = "example" # this is app folder in s3 so it becomes /apps/example  
  s3_bucket       = aws_s3_bucket.this.bucket
  aliases         = [] # if you need custom domain put it here
  certificate_arn = ""
}

What This Does:

• Deploys CloudFront: The cloudfront_app module creates a CloudFront distribution that points to your S3 bucket. It handles requests from users and serves the files stored in the bucket.

Step 5: Set Up Deployment Policies

Now, you'll configure deployment policies to manage how your content is delivered and updated.

module "cloudfront_deployment_policy" {
  source = "../modules/cloudfront-deployment-policy"

  s3_bucket_arn   = aws_s3_bucket.this.arn
  cloudfront_arns = [module.cloudfront_app.arn]
  s3_origin_arns  = [module.cloudfront_app.s3_origin_arn]
}

What This Does:

• Manages Deployment: The cloudfront_deployment_policy module sets up policies for deploying your CloudFront distribution and managing the content in your S3 bucket.

Step 6: Configure Bucket Policy for CloudFront Access

Finally, you need to set up the S3 bucket policy to allow CloudFront to access the content stored in the bucket.

module "cloudfront_bucket_policy" {
  source = "../modules/cloudfront-s3-origin-bucket-policy"

  s3_bucket       = aws_s3_bucket.this.bucket
  cloudfront_arns = [module.cloudfront_app.arn]
}

What This Does:

• Allows CloudFront Access: The cloudfront_bucket_policy module configures the S3 bucket policy to grant the CloudFront distribution access to the content, ensuring that your files can be served to users.

Connection Summary

1. Generate a Random ID: Create a unique identifier to ensure your S3 bucket name is unique.
2. Create an S3 Bucket: Set up an S3 bucket with the generated unique name to store your static files.
3. Secure the S3 Bucket: Block public access to the S3 bucket to ensure all content is served securely via CloudFront.
4. Deploy CloudFront Distribution: Set up CloudFront to deliver your web application files to users around the world.
5. Manage Deployment Policies: Configure policies to manage how CloudFront delivers and updates content from your S3 bucket.
6. Configure Bucket Policy: Ensure that CloudFront has the necessary permissions to access and serve content from your S3 bucket.

This setup provides a secure and scalable way to deliver your web application's static content to users, leveraging the power of S3 and CloudFront.