S3 + CloudFront에 react를 배포하는 것 보다 훨씬 간단하고, 싸게 front를 배포할 수 있다.
(1).
✅ Vercel 계정 생성 및 로그인
- https://vercel.com 접속
- GitHub 계정으로 로그인 (또는 GitLab, Bitbucket도 가능)
✅ 프로젝트 배포 (Vercel 대시보드)
- 로그인 후 + Add New → Project 클릭
- GitHub 저장소 목록 중에서 my-react-app 선택
- 빌드 설정 화면:
- Framework Preset: Create React App
- Build Command: npm run build
- Output Directory: build
- “Deploy” 클릭
✅ GitHub 자동 배포 자동 <-> 수동 변경
1. Vercel 대시보드에서 자동 배포 끄기
- Vercel 대시보드 → 해당 프로젝트 클릭
- 상단 메뉴: Settings → Git 탭 이동
- 아래로 스크롤 →
"Auto Deploy" 옵션을 끔 →
🔲 Automatically deploy commits ← 이걸 체크 해제
이렇게 하면 GitHub에 푸시해도 자동으로 배포되지 않고,
수동으로 “Deploy” 버튼을 눌러야만 배포됩니다.
(2) 🔧 커스텀 도메인에 HTTPS 적용하는 방법 (요약)
- Vercel 프로젝트 대시보드에서 "Domains" 클릭
- 사용하려는 도메인 추가 (예: example.com)
- 도메인 네임서버 또는 CNAME 연결
- 연결되면 Vercel이 자동으로 SSL 인증서 발급 및 적용
✅ 예시 화면
- https://my-react-app.vercel.app → SSL 적용 완료
- https://example.com → 커스텀 도메인 연결 + SSL 자동 설정
(3)
아마존 Route53 을 활용한 Vercel https 도메인 설정.
✅ 설정 방법 (단계별)
1. Route53에서 test.my.com 서브도메인 등록
- Route53에서 my.com 호스팅 영역을 엽니다
- 다음 레코드를 추가합니다:
도메인: test.my.com
타입: CNAME
값: cname.vercel-dns.com (또는 Vercel에서 제공하는 고유 값)주의:
- test.my.com은 Vercel 프로젝트에 등록된 도메인과 일치해야 합니다
- Vercel에서 DNS 레코드가 적용되면 Let's Encrypt 인증서가 자동 발급되어 HTTPS 지원됩니다
2. Vercel 프로젝트에 도메인 추가
Vercel → 프로젝트 → Settings > Domains → Add Domain:
- test.my.com 입력
- Vercel이 "이 도메인 소유를 증명하세요"라고 안내
- TXT 레코드 또는 CNAME 값을 보여줌
- 그 값을 Route53에 등록하면 소유 확인 후 자동 HTTPS 연결 완료
3. 결과적으로 이렇게 됩니다:
- my.com의 DNS는 전부 Route53에서 관리
- b.my.com은 ACM 인증서 사용 + AWS에서 서비스
- test.my.com은 Vercel에서 Let's Encrypt 자동 인증서 사용 + HTTPS 서비스
