React2AWS 生成器
生成基础设施模板,以便在 AWS S3 和 CloudFront 上托管 React 应用。
项目设置
S3 存储桶名称必须在全球范围内唯一。
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
}
如何使用 S3 和 CloudFront 将 React 部署到 AWS
在几秒钟内为您的 React 项目生成专业的云基础设施模板。
1
配置项目
输入您的应用名称、首选 S3 存储桶名称和 AWS 区域。
2
选择工具
在 Terraform (IaC)、AWS CLI (脚本) 或 GitHub Actions (CI/CD) 之间进行选择。
3
生成
代码会随着您输入配置而自动更新。
4
复制并使用
复制生成的代码并将其粘贴到您的项目文件中。
常见问题
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.