📌 S3, CloudFront를 활용해 React 프로젝트 배포하는 방법

React로 프로젝트를 만들고 개발 모드로만 확인하는 게 아니라,
진짜 웹사이트처럼 URL로 접근 가능한 형태로 배포까지 해보고 싶었음.
그래서 이번엔 AWS S3 + CloudFront를 활용해 직접 배포해봤고, 그 과정을 정리했보았다.

1️⃣ React 프로젝트 만들고 빌드하기

npm create vite@lates

 

• 위 명령어로 vite 기반의 React 프로젝트를 만들었음
• React + JavaScript를 선택해서 프로젝트 생성 완료했음
• 프로젝트 디렉토리로 들어가서 패키지를 설치했음

cd my-vite-app
npm install

 

• 이후, 아래 명령어로 프로덕션 빌드를 진행했음

npm run build

• dist/ 폴더가 생성되고, 여기에 정적 파일들이 모두 들어있었음 (index.html, js, css 등)

2️⃣ S3 버킷 만들고 정적 웹사이트 설정하기

1. AWS 콘솔에서 S3 서비스로 이동함
2. [버킷 만들기] 버튼 클릭
3. 버킷 이름은 고유하게 설정 (예: my-react-app-bucket)
4. 공개 접근 차단 해제 체크 해제 (웹사이트는 퍼블릭이어야 하므로)

버킷 생성 후, [속성] → [정적 웹사이트 호스팅] 으로 이동해서:

• 정적 웹사이트 호스팅 설정 사용함
• 인덱스 문서: index.html

으로 입력하고 저장했음.

3️⃣ dist 폴더 파일 업로드 및 퍼블릭 설정

• dist/ 폴더 안에 있는 모든 파일을 S3 버킷에 업로드했음
• 파일 업로드 후, 퍼블릭 접근이 필요하므로 객체 권한 설정에서 "퍼블릭 읽기" 허용을 선택했음

4️⃣ 버킷 정책(Public Access Policy) 추가

매번 파일마다 퍼블릭 설정하는 게 번거롭기 때문에, 버킷 전체에 퍼블릭 접근 권한을 부여했음.

[권한] → [버킷 정책] 에 다음 JSON을 추가했음

버킷 이름은 본인의 것으로 바꿔서 넣었음.

5️⃣ CloudFront 배포 설정하기

1. AWS 콘솔에서 CloudFront 서비스로 이동함
2. [배포 생성] 클릭 → 웹 배포 선택
3. 오리진 도메인 이름에 S3 버킷 주소를 입력 (정적 웹사이트 주소 아님!)
   • 예: my-react-app-bucket.s3-website-ap-northeast-2.amazonaws.com
4. 기본 캐싱 동작에서:
   • 뷰어 프로토콜 정책: Redirect HTTP to HTTPS
   • 캐시 정책: CachingOptimized
5. 배포 이름 지정 후, 배포를 생성했음
   • 생성되기까지 몇 분 정도 소요됨

6️⃣ CloudFront 도메인으로 접속 확인

• 배포가 완료되면, CloudFront가 제공하는 도메인 이름이 생김
  예: d12345abcdefgh.cloudfront.net
• 해당 주소에 접속했더니 S3에 업로드한 React 앱이 정상적으로 뜨는 것을 확인했음 🎉

🧾 마무리 요약

• React 프로젝트는 vite로 생성했고, npm run build로 정적 파일을 만들었음
• 이 파일들을 S3 버킷에 업로드하고 정적 웹사이트 호스팅 설정을 했음
• CloudFront로 전 세계 CDN 배포를 걸어서 빠르고 안정적으로 접속 가능하게 만들었음