Terraform and S3: Mastering CORS for Seamless Browser Uploads and Deployment Readiness

Ever been blocked at the final hurdle of deployment by something as seemingly simple as a file upload? For the justifai project, preparing for an end-to-end demo revealed a common, yet critical, oversight: S3 Cross-Origin Resource Sharing (CORS) configurations. This often overlooked detail can halt browser-based uploads dead in their tracks, especially when using presigned URLs, leading to frustrating CORS policy errors.

The Silent Blocker: S3 CORS and Presigned URLs

Our application's frontend relies on users directly uploading files to an S3 bucket using presigned PUT URLs, a common pattern for offloading direct file transfer from the backend. While this approach is efficient, it introduces a client-side interaction that is subject to browser security policies, specifically CORS. Without the correct CORS configuration on the S3 bucket itself, the browser will block the PUT request originating from the frontend domain, deeming it a cross-origin security risk. This was precisely the challenge we faced, preventing successful file uploads and blocking critical functionality for the justifai demo.

Terraform to the Rescue: Configuring S3 for Frontend Interactions

The solution involved explicitly defining the CORS rules directly on our S3 bucket using Terraform. This ensures that the S3 service is aware of which origins are allowed to make cross-origin requests and which HTTP methods (PUT, POST, GET, etc.) are permitted. By implementing the aws_s3_bucket_cors_configuration resource, we could whitelist our frontend application's domain and enable the necessary HTTP methods.

Here’s an illustrative example of how such a configuration might look in Terraform:

resource "aws_s3_bucket" "app_storage_bucket" {
  bucket = "my-unique-app-file-storage"
  acl    = "private"
  # ... other bucket configurations ...
}

resource "aws_s3_bucket_cors_configuration" "app_storage_bucket_cors" {
  bucket = aws_s3_bucket.app_storage_bucket.id

  cors_rule {
    allowed_headers = ["*"]
    allowed_methods = ["PUT", "POST", "GET"]
    allowed_origins = ["https://your-frontend.example.com", "http://localhost:3000"]
    expose_headers  = ["ETag"]
    max_age_seconds = 3000
  }
}

This Terraform block creates a cors_rule for my-unique-app-file-storage, explicitly allowing PUT, POST, and GET requests from specified frontend origins (like your production domain and local development server). It also allows all headers and exposes the ETag header, which is often useful for verifying upload integrity. The max_age_seconds instructs browsers to cache the preflight response for a specified duration, improving performance.

The Holistic View: Deployment Readiness with Runbooks

While resolving the S3 CORS issue was a critical technical fix, true deployment readiness extends beyond individual configurations. For justifai, this also meant developing a comprehensive, step-by-step deployment runbook. This PowerShell-based guide covers everything from initial variable setup and terraform apply commands to confirming SNS subscriptions, creating an admin user in Cognito, configuring the frontend environment, and even detailed steps for demoing and tearing down the infrastructure. Such documentation is invaluable for ensuring consistent, repeatable, and troubleshootable deployments, transforming a collection of fixes into a robust deployment strategy.

Generated with Gitvlg.com