🚀 Vite + S3 + CloudFront 배포 가이드

📌 1. 전체 구조

최종 아키텍처:

[User]
  ↓
CloudFront (Admin - HTTPS)
  ↓
S3 (React SPA)

[User]
  ↓
CloudFront (API - HTTPS)
  ↓
EC2 (NestJS :3000)

👉 핵심 목표

• 프론트: HTTPS 배포 (S3 + CloudFront)
• 백엔드: HTTPS API 제공 (CloudFront → EC2)
• 문제 해결: Mixed Content / CORS / 캐시

---

📦 2. S3 정적 웹 호스팅 설정

2-1. Static Hosting 활성화

S3 → Bucket → Properties → Static website hosting → Enable

설정:

Index document: index.html
Error document: index.html   (SPA 필수)

👉 React Router 사용 시 필수

---

2-2. 퍼블릭 접근 허용

Block Public Access 해제

S3 → Permissions → Block public access → 전부 해제

---

Bucket Policy 추가

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicRead",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::버킷명/*"
    }
  ]
}

---

2-3. 접속 확인

http://버킷명.s3-website-리전.amazonaws.com

---

⚡ 3. CloudFront (Admin - 프론트)

목적

• HTTPS 제공
• SPA 라우팅 해결
• 성능 + 캐싱

---

3-1. Origin 설정

Origin Domain: S3 website endpoint (중요)

예:

chain-wallet-host.s3-website-ap-northeast-1.amazonaws.com

---

3-2. 주요 설정

Viewer Protocol Policy: ✔ Redirect HTTP → HTTPS

Default Root Object: ✔ index.html

---

3-3. SPA 라우팅 설정

CloudFront → Error Pages

403 → /index.html → 200
404 → /index.html → 200

👉 이거 안 하면 /dashboard 직접 접속 시 404

---

🔥 4. Mixed Content 문제

문제 구조

CloudFront (HTTPS) → EC2 API (HTTP)

👉 브라우저 차단

---

🌐 5. CloudFront (API용) 추가

구성

CloudFront (API) → Origin: EC2 (IP:3000)

---

설정

Origin:
✔ Custom Origin
✔ HTTP only
✔ Port 3000

---

Behavior 설정

Allowed Methods:
GET / POST / PUT / PATCH / DELETE / OPTIONS

Cache:
Disabled

Origin Request Policy:
AllViewer

---

결과

Allowed Methods:
GET / POST / PUT / PATCH / DELETE / OPTIONS

Cache:
Disabled

Origin Request Policy:
AllViewer

👉 이제 API도 HTTPS

---

🔗 6. 프론트 API 연결 변경

❌ 기존 (문제)

https://xxxxx.cloudfront.net

---

✅ 변경

VITE_API_BASE_URL=https://CloudFront_API_URL

---

❗ 중요

.env 변경 후 반드시 build + 재배포

---

🚨 7. CORS 문제 해결

문제 원인

허용 origin ≠ 실제 요청 origin

---

빠른 해결

app.enableCors({
  origin: true,
  credentials: true,
});

---

권장 (운영)

app.enableCors({
  origin: [
    'https://admin-cloudfront-url',
  ],
  credentials: true,
});

---

💣 8. 캐시 문제 (가장 중요)

문제

• CloudFront가 index.html 캐싱
• 최신 코드 반영 안됨

---

해결 1️⃣ CloudFront 캐시 무효화

/*

---

해결 2️⃣ S3 업로드 전략

index.html

aws s3 cp dist/index.html s3://버킷/index.html \
  --cache-control "no-cache, no-store, must-revalidate"

---

assets (JS/CSS)

aws s3 cp dist/assets s3://버킷/assets \
  --recursive \
  --cache-control "public, max-age=31536000, immutable"

---

❗ 중요

<meta http-equiv="Cache-Control">

👉 효과 없음 (CloudFront에는 영향 없음)

---

⚙️ 9. 배포 자동화 (추천)

deploy.sh

set -e

BUCKET=버킷명
DIST_ID=CloudFront_ID

aws s3 cp dist/assets s3://$BUCKET/assets \
  --recursive \
  --cache-control "public, max-age=31536000, immutable"

aws s3 cp dist/index.html s3://$BUCKET/index.html \
  --cache-control "no-cache, no-store, must-revalidate"

aws cloudfront create-invalidation \
  --distribution-id $DIST_ID \
  --paths "/*"

root/package.json

"deploy:admin": "pnpm build:admin && pnpm --filter @cws/admin deploy"

admin/package.json

"deploy": "sh deploy.sh"

---

🧠 10. 전체 흐름 (중요 개념)

이 구조는 실제 블록체인 입출금 시스템의 Admin UI 배포 구조와 동일하다.

• 프론트는 S3에서 정적 파일 제공
• API는 별도 서버에서 처리
• CloudFront가 HTTPS + 캐싱 담당

이 흐름은 시스템 아키텍처에서도 동일하게 분리되어 설계된다

---

📊 11. 문제 → 원인 → 해결 요약

문제	원인	해결
Mixed Content	HTTP API	CloudFront(API)
CORS	origin mismatch	origin 설정
코드 미반영	index.html 캐시	no-cache + invalidation

---

🚀 12. 다음 단계 (추천)

1. CORS 강화

origin: CloudFront 도메인만 허용

---

2. CloudFront 통합 (고급)

/ → S3
/api → EC2

👉 CORS 제거 가능

---

3. 도메인 연결

admin.xxx.com
api.xxx.com

---

4. HTTPS 완전 구성

• ACM 인증서
• Route53 연결

---

🔥 한 줄 정리

S3 + CloudFront + CloudFront(API) 구조로
HTTPS 기반 SPA + API 통신 환경 완성

---

🧠 핵심 교훈

프론트 배포 문제의 90%는 캐시다