Cet outil déploie-t-il le code pour 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 pour la gestion d'infrastructure à long terme, tandis que GitHub Actions est parfait pour les déploiements automatisés.

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

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

Générateur React2AWS

Générez des modèles d'infrastructure pour héberger des applications React sur AWS S3 et CloudFront.

Paramètres du projet

Nom de l'application

Nom du compartiment S3

Les noms de compartiment S3 doivent être uniques au monde.

Région AWS

Balises d'environnement

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
}

Comment déployer React sur AWS en utilisant S3 et CloudFront

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

Configurer le projet

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

Choisir l'outil

Sélectionnez 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 et utiliser

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

Articles de Blog Connexes

Apprenez-en plus sur l'utilisation efficace de cet outil.

Comment déployer des applications React sur AWS S3 et CloudFront : Le guide ultime 2026

2026-03-12

Apprenez à héberger votre application React avec une haute disponibilité, une sécurité SSL et des performances mondiales via l'architecture S3 + CloudFront. La méthode d'hébergement la plus rentable et évolutive.

Lire l'article

L'Infrastructure as Code (IaC) avec React2AWS : Automatisez votre Cloud en 2026

2026-03-12

Découvrez comment l'Infrastructure as Code (IaC) et Terraform peuvent révolutionner le déploiement de vos applications React. Automatisez professionnellement la création de buckets S3 et de distributions CloudFront.

Lire l'article

Optimisation des coûts d'hébergement React sur AWS : Guide d'économie 2026

2026-03-12

Découvrez comment réduire au minimum vos factures AWS lors de l'hébergement d'applications React. Stratégies S3 et CloudFront pour des architectures performantes et économiques.

Lire l'article

Foire aux questions

Outils connexes

Formateur JSON

Convertisseur de syntaxe

Texte Enrichi en HTML

Accessible à Tous

Les outils de productivité essentiels devraient être gratuits et accessibles à tout le monde.

Simple et Épuré

Interface minimaliste conçue pour une expérience ciblée et productive.

Ultra Rapide

Pas de files d'attente sur le serveur ni de temps d'attente pour le téléchargement. Résultats instantanés dans votre navigateur.

SÉCURISÉ ET LOCAL

Uniquement pour vos yeux

Votre vie privée est notre priorité. Nous traitons tout localement pour garantir que vos données sensibles ne soient jamais exposées.

Soutenir le projet

Achetez-moi un café