Next.js 项目部署到 Cloudflare Pages 标准操作流程 (SOP)

Next.js 项目部署到 Cloudflare Pages 标准操作流程 (SOP)

一、项目准备

1. Next.js 项目配置

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 启用 Cloudflare 兼容性
  output: 'standalone',
  images: {
    unoptimized: true,
    // 配置允许的图片域名
    domains: ['images.unsplash.com'],
  },
}

module.exports = nextConfig

2. 添加必要的构建脚本

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

3. 环境变量配置

NEXT_PUBLIC_SITE_URL=https://biobio.top

二、Cloudflare 配置

1. DNS 设置

• 添加域名记录：

  Type: CNAME
  Name: biobio.top
  Target: custom-domain.pages.dev
  Proxy status: Proxied
  

2. Pages 项目设置

1. 创建新项目：

   • 进入 Cloudflare Dashboard
   • 选择 Pages > Create a project
   • 选择 "Connect to Git"

2. 构建设置：

   Framework preset: Next.js
   Build command: npm run build
   Build output directory: .next
   Node.js version: 18.x
   

3. 环境变量设置：

   NODE_VERSION: 18
   NEXT_PUBLIC_SITE_URL: https://biobio.top
   

三、部署配置文件

1. 路由配置

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  // 自定义中间件逻辑
  return NextResponse.next()
}
 
export const config = {
  matcher: '/:path*',
}

2. 自定义 Headers

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Strict-Transport-Security: max-age=31536000; includeSubDomains

四、部署步骤

1. 初始部署

1. 提交代码到 GitHub
2. Cloudflare 自动触发构建
3. 验证部署状态

2. 域名配置

1. 添加自定义域名：
   • Pages > 你的项目 > Custom domains
   • 添加 biobio.top
2. 等待 SSL 证书自动配置

3. 部署验证

• 检查项目访问：https://biobio.top
• 验证 SSL 证书
• 测试所有路由

五、性能优化

1. 缓存策略

export function generateHeaders() {
  return {
    'Cache-Control': 'public, max-age=3600, s-maxage=86400',
  }
}

2. 图片优化

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './image-loader.js',
  }
}

六、监控和维护

1. 性能监控

• 启用 Cloudflare Analytics
• 配置 Web Vitals 监控

2. 错误处理

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    </p>
  )
}

七、安全配置

1. 安全 Headers

const securityHeaders = [
  {
    key: 'X-DNS-Prefetch-Control',
    value: 'on'
  },
  {
    key: 'X-XSS-Protection',
    value: '1; mode=block'
  }
]

module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: securityHeaders,
      },
    ]
  },
}

2. 环境变量保护

# 公共变量
NEXT_PUBLIC_API_URL=https://api.biobio.top

# 私有变量（不要提交到代码库）
API_SECRET_KEY=your-secret-key

八、常见问题处理

1. 构建失败

• 检查 Node.js 版本
• 验证依赖项
• 查看构建日志

2. 路由问题

• 确认 middleware 配置
• 检查页面路由定义
• 验证动态路由配置

九、最佳实践

1. 开发流程

• 使用 feature 分支开发
• 提交前本地构建测试
• 使用 Preview 部署验证

2. 性能优化

• 启用页面预渲染
• 配置适当的缓存策略
• 优化图片和静态资源

3. 监控告警

• 配置性能监控
• 设置错误告警
• 定期检查日志

十、备忘录

1. 重要链接

• 项目仓库：github.com/wincatcher/biobio.top
• 生产环境：https://biobio.top
• Cloudflare Dashboard：dash.cloudflare.com

2. 常用命令

# 本地开发
npm run dev

# 构建测试
npm run build

# 依赖更新
npm update

# 清理缓存
npm clean cache

3. 检查清单

• SSL 证书状态
• DNS 记录配置
• 环境变量设置
• 缓存策略验证
• 性能监控配置