# Cloudflare Pages 배포 — 사장님용 단계별 가이드

이 사이트를 무료로 인터넷에 올리는 방법입니다.
- 비용: **무료** (월 500GB 트래픽까지 무료)
- 시간: **20분**
- 결과: `https://이름.pages.dev` 같은 무료 도메인 생성. 자체 도메인 연결도 가능.

`SUPABASE_SETUP.md`를 먼저 따라하셔서 `config.js`에 키를 넣어두셔야 합니다.

---

## 0. 준비물 확인

- [ ] `SUPABASE_SETUP.md` 1~6단계 완료 (config.js에 실제 키가 들어간 상태)
- [ ] Cloudflare 계정 (없으면 [https://dash.cloudflare.com/sign-up](https://dash.cloudflare.com/sign-up) 무료 가입)
- [ ] GitHub 계정 (코드 보관 + 자동 배포용)

---

## 1. GitHub에 코드 올리기 (10분)

이미 GitHub 저장소가 있으면 **2번**으로 건너뛰세요.

### 1-1. GitHub 저장소 생성

1. [https://github.com/new](https://github.com/new) 접속
2. **Repository name**: `iseonsaeng-tktx` (자유)
3. **Private** 선택 (외부에 코드 공개 안 됨, 추천)
4. **Create repository** 클릭

### 1-2. 코드 업로드

생성된 페이지에 나오는 명령어 그대로 터미널에 입력:

```bash
cd /home/onda/projects/iseonsaeng-tktx
git remote add origin https://github.com/YOUR-USERNAME/iseonsaeng-tktx.git
git branch -M main
git push -u origin main
```

⚠️ `config.js`에는 anon key만 들어가므로 Private repo면 노출 위험 없습니다.

---

## 2. Cloudflare Pages에 연결 (5분)

1. [https://dash.cloudflare.com](https://dash.cloudflare.com) 로그인
2. 왼쪽 메뉴 **Workers & Pages** 클릭
3. **Create application** → **Pages** → **Connect to Git** 클릭
4. **GitHub 연결 허용** (한 번만)
5. 방금 만든 저장소 (`iseonsaeng-tktx`) 선택 → **Begin setup**

---

## 3. 빌드 설정 (2분)

다음과 같이 입력:

| 항목 | 값 |
|---|---|
| **Project name** | `iseonsaeng-tktx` (자동) — 그대로 |
| **Production branch** | `main` |
| **Framework preset** | **None** |
| **Build command** | (비워두기) |
| **Build output directory** | `public` |

→ **Save and Deploy** 클릭. 1~2분 안에 배포 완료.

---

## 4. 배포 확인 (1분)

배포 완료 후:
- 기본 URL: `https://iseonsaeng-tktx.pages.dev`
- 첫 화면 + `/admin/` 둘 다 접속 가능한지 확인
- `/admin/` 로그인 → 콘텐츠 등록 → 메인 페이지 새로고침 → 반영되는지 확인

---

## 5. 자체 도메인 연결 (선택 — 5분)

`example.com` 같은 본인 도메인이 있으면:

1. CF Pages 프로젝트 화면 → **Custom domains** → **Set up a custom domain**
2. 도메인 입력 (예: `tktx.example.com`)
3. 안내 따라 DNS 레코드 추가 (도메인이 Cloudflare에서 관리 중이면 자동)
4. 5~10분 후 SSL 자동 발급

---

## 6. 코드 수정 → 자동 재배포

이후 사이트 수정은:
1. 로컬에서 코드 수정
2. `git add . && git commit -m "..." && git push`
3. CF Pages가 자동으로 1~2분 안에 재배포

---

## 7. 환경변수 방식 (고급, 선택)

`config.js` 직접 수정 대신 환경변수를 쓰고 싶으면:

### 7-1. CF Pages 환경변수 설정

CF Pages 프로젝트 → **Settings** → **Environment variables** → **Production**에 추가:

| Name | Value |
|---|---|
| `SUPABASE_URL` | `https://xxxxx.supabase.co` |
| `SUPABASE_ANON` | `eyJ...` |

### 7-2. 빌드 명령으로 config.js 동적 생성

**Build command** 칸에 다음 입력:

```bash
echo "window.__TKTX_CONFIG__ = { SUPABASE_URL: '$SUPABASE_URL', SUPABASE_ANON: '$SUPABASE_ANON', DEMO_MODE: false };" > public/assets/config.js
```

→ 배포 시 자동으로 환경변수 값이 config.js에 주입됨. git에는 placeholder만 보존.

---

## 8. 문제 발생 시

| 증상 | 원인 + 해결 |
|---|---|
| 배포 후 흰 화면 | F12 콘솔 확인. `Failed to fetch` 면 config.js의 키 오타. `MIME type` 에러면 build output directory를 `public`으로 정확히 입력 |
| `/admin/` 접속 시 404 | URL 끝에 슬래시 `/` 빠뜨리면 발생. `/admin/` 로 접속 |
| 메인은 되는데 admin만 안 됨 | `_routes.json` 또는 `_headers` 파일이 admin 차단했을 가능성 — public 디렉토리 확인 |
| 푸터 / 공지 새로고침해도 placeholder가 보임 | config.js의 `DEMO_MODE: false` 확인. 또는 Supabase RLS 정책이 disabled — 001_schema.sql 재실행 |
| GitHub push 시 거부 | `config.js`에 service_role 키 들어가면 GitHub Secret Scanner가 차단. anon key는 OK |

---

## 9. 비용 안내

- Cloudflare Pages: **무료** (월 500GB 트래픽, 빌드 500회)
- Supabase: **무료** (월 5만 reads, 500MB DB) — 일반 영업 사이트엔 차고 넘침
- 도메인: 별도 (가비아/후이즈 등 연 1~2만원)

→ 도메인 연결 안 하면 **연 0원**으로 운영.

---

본 사이트의 코드/UIUX는 `README.md` 참고.
