[DevOps] AWS S3 정적 웹사이트 호스팅 배포

개요

S3를 이용한 프론트엔드 배포 워크플로우를 중점으로 다룬다. Vue.js 빌드 후 S3 버킷 생성부터 Route53 A/CNAME 레코드 설정까지 상세히 설명하며 이전 시리즈의 Route53 연결을 기반으로 한다.

---

S3 주된 목적과 워크플로우

S3는 웹사이트의 정적 파일 호스팅, 파일스토리지 및 아카이빙 목적으로 사용되는 객체 스토리지다.

스토리지 서비스
├── 이미지/파일 저장
├── 업로드 → 자동 URL 생성 (공개 버킷)
└── 정적 웹사이트 호스팅 (HTML/CSS/JS)

프론트엔드 배포 워크플로우는:

1. Vue.js 빌드 (npm run build)
   • dist/ 폴더 생성
2. S3 버킷 생성 (eazy99-shop-www)
   • Static Website Hosting 활성화 (속성 최하단에서 설정)
3. dist/ 폴더 전체 업로드
   • aws s3 sync dist/ s3://eazy99-shop-www/
4. Route53 A 레코드 설정
   • www.eazy99.shop → S3 Website Endpoint
5. 브라우저 접속 → S3에서 FE 리소스 렌더링

FE 배포 핵심은 사용자 브라우저 → www.eazy99.shop → Route53 → S3 Bucket (정적 파일 제공) → HTML/CSS/JS 다운로드 → 브라우저에서 Vue.js 렌더링이다.

---

Route53 서브도메인과 S3 연결

Route53에 서브도메인 생성 및 S3 연결:

• 서브도메인 추가: www.eazy99.shop 또는 server.eazy99.shop 등 도메인의 첫 번째 영역 자유 세팅

• 추가한 서브도메인에 S3 연결

  • CNAME 연결 통해 Route53에 S3 웹호스팅 URL 주소 설정
  • 레코드 유형 중 A 유형은 AWS 자원 내 연결 시 사용
  • CNAME 유형은 AWS 자원 내 연결 아니어도 엔드포인트 있는 경우 사용 가능
  • S3에 직접 연결 시 버킷명이 www.eazy99.shop 도메인명과 일치해야 한다

레코드 유형: A, CNAME 사용하며 Route53 CNAME 등록 시 http 빼고 끝에 / 넣지 말고 입력한다.

한 줄 요약: FE 빌드 → S3 업로드 → Route53 라우팅 → 브라우저에서 동작