🚀 代码提交到 Cloudflare 部署流程

📋 前置条件

本地开发
→
Git 提交
→
GitHub
→
Cloudflare →
自动部署

1 准备本地项目

1.1 初始化 Git 仓库

# 在项目根目录执行 git init git add . git commit -m "Initial commit"

1.2 创建必要的配置文件

# 创建 README.md echo "# 项目名称" > README.md # 创建 .gitignore echo "node_modules/ .env dist/ build/" > .gitignore

2 推送到 GitHub

2.1 在 GitHub 创建仓库

  1. 登录 GitHub
  2. 点击 "New repository"
  3. 填写仓库名称
  4. 选择 Public 或 Private
  5. 不要初始化 README（本地已有）

2.2 连接并推送代码

# 添加远程仓库 git remote add origin https://github.com/用户名/仓库名.git # 推送代码 git branch -M main git push -u origin main

3 配置 Cloudflare Pages

3.1 登录 Cloudflare Dashboard

  1. 访问 dash.cloudflare.com
  2. 登录账户
  3. 选择 "Pages" 服务

3.2 创建新项目

  1. 点击 "Create a project"
  2. 选择 "Connect to Git"
  3. 授权 GitHub 访问权限
  4. 选择要部署的仓库

3.3 配置构建设置

静态网站配置：

Framework preset: None Root directory: / (留空) Build command: (留空) Build output directory: (留空或 /dist)

React/Vue 项目配置：

Framework preset: Create React App / Vue.js Build command: npm run build Build output directory: /build 或 /dist

Node.js 应用配置：

Framework preset: None Build command: npm install && npm run build Build output directory: /dist

4 环境变量配置

4.1 设置环境变量

# 在 Cloudflare Pages 设置中添加 NODE_ENV=production API_URL=https://api.example.com DATABASE_URL=your_database_url

4.2 创建环境变量文件

# 在项目根目录创建 .env.example NODE_ENV=development API_URL=http://localhost:3000 # 复制为 .env 并填入实际值 cp .env.example .env

5 自动化部署配置

5.1 GitHub Actions 工作流

# 创建 .github/workflows/deploy.yml name: Deploy to Cloudflare Pages on: push: branches: [ main ] pull_request: branches: [ main ] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: '18' cache: 'npm' - name: Install dependencies run: npm ci - name: Build run: npm run build - name: Deploy to Cloudflare Pages uses: cloudflare/pages-action@v1 with: apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} projectName: your-project-name directory: dist

5.2 配置 GitHub Secrets

  1. 进入 GitHub 仓库 Settings
  2. 选择 "Secrets and variables" > "Actions"
  3. 添加以下 Secrets：
  • CLOUDFLARE_API_TOKEN: Cloudflare API Token
  • CLOUDFLARE_ACCOUNT_ID: Cloudflare Account ID

6 测试部署

6.1 手动触发部署

# 修改代码后提交 git add . git commit -m "Test deployment" git push origin main

6.2 监控部署状态

  • 在 Cloudflare Dashboard 查看部署日志
  • 在 GitHub Actions 查看构建状态
  • 访问生成的 URL 验证部署结果

7 高级配置

7.1 自定义域名

# 在 Cloudflare Pages 项目设置中 1. 点击 "Custom domains" 2. 添加域名（如：app.yourdomain.com） 3. 配置 DNS 记录 4. 启用 SSL/TLS

7.2 重定向规则

# 创建 _redirects 文件 /* /index.html 200 /api/* https://api.example.com/:splat 301

7.3 缓存策略

# 创建 _headers 文件 /assets/* Cache-Control: public, max-age=31536000, immutable /*.html Cache-Control: public, max-age=0, must-revalidate

💡 最佳实践

  • 使用分支策略：main 用于生产，develop 用于开发
  • 设置预览部署：每个 PR 自动生成预览链接
  • 配置构建缓存：减少构建时间
  • 使用环境特定配置：区分开发和生产环境
  • 监控部署状态：设置错误通知

⚠️ 常见问题

  • 构建失败：检查 package.json 和构建命令
  • 部署超时：优化构建过程，减少依赖
  • 404 错误：检查输出目录配置
  • 环境变量：确保所有必要变量已配置
  • 权限问题：检查 GitHub 和 Cloudflare 权限设置

8 常用命令参考

8.1 Git 命令

# 查看状态 git status # 查看提交历史 git log --oneline # 撤销最后提交 git reset --soft HEAD~1 # 强制推送（谨慎使用） git push --force-with-lease origin main

8.2 Cloudflare Wrangler 命令

# 安装 Wrangler npm install -g wrangler # 登录 Cloudflare wrangler auth login # 部署项目 wrangler pages deploy dist --project-name=my-project # 预览本地 wrangler pages dev dist