OCV - Cloudflare Pages CSR Fullstack Template

Cloudflare Pages CSR 풀스택 템플릿을 빠르게 생성하는 CLI 도구입니다.

기술 스택

• Frontend: Vite + React + TypeScript
• Routing: TanStack Router
• UI: Shadcn UI + Tailwind CSS
• Backend: Cloudflare Workers
• Database: Cloudflare D1 (SQLite)
• ORM: Drizzle ORM

설치 및 사용

프로젝트 생성

# 기본 사용 (Cloudflare 계정 정보 없이)
npx ocv-cfcsr init --name my-project

# Cloudflare 계정 ID와 함께
npx ocv-cfcsr init --name my-project --account-id YOUR_ACCOUNT_ID

옵션

• -n, --name <프로젝트명> (필수): 생성할 프로젝트 이름
• -a, --account-id <계정ID> (선택): Cloudflare 계정 ID

생성 후 다음 단계

cd my-project

# 의존성 설치
pnpm install

# 프로젝트 빌드
pnpm build

# DB 스키마 생성
pnpm db:generate

# 로컬 DB 마이그레이션
pnpm db:migrate:local

# 개발 서버 실행
pnpm dev

Cloudflare 배포

1. Cloudflare 계정 ID 확인

Cloudflare Dashboard에서 계정 ID를 확인하거나:

wrangler whoami

2. wrangler.jsonc 설정

생성 시 --account-id를 제공하지 않았다면, wrangler.jsonc 파일에서 계정 ID를 설정하세요:

{
  "account_id": "YOUR_ACCOUNT_ID"
}

3. D1 데이터베이스 생성

# 원격 D1 데이터베이스 생성
wrangler d1 create my-project-db

# 출력된 database_id를 wrangler.jsonc에 설정

4. 원격 마이그레이션

pnpm db:migrate:remote

5. 배포

pnpm deploy

프로젝트 구조

my-project/
├── src/              # React 프론트엔드
│   ├── components/   # UI 컴포넌트
│   ├── pages/        # 페이지 컴포넌트
│   ├── routes/       # 라우트 설정
│   └── db/           # DB 스키마
├── worker/           # Cloudflare Worker (백엔드)
├── migrations/       # DB 마이그레이션
├── public/           # 정적 파일
├── wrangler.jsonc    # Cloudflare 설정
└── package.json

개발 명령어

pnpm dev                    # 개발 서버 (port 5173)
pnpm build                  # 프로덕션 빌드
pnpm preview                # 빌드 미리보기
pnpm deploy                 # Cloudflare 배포
pnpm lint                   # 코드 린트

pnpm db:generate            # DB 스키마 생성
pnpm db:migrate:local       # 로컬 DB 마이그레이션
pnpm db:migrate:remote      # 원격 DB 마이그레이션

NPM 퍼블리싱

이 프로젝트를 NPM에 퍼블리시하려면:

# NPM 로그인
npm login

# 패치 버전 릴리스
npm run release:patch

# 마이너 버전 릴리스
npm run release:minor

# 메이저 버전 릴리스
npm run release:major

도움말

npx ocv-cfcsr --help
npx ocv-cfcsr init --help

라이센스

MIT