Generador React2AWS
Genera plantillas de infraestructura (Terraform, CLI, GitHub Actions) para alojar apps React en AWS S3 y CloudFront.
Ajustes del Proyecto
Los nombres de los buckets S3 deben ser globalmente únicos en todas las cuentas de AWS.
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
}
Cómo desplegar React en AWS usando S3 y CloudFront
Genera plantillas de infraestructura cloud profesionales para tus proyectos React en segundos.
1
Configurar Proyecto
Introduce el nombre de tu App, el nombre del Bucket S3 preferido y la Región de AWS.
2
Elegir Herramienta
Elige entre Terraform (IaC), AWS CLI (Script) o GitHub Actions (CI/CD).
3
Generar
El código se actualiza automáticamente a medida que escribes tu configuración.
4
Copiar y Usar
Copia el código generado y pégalo en los archivos de tu proyecto.
Preguntas Frecuentes
100% Local Processing
Remember: your files are processed in your browser and never leave your device. We prioritize your privacy and security above all else.