AWS 배포

AWS 배포

정적 웹사이트(예: React, Vue, HTML/CSS/JS)를 Amazon S3 + CloudFront + Route 53으로 배포하는 방법

S3 + CloudFront + Route53 배포 가이드

1. S3 버킷에 정적 파일 업로드

1. AWS 콘솔에서 S3 이동
2. 새 버킷 생성
   • 이름: 도메인과 동일하게 설정하면 편함 (예: example.com)
   • 퍼블릭 엑세스 차단 해제 (정적 웹 호스팅 시 필요)
3. 정적 웹 호스팅 활성화
   • 버킷 → "속성" → "정적 웹 호스팅" → 활성화
   • 인덱스 문서: index.html
   • 오류 문서: 404.html 등
4. 정적 파일 업로드
   • 빌드된 React, Vue, HTML 파일 등 (index.html, js, css 등)

2. 버킷 퍼블릭 액세스 정책 추가 (CloudFront용)

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::example.com/*"
    }
  ]
}

위 example.com을 실제 버킷 이름으로 바꾸기

3. CloudFront 배포 설정

1. CloudFront 콘솔로 이동
2. 새 배포 생성
   • 원본 도메인: S3 버킷 (리스트에서 선택하거나, 직접 입력)
   • 원본 경로: 비워두기
   • 뷰어 프로토콜 정책: Redirect HTTP to HTTPS
   • 캐싱: 기본 설정으로 시작해도 무방
   • SPA라면 에러 페이지 설정 → 404 대신 index.html로 리디렉션 설정
3. 배포 생성 완료되면 CloudFront 도메인 확인 (d1234abcdef.cloudfront.net)

4. Route 53 도메인 연결

1. 도메인 구매 (AWS Route53 또는 외부 업체 가능)
2. 호스팅 영역 생성 (Route53에서 도메인 이름으로)
3. A 레코드 생성
   • 이름: @ (또는 www 등)
   • 유형: A – IPv4 주소
   • 별칭: 예
   • 대상: CloudFront 배포 선택

5. 결과 확인

https://yourdomain.com 접속하면 CloudFront → S3를 통해 정적 페이지 표시됨.

 

HTTPS 인증서 붙이는 법 (ACM + CloudFront)

목적: https://yourdomain.com 으로 접속할 수 있도록 설정

ACM 인증서 생성

1. AWS 콘솔 → Certificate Manager (ACM) 이동
2. "공개 인증서 요청" 클릭
3. 도메인 입력:
   • 예: yourdomain.com, www.yourdomain.com (둘 다 입력 추천)
4. DNS 검증 방식 선택 (Route 53 쓰면 자동 설정 가능)
5. 요청 완료 후, DNS 레코드를 추가하라고 나오면 Route53에서 자동 추가하거나 수동으로 NS, CNAME 추가
6. 상태가 **"발급됨"**으로 바뀔 때까지 기다리기 (몇 분 소요)

CloudFront에 인증서 적용

1. CloudFront 배포 설정으로 이동
2. "기본 도메인 이름" 설정 (예: yourdomain.com)
3. "커스텀 SSL 인증서" 선택
   • ACM에서 생성한 인증서가 나와야 함
4. 배포 저장 후 재배포됨 (몇 분 소요)

이제 HTTPS로 접속 가능해짐!

React + Vite 기준 build 폴더 구성

# vite 프로젝트 빌드
npm run build

 

기본 구조 (dist/)

dist/
├── index.html
├── assets/
│   ├── index-xxxxx.js
│   ├── style-xxxxx.css
│   └── ...

S3 업로드할 때는 dist 폴더 전체 업로드

• index.html이 최상단에 있어야 S3 정적 웹 호스팅이 정상 동작

S3에서 정적 호스팅 설정

• 인덱스 문서: index.html
• 오류 문서: index.html (SPA 라우팅용)

CloudFront 캐시 무효화 (배포 후 새 파일 반영)

이유: S3에 새 파일 올렸는데도 CloudFront가 예전 파일을 보여줄 때

방법:

1. AWS 콘솔 → CloudFront → 배포 선택
2. 상단 [Invalidations] 탭 클릭
3. Create Invalidation 선택
4. 경로 입력:
5. 무효화 완료까지 수 분 소요

/*       ← 모든 파일 무효화
/index.html
/assets/* ← 특정 폴더만

팁:

• 자주 무효화해야 할 경우, 배포 자동화 시 AWS CLI 또는 GitHub Actions로 처리 가능

aws cloudfront create-invalidation --distribution-id YOUR_ID --paths "/*"