이 도구가 코드를 대신 배포해 주나요?

아니요. 설정 파일만 생성합니다. 자신의 AWS 계정을 통해 직접 실행해야 합니다.

권장되는 방식은 무엇인가요?

장기적인 인프라 관리에는 Terraform이 이상적이며, 자동 배포에는 GitHub Actions가 적합합니다.

이 템플릿은 프로덕션용으로 적합한가요?

네, 템플릿은 S3 정적 호스팅 및 CloudFront CDN 배포에 대한 AWS 모범 사례를 따릅니다.

React2AWS 생성기

React 앱을 AWS S3 및 CloudFront에서 호스팅하기 위한 인프라 템플릿을 생성하세요.

프로젝트 설정

앱 이름

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로

모두에게 열려 있음

심플하고 깔끔함

매우 빠름

본인만 확인 가능

프로젝트 지원