# Cloudflare Pages 完整部署教程：从入门到高级配置

Cloudflare Pages 完整部署教程：从入门到高级配置

🌟 前言

在当今快速发展的互联网时代，静态网站因其出色的性能、安全性和成本效益而备受青睐。Cloudflare Pages 作为一款现代化的静态网站托管平台，提供了全球 CDN 加速、自动 HTTPS、持续集成等强大功能，让开发者能够轻松部署和管理静态网站。本教程将带你全面掌握 Cloudflare Pages 的使用方法，从基础部署到高级配置，助你构建高性能的现代化网站。

什么是 Cloudflare Pages？

Cloudflare Pages 是一个基于 JAMstack 架构的静态网站托管平台，具有以下核心优势：

  • 全球 CDN 加速：利用 Cloudflare 的全球网络，确保网站快速加载
  • 自动化部署：与 Git 仓库无缝集成，实现持续部署
  • 无限带宽：无需担心流量费用
  • 自定义域名：支持绑定自己的域名并自动配置 SSL
  • 环境变量：灵活管理不同环境的配置
  • 预览部署：每个 Pull Request 都会生成预览版本

准备工作

在开始部署之前，你需要准备：

  1. Cloudflare 账户（免费版即可）
  2. GitHub、GitLab 或 Bitbucket 账户
  3. 静态网站项目（可以是 HTML/CSS/JS 或使用静态站点生成器）

✨ 项目一：基础静态网站部署

步骤 1：创建示例项目

首先，我们创建一个简单的静态网站作为演示：

1
2
3
4
5
6
7
# 创建项目目录
mkdir my-static-site
cd my-static-site

# 创建基础文件
mkdir css js images
touch index.html about.html css/style.css js/main.js

创建 index.html 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的静态网站</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section class="hero">
            <h1>欢迎来到我的网站</h1>
            <p>这是一个使用 Cloudflare Pages 部署的静态网站示例</p>
            <button id="cta-button">了解更多</button>
        </section>
        
        <section class="features">
            <div class="feature">
                <h3>快速</h3>
                <p>全球 CDN 加速</p>
            </div>
            <div class="feature">
                <h3>安全</h3>
                <p>自动 HTTPS 加密</p>
            </div>
            <div class="feature">
                <h3>可靠</h3>
                <p>99.99% 可用性保证</p>
            </div>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2024 我的网站. 保留所有权利.</p>
    </footer>
    
    <script src="js/main.js"></script>
</body>
</html>

创建 css/style.css 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

header {
    background: #2c3e50;
    color: white;
    padding: 1rem 0;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

nav a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

nav a:hover {
    color: #3498db;
}

.hero {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

#cta-button {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1.1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

#cta-button:hover {
    background: #c0392b;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature {
    text-align: center;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

footer {
    background: #34495e;
    color: white;
    text-align: center;
    padding: 2rem 0;
    margin-top: 2rem;
}

创建 js/main.js 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
document.addEventListener('DOMContentLoaded', function() {
    const ctaButton = document.getElementById('cta-button');
    
    if (ctaButton) {
        ctaButton.addEventListener('click', function() {
            alert('欢迎了解 Cloudflare Pages 的强大功能！');
        });
    }
    
    // 添加简单的动画效果
    const features = document.querySelectorAll('.feature');
    features.forEach((feature, index) => {
        feature.style.opacity = '0';
        feature.style.transform = 'translateY(20px)';
        
        setTimeout(() => {
            feature.style.transition = 'all 0.6s ease';
            feature.style.opacity = '1';
            feature.style.transform = 'translateY(0)';
        }, index * 200);
    });
});

步骤 2：初始化 Git 仓库并推送到 GitHub

1
2
3
4
5
6
7
8
9
# 初始化 Git
git init
git add .
git commit -m "初始提交：基础静态网站"

# 推送到 GitHub（请提前在 GitHub 创建仓库）
git remote add origin https://github.com/你的用户名/my-static-site.git
git branch -M main
git push -u origin main

步骤 3：在 Cloudflare Pages 中部署

  1. 登录 Cloudflare Dashboard，进入 Pages 页面
  2. 点击 “创建项目”，选择 “连接到 Git”
  3. 选择你的 Git 提供商（GitHub、GitLab 或 Bitbucket）
  4. 授权 Cloudflare 访问你的仓库
  5. 选择刚刚创建的 my-static-site 仓库
  6. 在配置页面：
    • 项目名称：my-static-site
    • 生产分支：main
    • 构建命令：留空（因为是纯静态文件）
    • 构建输出目录：留空（根目录）
  7. 点击 “保存并部署”

部署完成后，Cloudflare Pages 会提供一个类似 https://my-static-site.pages.dev 的访问地址。

👋 项目二：使用静态站点生成器（Next.js）

对于更复杂的项目，我们可以使用静态站点生成器。以下以 Next.js 为例：

步骤 1：创建 Next.js 项目

1
2
3
# 创建 Next.js 项目
npx create-next-app@latest my-nextjs-site
cd my-nextjs-site

步骤 2：配置 Next.js 为静态导出

修改 next.config.js：

1
2
3
4
5
6
7
8
9
10
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true
  }
}

