此工具会帮我部署代码吗？

不会，它只生成配置文件。您必须通过自己的 AWS 账户运行它们。

推荐的方法是什么？

Terraform 是长期基础设施管理的理想选择，而 GitHub Actions 则非常适合自动化部署。

此模板是否可用于生产环境？

是的，模板遵循 AWS 关于 S3 静态托管和 CloudFront CDN 分发的最佳实践。

React2AWS 生成器

生成用于在 AWS S3 和 CloudFront 上托管 React 应用程序的基础设施模板。

项目设置

应用名称

S3 存储桶名称

S3 存储桶名称必须在全球范围内唯一。

AWS 区域

环境标签

TERRAFORM Template

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-production"
}

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 = "production"
    Project     = "my-react-app"
  }
}

output "cloudfront_domain" {
  value = aws_cloudfront_distribution.s3_distribution.domain_name
}

如何使用S3和CloudFront将React部署到AWS

在几秒钟内为您的 React 项目生成专业的云基础设施模板。

配置项目

输入您的应用名称、首选 S3 存储桶名称和 AWS 区域。

选择工具

在 Terraform (IaC)、AWS CLI (脚本) 或 GitHub Actions (CI/CD) 之间进行选择。

生成

代码会随着您的配置自动更新。

复制并使用

复制生成的代码并将其粘贴到您的项目文件中。

常见问题

仅供您查看

您的隐私是我们的首要任务。我们在本地处理一切，以确保您的敏感数据永远不会被泄露。

支持该项目

请我喝杯咖啡

React2AWS 生成器

项目设置

如何使用S3和CloudFront将React部署到AWS

配置项目

选择工具

生成

复制并使用

相关博客文章

如何将 React 应用部署到 AWS S3 和 CloudFront：2026 最终指南

使用 React2AWS 实现基础设施即代码 (IaC)：在 2026 年自动化您的云端

在 AWS 上优化 React 托管成本：2026 年省钱指南

常见问题

相关工具

JSON 格式化

语法转换器

富文本转HTML

人人可用

简洁清爽

极速体验

仅供您查看

支持该项目