Cet outil déploie-t-il le code para moi ?

Non, il génère les fichiers de configuration. Vous devez les exécuter via votre propre compte AWS.

Quelle est l'approche recommandée ?

Terraform est idéal para la gestion d'infrastructure à long terme, tandis que GitHub Actions est parfait para les déploiements automatisés.

Ce modèle est-il prêt para la production ?

Oui, les modèles suivent les meilleures pratiques AWS para l'hébergement statique S3 et la distribution CDN CloudFront.

React2AWS-Generator

Infrastrukturvorlagen für das Hosting von React-Apps auf AWS S3 und CloudFront erstellen.

Projekteinstellungen

App-Name

S3-Bucket-Name

S3-Bucket-Namen müssen weltweit eindeutig sein.

AWS-Region

Umgebungs-Tags

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
}

So deploy React to AWS using S3 and CloudFront

Générez des modèles d'infrastructure cloud professionnels para vos projets React en quelques secondes.

Configurer le projet

Entrez le nom de votre application, le nom du bucket S3 préféré et la région AWS.

Choisir l'outil

Choisissez entre Terraform (IaC), AWS CLI (Script) ou GitHub Actions (CI/CD).

Générer

Le code se met à jour automatiquement au fur et à mesure de votre configuration.

Copier & Utiliser

Copiez le code généré et collez-le dans vos fichiers de projet.

Häufig gestellte Fragen

Nur für Ihre Augen

Ihre Privatsphäre ist unsere Priorität. Wir verarbeiten alles lokal, um sicherzustellen, dass Ihre sensiblen Daten niemals offengelegt werden.

Unterstützen Sie das Projekt

Geben Sie mir einen Kaffee aus!

React2AWS-Generator

Projekteinstellungen

So deploy React to AWS using S3 and CloudFront

Configurer le projet

Choisir l'outil

Générer

Copier & Utiliser

Verwandte Blogbeiträge

So stellen Sie React-Apps auf AWS S3 und CloudFront bereit: Der ultimative Leitfaden 2026

Infrastructure as Code (IaC) mit React2AWS: Automatisieren Sie Ihre Cloud im Jahr 2026

Optimierung der React-Hosting-Kosten auf AWS: Einsparungsleitfaden für 2026

Häufig gestellte Fragen

Verwandte Tools

JSON-Formatierer

Syntax-Konverter

Rich Text zu HTML

Für Alle Zugänglich

Einfach & Sauber

Blitzschnell

Nur für Ihre Augen

Unterstützen Sie das Projekt