module.exports = nextConfig

更新 package.json 的构建脚本：

1
2
3
4
5
6
7
8
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  }
}

步骤 3：创建示例页面

创建 pages/about.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import Head from 'next/head'

export default function About() {
  return (
    <div>
      <Head>
        <title>关于我们 - My Next.js Site</title>
        <meta name="description" content="关于我们的页面" />
      </Head>
      
      <main style={{ padding: '2rem' }}>
        <h1>关于我们</h1>
        <p>这是一个使用 Next.js 和 Cloudflare Pages 构建的静态网站。</p>
        
        <section style={{ marginTop: '2rem' }}>
          <h2>技术栈</h2>
          <ul>
            <li>Next.js - React 框架</li>
            <li>Cloudflare Pages - 部署平台</li>
            <li>Git - 版本控制</li>
          </ul>
        </section>
      </main>
    </div>
  )
}

步骤 4：部署配置

在项目根目录创建 _redirects 文件（用于处理客户端路由）：

1
/* /index.html 200

创建 functions/_redirects.js（高级重定向配置）：

1
2
3
4
5
6
7
8
9
export function onRequest(context) {
  // 添加安全头
  const response = await context.next()
  response.headers.set('X-Frame-Options', 'DENY')
  response.headers.set('X-Content-Type-Options', 'nosniff')
  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin')
  
  return response
}

步骤 5：部署到 Cloudflare Pages

  1. 将代码推送到 GitHub 仓库
  2. 在 Cloudflare Pages 中创建新项目
  3. 构建配置：
    • 框架预设：Next.js
    • 构建命令：npm run build
    • 构建输出目录：out
  4. 添加环境变量（如果需要）：
    • NODE_VERSION: 18
  5. 点击部署

👋 高级配置和优化

1. 自定义域名配置

在 Pages 项目设置中，可以添加自定义域名：

  1. 进入项目的 “自定义域名” 设置
  2. 添加你的域名（例如 www.example.com）
  3. 按照提示在 DNS 中添加 CNAME 记录
  4. Cloudflare 会自动配置 SSL 证书

2. 环境变量管理

在项目设置中配置环境变量：

  • 生产环境变量：用于生产部署
  • 预览环境变量：用于 PR 预览部署

示例环境变量：

1
2
3
API_URL=https://api.example.com
ANALYTICS_ID=UA-XXXXX-Y
ENVIRONMENT=production

3. 构建优化配置

创建 _headers 文件优化缓存策略：

1
2
3
4
5
6
7
8
9
10
11
/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Cache-Control: public, max-age=3600

/fonts/*
  Cache-Control: public, max-age=31536000, immutable

/assets/*
  Cache-Control: public, max-age=31536000, immutable

4. 使用 Cloudflare Functions

创建 functions/api/hello.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export async function onRequest(context) {
  const { request } = context;
  
  if (request.method === 'GET') {
    return new Response(JSON.stringify({
      message: 'Hello from Cloudflare Pages Functions!',
      timestamp: new Date().toISOString()
    }), {
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
      }
    });
  }
  
  return new Response('Method not allowed', { status: 405 });
}

5. 图片优化配置

创建 wrangler.toml 配置文件：

1
2
3
4
5
6
name = "my-nextjs-site"
compatibility_date = "2023-10-01"

[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "my-images-bucket"

✨ 性能监控和 Analytics

Cloudflare Pages 集成了 Web Analytics，无需额外代码即可监控网站性能：

  1. 在 Pages 项目设置中启用 Analytics
  2. 查看关键指标：页面浏览量、核心 Web 指标等
  3. 使用 Real User Monitoring (RUM) 进行性能分析

故障排除和常见问题

1. 构建失败

问题：构建过程中出现错误
解决方案：

  • 检查构建日志中的具体错误信息
  • 确保 package.json 中的依赖项正确
  • 验证 Node.js 版本兼容性

2. 路由问题

问题：客户端路由返回 404
解决方案：

  • 确保正确配置了 _redirects 文件
  • 对于 SPA，添加 /* /index.html 200

3. 环境变量未生效

问题：环境变量在构建时未正确注入
解决方案：

  • 检查环境变量名称是否正确
  • 确保在正确的环境（生产/预览）中设置
  • 重新触发部署

最佳实践

  1. 使用语义化版本控制：遵循 Conventional Commits 规范
  2. 实施代码审查：利用预览部署进行测试
  3. 监控性能：定期检查 Core Web Vitals
  4. 安全加固：配置适当的安全头
  5. 备份策略：定期备份重要数据和配置

✨ 结语

Cloudflare Pages 为静态网站部署提供了强大而灵活的解决方案。通过本教程，你已经学会了从基础静态网站到复杂 Next.js 应用的部署方法，掌握了高级配置和优化技巧。无论是个人博客、企业官网还是复杂的 Web 应用，Cloudflare Pages 都能提供出色的性能和可靠性。

随着 JAMstack 架构的普及，掌握 Cloudflare Pages 这样的现代化部署平台将成为前端开发者的重要技能。现在就开始你的 Cloudflare Pages 之旅，构建更快、更安全、更可靠的网站吧！

[up主专用，视频内嵌代码贴在这]