배포: Cloudflare Pages

1 GitHub에 코드 올리기

먼저 프론트엔드 코드를 GitHub에 올립니다.

1.1 GitHub 저장소 생성

1. github.com/new로 이동
2. Repository name: my-admin 입력
3. Public 선택 (무료 호스팅 위해)
4. "Create repository" 클릭

1.2 코드 Push

프론트엔드 폴더(my-admin)에서 실행:

# Git 초기화
git init

# .gitignore 확인 (node_modules 제외되어야 함)
cat .gitignore

# 모든 파일 추가
git add .

# 첫 커밋
git commit -m "Initial commit"

# GitHub 연결 (YOUR_USERNAME을 본인 계정으로 변경)
git remote add origin https://github.com/YOUR_USERNAME/my-admin.git

# Push
git branch -M main
git push -u origin main

2 Cloudflare Pages 배포

Cloudflare Pages는 무료로 정적 사이트를 호스팅해줍니다.

2.1 Cloudflare 대시보드

1. dash.cloudflare.com 로그인
2. 좌측 메뉴에서 "Workers & Pages" 클릭
3. "Create" 버튼 클릭
4. "Pages" 탭 선택
5. "Connect to Git" 클릭

2.2 GitHub 연결

1. "Add account" → GitHub 계정 연결
2. 방금 만든 my-admin 저장소 선택
3. "Begin setup" 클릭

2.3 빌드 설정

2.4 환경변수 설정

"Environment variables" 섹션에서 API URL을 설정합니다. 지금은 로컬 백엔드를 사용하므로 일단 비워둡니다.

"Save and Deploy" 버튼을 클릭하면 빌드가 시작됩니다.

3 배포 확인

빌드가 완료되면 URL이 생성됩니다:

4 백엔드 배포 (다음 단계)

현재 프론트엔드만 배포된 상태입니다. 백엔드는 아직 로컬(localhost:8000)에서만 동작합니다.

지금은 로컬에서 백엔드를 실행하면서 프론트엔드 배포를 테스트해보세요. 백엔드 배포는 다음 학습 사이클에서 다룹니다.