AWS Amplify: S3 호스팅과의 차이까지

1. AWS Amplify란?

Amplify 정의

• AWS가 제공하는 프론트엔드 중심의 풀스택 앱 개발 플랫폼
• 프론트 개발자가 백엔드 리소스를 빠르게 생성하고 연동 가능
• 인증, GraphQL API, 파일 저장, 정적 웹 호스팅까지 포함

지원 프레임워크

• React, Vue.js, Angular, Next.js, Flutter 등 대부분의 주요 프론트엔드 프레임워크 지원

---

2. Amplify 주요 구성 요소

구성 요소	설명
Amplify CLI	CLI 명령어로 백엔드 리소스를 설정하고 배포 (e.g., amplify init, amplify push)
Amplify Hosting	정적 웹앱 자동 배포 기능 (CI/CD 포함)
Amplify Studio	UI 기반 리소스 관리 도구, CMS 스타일의 인터페이스
Libraries	인증, API, 파일 업로드 등 기능을 위한 JS SDK
UI Components	인증 폼, 파일 업로드 컴포넌트를 프레임워크에서 즉시 사용 가능

CLI로 설정하고 Studio로 시각화하며, Library와 UI 컴포넌트로 프론트에서 기능을 연동하는 구조

---

핵심 차이 요약: S3 vs Amplify Hosting

항목	S3 정적 웹 호스팅	AWS Amplify Hosting
기본 용도	정적 파일 배포 (HTML/CSS/JS)	SPA 전체 배포 (React, Vue 등)
CI/CD 지원	수동 배포	Git 연동 자동 배포
도메인 연결	가능 (수동 인증서 설정 필요)	HTTPS 포함 자동 구성
HTTPS 지원	CloudFront + ACM 설정 필요	자동 지원
SPA 라우팅	커스터마이징 필요	자동 지원
빌드 실행	없음	amplify.yml로 커스터마이징 가능
서버리스 연동	별도 구성 필요	Lambda, API Gateway, Cognito 등과 쉽게 연동
버전 관리	없음	자동 롤백 가능
비용	매우 저렴	상대적으로 높음 (CDN 포함)
CDN	CloudFront 수동 설정	글로벌 CDN 자동 적용
보안/인증	수동 IAM 설정	Cognito 연동 가능

---

S3 정적 웹 호스팅: 특징

장점

• 단순한 HTML/CSS 사이트라면 가장 저렴하고 간편
• CloudFront와 결합 시 빠른 정적 콘텐츠 제공 가능
• 비용이 적고, 설정이 단순한 것이 큰 장점

단점

• HTTPS 미지원 → CloudFront + ACM 추가 설정 필요
• SPA 라우팅 미지원 → 404.html 트릭 사용 필요
• CI/CD 기능 없음 → 직접 업로드 필요

---

AWS Amplify Hosting: 특징

장점

• SPA 프레임워크에 최적화 (React, Vue 등)
• GitHub, GitLab, Bitbucket 연동 CI/CD → 자동 빌드 & 배포
• 커스텀 빌드 스크립트 (amplify.yml) 사용 가능
• 서버리스 백엔드 리소스와 빠르게 연동 가능
• 멀티 브랜치 지원 → preview, staging, production 관리 용이

단점

• S3보다 비용이 더 발생 (빌드 리소스 + CDN 포함)
• 내부 구조 이해가 필요 (빌드 동작 방식, 도메인 연결 등)
• 앱 사이즈 크거나 빌드 시간이 길면 요금 증가

---

선택 가이드

사용 시나리오	추천 호스팅 방식
정적 HTML/CSS 사이트	S3 정적 웹 호스팅
React/Vue/Next.js 등 SPA 사용	Amplify Hosting
자동 배포 + HTTPS + 도메인 설정을 원클릭으로 하고 싶을 때	Amplify Hosting
수동 설정 가능하고 비용 절감을 원할 때	S3 + CloudFront

---

어떤 상황에 무엇을 쓸까?

• S3 호스팅: 단순한 사이트, 랜딩 페이지, 마케팅 페이지 등에 적합
• Amplify Hosting: 프로젝트 규모가 크고, 자동화된 배포와 서버리스 연동이 필요한 상황에서 선택