반드시 데스크탑 환경에서 보길 권장합니다.

1. Why?

원래는 S3 + CloudFront를 사용할 생각이었다. 하지만 이들은 전부 다 비용이다. React는 기본적으로 정적 파일 생성해서 돌리는 것이므로, Cloudflare의 기본 CDN 기능과 결합하여 무료로 사용할 수 있다.

2. How?

Workers & Pages → Create → Pages → Connect Git

image.png

image.png

image-40.png

image-41.png

빌드 성공하면 우측과 같은 화면이 나온다.

여기서 Add custom domain 을 선택한다.

GitHub 연결 → FE 레포 선택

하단의 Get Started 선택

image.png

image.png

Build 설정 : React / Vite 기준

Environment variables ← .env 이식

image.png

image-42.png

image-43.png

image-44.png

image-45.png

image-46.png