cloudflare opennext 배포법

nextjs를 vercel에 배포했었는데

가격이 좀 비싸다...

그래서 cloudflare 에 배포하는 법을 찾음

 

npx wrangler login

 

Next.js + Cloudflare Workers 프로젝트 생성부터 배포까지
1. 프로젝트 생성 (Cloudflare 전용)
npm create cloudflare@latest my-app -- --framework=next
또는
npx create-cloudflare@latest my-app --framework=next
이 명령어 하나로:

✅ Next.js 프로젝트 생성
✅ @opennextjs/cloudflare 자동 설치
✅ wrangler.jsonc
 자동 생성
✅ 
open-next.config.ts
 자동 생성
✅ package.json에 deploy, preview 스크립트 추가

2. 로컬 개발
cd my-app
npm run dev

 

3. Cloudflare 로그인
npx wrangler login

 

4. 배포
방법 A: 로컬에서 직접 배포 (리눅스/Mac 권장)
bash
npm run deploy
방법 B: GitHub Actions 자동 배포 (Windows 권장)
Cloudflare에서 API 토큰 생성
API 토큰 페이지 → Create Token → Edit Cloudflare Workers 템플릿 사용
GitHub Secrets 등록
CLOUDFLARE_API_TOKEN: 생성한 토큰
CLOUDFLARE_ACCOUNT_ID: 대시보드 URL에서 확인

 

.github/workflows/deploy.yml 생성

-----------------------
name: Deploy to Cloudflare
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm ci
      - run: npm run deploy
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

----------------------------

Push하면 자동 배포
git add .
git commit -m "Deploy"
git push origin main

 

5. 배포 완료
https://[프로젝트명].[서브도메인].workers.dev 에서 확인!