CloudFront란?
CloudFront
-
AWS에서 제공하는 CDN (Content Delivery Network) 서비스
-
정적 파일이나 동영상을 빠르고 안정적으로 전송
작동 과정
-
콘텐츠의 복사본을 전 세계 엣지 서버에 캐시 형태로 저장
-
사용자에게 가장 가까운 서버에서 콘텐츠 전송 → 빠른 응답 속도 제공
-
CloudFront는 CDN의 일종
CDN (Content Delivery Network)
- 콘텐츠를 사용자에게 빠르게 전달하기 위한 서버 네트워크
- 전송 성능 향상 + 보안 강화
아키텍처 구성
- 사용자가 웹사이트에 접속
- CloudFront는 요청을 가장 가까운 클라우드프론트에서 처리
- 요청하는 파일이 있다면 바로 응답
- 없다면 오리진 서버(S3, EC2 등) 에서 가져와 클라우드프론트에 저장한 뒤 응답
- 이후 동일한 요청은 클라우드프론트에서 빠르게 응답
React 프로젝트 배포
React 프로젝트 생성
- Vite를 이용해 React 프로젝트 생성
npx create-vite@latest oz-practice-vite
cd oz-practice-vite
npm install
npm run dev
- 배포용 코드로 변환하기 위해 build 명령어 실행
npm run build
개발용 코드 vs 배포용 코드
| 구분 | 개발용 코드 | 배포용 코드 (npm run build) |
|---|---|---|
| 형태 | JSX, 최신 문법, 분리된 모듈 | JS로 변환, 압축 및 번들링 |
| 특징 | 개발자 친화적 | 브라우저 최적화, 성능 개선 |
| 목적 | 개발 편의성 | 실제 배포용 |
npm run build 명령어의 역할
- JSX → JS 변환
- 최신 문법 → 호환 가능한 문법으로 변환
- 코드 압축
- dist/ 폴더 생성 → S3에 올릴 배포용 정적 파일
S3에 React 프로젝트 파일 업로드
build된 배포용 파일을 S3 버킷에 업로드
CloudFront로 웹사이트 배포하기
Create Distribution 설정
-
Origin Domain에서 S3에 배포한 링크를 선택
- S3 버킷의 웹사이트 엔드포인트(URL)를 선택하여 CloudFront 배포의 원본으로 설정
-
Use Website Endpoint옵션을 체크- S3 웹사이트 엔드포인트를 사용하도록 설정
- 이를 통해 CloudFront는 S3 버킷에서 제공하는 웹사이트 콘텐츠를 전달
-
HTTP로 접속해도 HTTPS로 리디렉트 되도록 뷰어 설정
-
방화벽 비활성화 (별 차이 없음)
-
어느 지역에서 주로 서비스할 건지 선택,
Use North America, Europe, Asia, Middle East, and Africa선택- 지역에 따라 성능이 차이
- 서비스에 따라 가격이 상이
-
index.html을 기본 루트 파일로 설정 (해당 웹사이트에 첫 번째로 표시될 파일)
-
Create Distribution 설정 완료
Cloud front 배포 완료
hello world!