React2AWS Generator
Generate deployment configurations to host your React or Vite application securely on AWS S3 and CloudFront. 100% local, no AWS credentials required.
Project Settings
S3 bucket names must be globally unique across all AWS accounts.
terraform {
required_providers {
aws = {
source = "hashicorp/aws"
version = ">= 5.0"
}
}
}
provider "aws" {
region = "us-east-1"
}
# S3 Bucket for hosting React App
resource "aws_s3_bucket" "hosting_bucket" {
bucket = "my-react-app-hosting-bucket"
}
resource "aws_s3_bucket_ownership_controls" "hosting_bucket_ownership" {
bucket = aws_s3_bucket.hosting_bucket.id
rule {
object_ownership = "BucketOwnerEnforced"
}
}
resource "aws_s3_bucket_public_access_block" "hosting_bucket_public_access" {
bucket = aws_s3_bucket.hosting_bucket.id
block_public_acls = false
block_public_policy = false
ignore_public_acls = false
restrict_public_buckets = false
}
resource "aws_s3_bucket_website_configuration" "hosting_bucket_website" {
bucket = aws_s3_bucket.hosting_bucket.id
index_document {
suffix = "index.html"
}
error_document {
key = "index.html"
}
}
resource "aws_s3_bucket_policy" "allow_public_read" {
bucket = aws_s3_bucket.hosting_bucket.id
policy = jsonencode({
Version = "2012-10-17"
Statement = [
{
Sid = "PublicReadGetObject"
Effect = "Allow"
Principal = "*"
Action = "s3:GetObject"
Resource = "${aws_s3_bucket.hosting_bucket.arn}/*"
},
]
})
depends_on = [aws_s3_bucket_public_access_block.hosting_bucket_public_access]
}
# CloudFront Distribution
locals {
s3_origin_id = "myS3Origin"
}
resource "aws_cloudfront_distribution" "s3_distribution" {
origin {
domain_name = aws_s3_bucket_website_configuration.hosting_bucket_website.website_endpoint
origin_id = local.s3_origin_id
custom_origin_config {
http_port = 80
https_port = 443
origin_protocol_policy = "http-only"
origin_ssl_protocols = ["TLSv1", "TLSv1.1", "TLSv1.2"]
}
}
enabled = true
is_ipv6_enabled = true
default_root_object = "index.html"
default_cache_behavior {
allowed_methods = ["GET", "HEAD"]
cached_methods = ["GET", "HEAD"]
target_origin_id = local.s3_origin_id
forwarded_values {
query_string = false
cookies {
forward = "none"
}
}
viewer_protocol_policy = "redirect-to-https"
min_ttl = 0
default_ttl = 3600
max_ttl = 86400
}
custom_error_response {
error_code = 404
response_code = 200
response_page_path = "/index.html"
error_caching_min_ttl = 10
}
restrictions {
geo_restriction {
restriction_type = "none"
}
}
viewer_certificate {
cloudfront_default_certificate = true
}
tags = {
Environment = "prod"
Project = "my-react-app"
}
}
output "cloudfront_domain" {
value = aws_cloudfront_distribution.s3_distribution.domain_name
}