1 GitHub에 코드 올리기
배포할 코드가 GitHub 저장소에 있어야 합니다.
터미널
# 저장소 초기화 (처음인 경우)
git init
# 파일 추가
git add .
# 커밋
git commit -m "Initial commit"
# GitHub 저장소 연결 (처음인 경우)
git remote add origin https://github.com/username/my-project.git
# 푸시
git push -u origin main정보
GitHub 저장소가 없다면 github.com/new에서 생성하세요.
2 Cloudflare Pages 설정
- Cloudflare 가입 (무료)
- 대시보드에서 Workers & Pages 클릭
- Create application → Pages 선택
- Connect to Git 클릭
- GitHub 계정 연결 및 저장소 선택
빌드 설정 (프레임워크별)
React + Vite
- Build command:
npm run build - Build output:
dist
Next.js
- Build command:
npx @cloudflare/next-on-pages@1 - Build output:
.vercel/output/static
Astro
- Build command:
npm run build - Build output:
dist
3 SPA 라우팅 설정
React Router 등을 사용하는 SPA는 추가 설정이 필요합니다. 새로고침 시 404 에러를 방지합니다.
public/_redirects
/* /index.html 200
이 파일을 public 폴더에 생성하세요.
이 설정을 안 하면?
/about 같은 페이지에서 새로고침하면 404가 뜹니다.
자세한 내용은 SPA 404 에러 해결을 참고하세요.
4 환경 변수 설정 (필요시)
API 키 등 민감한 정보는 환경 변수로 설정합니다.
- Cloudflare 대시보드 → 프로젝트 선택
- Settings → Environment variables
- 변수 추가 (예:
VITE_API_URL) - Production/Preview 환경 구분 가능
정보
Vite를 사용하는 경우, 환경 변수 이름이 VITE_로 시작해야 합니다.
자세한 내용은 환경 변수 에러 해결을 참고하세요.
5 커스텀 도메인 연결 (선택)
기본으로 프로젝트명.pages.dev 도메인이 제공됩니다.
나만의 도메인을 사용하려면 추가 설정이 필요합니다.
- 프로젝트 → Custom domains
- Set up a custom domain 클릭
- 도메인 입력 (예:
myapp.com) - DNS 설정 안내에 따라 설정
꿀팁
도메인을 Cloudflare DNS에서 관리하면 자동으로 연결됩니다. 다른 DNS를 사용하면 CNAME 레코드를 추가해야 합니다.
배포 완료 체크리스트
0/5 완료배포 완료!
축하합니다!
이제 코드를 GitHub에 푸시할 때마다 자동으로 배포됩니다.
프로젝트명.pages.dev에서 확인하세요.