Cloudflare 자동 배포: 올리기만 하면 사이트가 바뀌어요

원고만 넘기면 알아서 출간되는 출판사

직접 따라가 보기

세 가지 상황 버튼을 모두 눌러 보세요. 특히 빌드 실패일 때 사이트가 어떻게 되는지 확인해 보세요.

1단계: Cloudflare와 GitHub 연결하기 (처음 한 번)

준비물은 2-5 레슨에서 GitHub에 올린 저장소와 4-3 레슨에서 만든 Cloudflare 계정이에요.

1. Cloudflare 대시보드에서 Workers & Pages → 만들기(Create) → Pages → **Git에 연결(Connect to Git)**을 골라요.
2. GitHub 연결 화면이 뜨면 직접 로그인하고 승인해요. 저장소 접근 범위는 모든 저장소 대신 **선택한 저장소만(Only select repositories)**으로 my-site만 고르는 게 안전해요.
3. my-site 저장소를 선택하고 아래 빌드 설정을 넣어요.
4. **저장 및 배포(Save and Deploy)**를 누르면 첫 빌드가 시작돼요.

빌드 설정, 무엇을 넣을까?

이 프로젝트를 GitHub와 연결해서 Cloudflare Pages로 자동 배포하려고 해.
Cloudflare 화면에 넣어야 할 빌드 명령, 결과 폴더, 필요한 환경 변수 이름을 표로 정리해 줘.
내 컴퓨터에서 빌드가 잘 되는지도 먼저 확인해 줘.

2단계: 이제부터는 이렇게만

연락처 구역에 카카오톡 오픈채팅 링크 버튼을 추가해 줘. 다 되면 커밋하고 GitHub에 올려 줘.

3단계: 배포 화면 읽는 법

Cloudflare의 내 프로젝트를 열면 배포(Deployments) 목록이 있어요.

빌드가 실패했다면

1. 실패한 배포를 눌러 빌드 로그를 열어요.
2. 빨간 에러 줄(보통 마지막 부분)을 복사해요.
3. Antigravity에게 보여 줘요.

Cloudflare 자동 배포가 실패했어. 빌드 로그 마지막 부분이야:

(여기에 빌드 로그 붙여 넣기)

내 컴퓨터에서는 잘 되는데 왜 Cloudflare에서는 실패하는지 쉽게 설명하고 고쳐 줘. 고친 뒤 내 컴퓨터에서 빌드가 되는지 확인하고 다시 올려 줘.

4단계: 미리보기 배포로 먼저 확인하기

2-5 레슨에서 배운 브랜치를 쓰면, 본 사이트를 건드리지 않고 새 디자인을 실제 주소에서 확인할 수 있어요. main이 아닌 가지를 올리면 Cloudflare가 new-design.minji-site.pages.dev 같은 미리보기 주소로 따로 배포해요.

new-design 가지에서 메인 화면을 바꿔서 GitHub에 올려 줘. Cloudflare 미리보기 주소에서 확인하고, 마음에 들면 main에 합칠게.

5단계: 문제가 생기면 되돌리기 (롤백)

배포는 성공했는데 막상 열어 보니 화면이 이상하다면, 고칠 때까지 기다릴 필요 없이 이전 버전으로 바로 되돌릴 수 있어요.

1. 배포 목록에서 마지막으로 잘 되던 배포를 찾아요.
2. 그 배포의 메뉴(⋯)에서 **이 배포로 되돌리기(Rollback)**를 눌러요. 몇 초 만에 사이트가 예전 모습으로 돌아가요.
3. 그동안 Antigravity와 차분히 원인을 고치고, 고친 버전을 다시 올려요.