Cloudflare Pages에 배포하기
완성한 사이트를 Cloudflare Pages로 공개: Git 연동 자동 배포, build 설정, 커스텀 도메인까지 초보자용.
한 문장으로
Cloudflare Pages를 Git에 연결하면 push할 때마다 자동으로 build하고 공개된다. 배포는 어려운 일이 아니어야 한다.
만들 결과물
Git 연동으로 push마다 자동 배포되고 자신의 도메인으로 제공되는 사이트. 전부 무료 한도 안에서.
배포는 어렵지 않아야 한다
'다 만들었는데 어떻게 남에게 보여줄지 모르겠다'에서 멈추는 초보자가 많습니다. Cloudflare Pages는 이를 간단하게 만듭니다. 코드를 Git에 연결하면 push할 때마다 자동으로 build하고 전 세계에 공개합니다.
공개하는 세 가지 방법
- Git 연동(가장 추천): GitHub / GitLab과 연결, push로 자동 배포, 미리보기 URL도 자동 생성.
- 직접 업로드: build된 출력 폴더를 대시보드에 끌어다 놓기. 일회성 정적 사이트에 적합.
- Wrangler CLI:
wrangler pages deploy로 공개. 스크립트화하고 싶은 사람에게.
Git 연동 절차 (쉬운 버전)
- 프로젝트를 GitHub에 push.
- Cloudflare 대시보드 → Workers & Pages → Pages 프로젝트 생성 → 저장소 연결.
- build 명령(예:
npm run build)과 출력 디렉터리(예:out또는dist)를 설정. - 배포를 누르고 완료되면
당신의-프로젝트.pages.devURL을 받습니다. 공개 완료.
push 후 일어나는 일
자신의 도메인 붙이기
*.pages.dev는 그대로 써도 되지만, 더 전문적으로 하려면 자신의 도메인을 붙이세요. 프로젝트의 '커스텀 도메인'에 추가하고 DNS 안내를 따릅니다. 도메인이 이미 Cloudflare에 있으면 거의 원클릭입니다.
초보자가 빠지는 함정
- 잘못된 build 명령이나 출력 디렉터리: 배포는 성공했는데 화면이 빈 경우, 대개 출력 디렉터리가 엉뚱한 폴더를 가리킨 것.
- 환경 변수 / 시크릿 미설정: 로컬은 되는데 운영에서 깨짐. 대개 환경 변수 누락. Pages 설정에서 보완.
- 시크릿을 Git에 커밋: 키는 절대 버전 관리에 넣지 마세요. 플랫폼의 시크릿 설정을 쓰고 코드에 박지 마세요.
다음 단계
- 아직 고민 중: Cloudflare vs Vercel 초보자는 어떻게 고를까
- 전체 그림 보기: Cloudflare
자주 묻는 질문
배포는 성공했는데 화면이 새하얗습니다. 어떻게 하나요?
가장 흔한 원인은 ‘출력 디렉터리’ 오류입니다. Pages가 게시하는 폴더가 실제 빌드 산출물이 아닌 경우(예: out이어야 하는데 root). 다음은 build 명령 오류나 환경 변수 미설정. 이 세 가지를 먼저 확인하면 대개 해결됩니다.
무료 플랜으로 배포하면 어떤 제한이 있나요?
무료 플랜은 개인 프로젝트에 대체로 충분하지만, 월 빌드 횟수·대역폭·(Functions를 쓰면) 실행 횟수 한도에 유의하세요. 정적 사이트는 거의 도달하지 않습니다. 동적 기능을 많이 넣거나 트래픽이 크면 업그레이드를 재검토. 정확한 수치는 공식 pricing 페이지 기준.
참고 자료
- Cloudflare Pages docs — Cloudflare
- Cloudflare Plans & Pricing — Cloudflare
포트폴리오 경로 다음 단계: Cloudflare →