部署方案：Cloudflare Pages + 未来 CMS 架构演进

[deepracticexs]

DeepracticeX 部署方案

核心选择：Cloudflare Pages

选择 Cloudflare 作为主要部署平台，基于以下优势：

• 无限带宽：免费套餐无流量限制
• 全球 CDN：性能最佳，中国访问友好
• 生态完整：Pages + Workers + R2 + KV 一站式解决方案
• 成本极低：基本免费，扩展成本可控

当前阶段：纯静态部署

部署配置

// 构建配置
{
  "buildCommand": "npm run build",
  "buildDirectory": "build",
  "envVariables": {
    "NODE_VERSION": "18"
  }
}

域名配置

• 主域名：
• 预览域名：
• DNS 设置：CNAME 指向 pages.dev

CI/CD 流程

# .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
        uses: actions/setup-node@v3
        with:
          node-version: 18
          
      - name: Install and Build
        run: |
          npm ci
          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: deepracticex
          directory: build
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

未来演进：CMS 集成方案

架构设计

graph TD
    subgraph "内容管理"
        A[Strapi CMS<br/>Railway 部署]
    end
    
    subgraph "构建层"
        B[GitHub Actions]
        C[Webhook 触发]
    end
    
    subgraph "部署层"
        D[Cloudflare Pages<br/>静态内容]
        E[Cloudflare Workers<br/>API 代理]
    end
    
    subgraph "存储层"
        F[Cloudflare R2<br/>媒体文件]
        G[Cloudflare KV<br/>缓存]
    end
    
    A -->|发布| C
    C --> B
    B --> D
    A -->|API| E
    E --> G
    A -->|上传| F
    D -->|引用| F

Loading

实施阶段

第一阶段（当前）

• Docusaurus + Markdown 文件
• GitHub 触发自动部署
• Cloudflare Pages 静态托管

第二阶段（3个月后）

• 引入 Headless CMS（Strapi/Directus）
• Webhook 触发重新构建
• 保持静态生成模式

第三阶段（6个月后）

• Cloudflare Workers 处理动态 API
• R2 存储媒体文件
• KV 实现边缘缓存

技术选型理由

1. Headless CMS + 静态生成

   • 前端保持静态，性能最优
   • CMS 独立部署，安全性高
   • 编辑体验好，技术债务低

2. Cloudflare 全家桶

   • 生态统一，维护简单
   • 成本可控（/bin/zsh-5/月）
   • 扩展性强

性能优化配置

Cloudflare 设置

Page Rules:
- Cache Level: Cache Everything
- Edge Cache TTL: 1 month
- Browser Cache TTL: 4 hours

Transform Rules:
- /blog → /blog/
- /docs → /docs/

缓存策略

• HTML: no-cache（实时更新）
• JS/CSS: 1年（文件名带 hash）
• 图片: 1个月
• API 响应: 5分钟（KV 缓存）

监控方案

• Cloudflare Web Analytics（隐私友好）
• Real User Monitoring（性能监控）
• Error Tracking（错误追踪）

成本预估

• 当前阶段: /bin/zsh/月（纯静态）
• CMS 阶段: -10/月（CMS 托管）
• 完整方案: -20/月（包含所有服务）

实施步骤

1. 配置 Cloudflare Pages 项目
2. 设置 GitHub 集成
3. 配置自定义域名
4. 优化构建设置
5. 设置分支预览
6. 配置性能规则

---

相关链接：

• Cloudflare Pages 文档
• Docusaurus 部署指南