Cloudflare 从接入到部署：新手也能上手的实战指南与源码示例

发布人：慈云数据-客服中心发布时间：1 天前阅读量：4

Cloudflare 新手入门指南｜附源码

在今天的互联网环境中，网站速度、安全性、稳定性几乎决定了一个产品的第一印象。无论你是个人博客站长、独立开发者，还是正在维护企业官网、API 服务、SaaS 产品，都绕不开一个问题：如何让网站更快、更安全、更稳定地面向全球用户提供访问？

Cloudflare 正是为了解决这些问题而诞生的综合性网络服务平台。它最初以 CDN 和 DNS 服务闻名，后来逐渐发展为集 DNS 解析、CDN 加速、DDoS 防护、WAF 防火墙、SSL/TLS 证书、边缘计算、Serverless 函数、对象存储、零信任访问 等能力于一体的云网络平台。

本文将以新手视角，系统介绍 Cloudflare 的核心功能、接入流程、常见配置方法，并附带一些实用源码示例，帮助你快速上手 Cloudflare。

一、Cloudflare 是什么？

Cloudflare 可以简单理解为位于用户和你的网站服务器之间的一层“智能网络代理”。

传统访问流程如下：

用户浏览器 → 你的服务器

接入 Cloudflare 后，访问流程变为：

用户浏览器 → Cloudflare 全球节点 → 你的服务器

这样做的好处是：

加速访问
静态资源可以缓存在 Cloudflare 全球节点上，用户访问时就近获取内容。
隐藏源站 IP
用户看到的是 Cloudflare 的 IP，而不是你的真实服务器 IP，有助于降低被攻击风险。
防御攻击
Cloudflare 可以拦截恶意请求、DDoS 攻击、爬虫、扫描器等。
自动 HTTPS
Cloudflare 可以免费提供 SSL/TLS 证书，让你的网站支持 HTTPS。
边缘计算能力
通过 Cloudflare Workers，可以在 Cloudflare 边缘节点运行 JavaScript/TypeScript 代码。

二、Cloudflare 适合哪些场景？

Cloudflare 并不只适合大型企业，对个人开发者同样非常友好。常见使用场景包括：

1. 个人博客加速

如果你使用 WordPress、Typecho、Hexo、Hugo、VuePress、Docusaurus 等搭建博客，可以使用 Cloudflare 做 DNS、CDN 和 HTTPS。

2. 静态网站托管

Cloudflare Pages 支持直接从 GitHub、GitLab 自动部署静态网站，非常适合前端项目、文档站、个人主页。

3. API 防护

对于暴露公网的 API，可以使用 Cloudflare 的 WAF、防火墙规则、速率限制等功能减少恶意请求。

4. Serverless 应用

Cloudflare Workers 可以直接部署轻量级接口服务、代理服务、短链接服务、Webhook 服务等。

5. 域名解析管理

Cloudflare 的 DNS 解析速度快、稳定性高，免费套餐也足够满足大多数基础需求。

三、Cloudflare 核心功能概览

在正式接入之前，先了解几个核心概念。

1. DNS 解析

DNS 的作用是把域名解析成 IP 地址。例如：

example.com → 1.2.3.4

Cloudflare 提供免费的权威 DNS 服务。你只需要把域名的 Nameserver 修改为 Cloudflare 提供的地址，即可让 Cloudflare 接管 DNS 解析。

常见记录类型包括：

类型	作用	示例
A	域名指向 IPv4 地址	`example.com → 1.2.3.4`
AAAA	域名指向 IPv6 地址	`example.com → 2400::1`
CNAME	域名指向另一个域名	`www → example.com`
TXT	文本验证记录	SPF、DKIM、站点验证
MX	邮件服务器记录	企业邮箱解析

2. 代理状态：橙色云与灰色云

在 Cloudflare DNS 记录中，你会看到一个云朵图标：

橙色云：Proxied
灰色云：DNS only

它们的区别非常重要。

橙色云 Proxied

表示请求会经过 Cloudflare 代理：

用户 → Cloudflare → 源站服务器

优点：

支持 CDN 缓存
支持 HTTPS
支持 WAF 防护
隐藏源站 IP
支持访问规则和防火墙

适合：

网站首页
静态资源域名
API 网关
Web 应用

灰色云 DNS only

表示 Cloudflare 只负责 DNS 解析，不代理流量：

用户 → 源站服务器

适合：

邮件服务
SSH、FTP 等非 HTTP 服务
某些不适合走代理的业务

3. SSL/TLS 加密模式

Cloudflare 提供多种 SSL/TLS 模式，新手最容易配置错误的就是这里。

常见模式包括：

模式	用户到 Cloudflare	Cloudflare 到源站	是否推荐
Off	HTTP	HTTP	不推荐
Flexible	HTTPS	HTTP	不推荐
Full	HTTPS	HTTPS	可用
Full Strict	HTTPS	HTTPS 且验证证书	推荐

最推荐的方式是：Full Strict。

这要求你的源站服务器也安装有效证书。你可以使用 Let’s Encrypt 免费证书，或者使用 Cloudflare Origin Certificate。

4. CDN 缓存

Cloudflare 可以缓存静态资源，例如：

图片
CSS
JavaScript
字体文件
视频片段
静态 HTML 页面

常见缓存策略包括：

缓存静态资源
对 HTML 不缓存或短时间缓存
对接口 API 不缓存
对后台页面禁用缓存

如果配置得当，可以显著减少源站压力。

5. WAF 防火墙

WAF，即 Web Application Firewall，Web 应用防火墙。它可以帮助你拦截：

SQL 注入
XSS 攻击
恶意扫描
暴力破解
可疑国家或地区流量
非法 User-Agent
高频请求

Cloudflare 免费套餐也提供一些基础安全能力，高级规则需要付费套餐。

6. Cloudflare Workers

Cloudflare Workers 是运行在 Cloudflare 边缘节点上的 Serverless 平台。

它允许你编写 JavaScript 或 TypeScript 代码，在用户请求到达源站之前进行处理。

常见用途包括：

API 代理
鉴权中间件
重定向
A/B 测试
短链接跳转
修改响应头
图片防盗链
简易接口服务

四、Cloudflare 接入网站完整流程

下面以 example.com 为例，介绍如何把一个网站接入 Cloudflare。

第一步：注册 Cloudflare 账号

访问官网：

https://www.cloudflare.com/

注册账号后进入控制台，点击：

Add a site

输入你的域名，例如：

example.com

注意：这里填写根域名，不要填写 https://，也不要填写具体路径。

正确示例：

example.com

错误示例：

https://example.com
example.com/blog
www.example.com

第二步：选择套餐

Cloudflare 提供免费套餐和多个付费套餐。

新手建议先选择：

Free

免费套餐已经包含：

DNS 托管
CDN 加速
基础 DDoS 防护
免费 SSL
基础防火墙规则
Workers 免费额度
Pages 免费额度

对于个人博客、小型站点、测试项目来说，免费套餐已经足够使用。

第三步：导入 DNS 记录

Cloudflare 会自动扫描你域名当前的 DNS 记录，例如：

A     @       1.2.3.4
CNAME www     example.com
MX    @       mail.example.com
TXT   @       v=spf1 ...

你需要检查这些记录是否完整。

常见网站记录如下：

A      @       服务器 IPv4 地址
CNAME  www     example.com

如果你的服务器 IP 是 1.2.3.4，可以配置为：

类型	名称	内容	代理状态
A	@	1.2.3.4	Proxied
CNAME	www	example.com	Proxied

其中 @ 表示根域名：

example.com

www 表示：

www.example.com

第四步：修改域名 Nameserver

Cloudflare 会分配两个 Nameserver，例如：

ada.ns.cloudflare.com
rick.ns.cloudflare.com

你需要登录域名注册商后台，比如：

阿里云
腾讯云
NameSilo
GoDaddy
Namecheap
Porkbun

找到域名的 DNS 或 Nameserver 设置，把原来的 Nameserver 替换为 Cloudflare 提供的两个地址。

修改后通常需要等待一段时间生效：

几分钟 ~ 48 小时

一般来说，几十分钟内就可以完成。

第五步：配置 SSL/TLS

进入 Cloudflare 控制台：

SSL/TLS → Overview

建议选择：

Full (strict)

如果你的源站还没有 HTTPS 证书，可以先用 Full，但不建议长期使用 Flexible。

第六步：开启 HTTPS 自动跳转

进入：

SSL/TLS → Edge Certificates

开启：

Always Use HTTPS

这样用户访问：

http://example.com

会自动跳转到：

https://example.com

同时建议开启：

Automatic HTTPS Rewrites

它可以尝试修复页面中混用 HTTP 资源的问题。

第七步：配置缓存规则

基础设置可以进入：

Caching → Configuration

建议：

Caching Level: Standard
Browser Cache TTL: 4 hours 或更长

对于静态网站，可以考虑使用 Cache Rules 单独配置。

例如缓存所有静态资源：

URI Path contains ".css"
URI Path contains ".js"
URI Path contains ".png"
URI Path contains ".jpg"
URI Path contains ".webp"

缓存时间可以设置为：

Edge TTL: 1 month
Browser TTL: 1 month

五、源站服务器推荐配置

接入 Cloudflare 后，源站服务器也需要做一些优化。

1. Nginx 获取真实 IP

由于请求经过 Cloudflare 代理，源站看到的访问 IP 默认是 Cloudflare 节点 IP，而不是用户真实 IP。

Cloudflare 会通过请求头传递真实 IP：

CF-Connecting-IP

如果你使用 Nginx，可以这样配置：

set_real_ip_from 173.245.48.0/20;
set_real_ip_from 103.21.244.0/22;
set_real_ip_from 103.22.200.0/22;
set_real_ip_from 103.31.4.0/22;
set_real_ip_from 141.101.64.0/18;
set_real_ip_from 108.162.192.0/18;
set_real_ip_from 190.93.240.0/20;
set_real_ip_from 188.114.96.0/20;
set_real_ip_from 197.234.240.0/22;
set_real_ip_from 198.41.128.0/17;
set_real_ip_from 162.158.0.0/15;
set_real_ip_from 104.16.0.0/13;
set_real_ip_from 104.24.0.0/14;
set_real_ip_from 172.64.0.0/13;
set_real_ip_from 131.0.72.0/22;

real_ip_header CF-Connecting-IP;

保存后重载 Nginx：

sudo nginx -t
sudo systemctl reload nginx

2. 限制只有 Cloudflare 可以访问源站

为了避免攻击者绕过 Cloudflare 直接访问你的源站 IP，可以在服务器防火墙中只允许 Cloudflare IP 访问 80 和 443 端口。

以 Ubuntu + UFW 为例：

sudo ufw default deny incoming
sudo ufw default allow outgoing

sudo ufw allow ssh

然后允许 Cloudflare IPv4：

sudo ufw allow from 173.245.48.0/20 to any port 80
sudo ufw allow from 173.245.48.0/20 to any port 443

sudo ufw allow from 103.21.244.0/22 to any port 80
sudo ufw allow from 103.21.244.0/22 to any port 443

sudo ufw allow from 103.22.200.0/22 to any port 80
sudo ufw allow from 103.22.200.0/22 to any port 443

sudo ufw allow from 103.31.4.0/22 to any port 80
sudo ufw allow from 103.31.4.0/22 to any port 443

实际生产环境建议使用脚本定期同步 Cloudflare 官方 IP 列表。

Cloudflare 官方 IP 地址列表：

https://www.cloudflare.com/ips/

六、Cloudflare Workers 入门

Cloudflare Workers 是 Cloudflare 最有特色的功能之一。它可以让你在全球边缘节点运行代码，而不需要自己购买服务器。

1. 第一个 Hello World Worker

以下是一个最简单的 Worker 示例。

export default {
  async fetch(request, env, ctx) {
    return new Response("Hello Cloudflare Workers!", {
      headers: {
        "content-type": "text/plain;charset=UTF-8"
      }
    });
  }
};

当用户访问你的 Worker 路由时，会返回：

Hello Cloudflare Workers!

2. 返回 JSON 接口

你可以用 Workers 快速创建 API。

export default {
  async fetch(request) {
    const data = {
      code: 0,
      message: "success",
      timestamp: Date.now(),
      provider: "Cloudflare Workers"
    };

    return Response.json(data);
  }
};

访问后返回：

{
  "code": 0,
  "message": "success",
  "timestamp": 1710000000000,
  "provider": "Cloudflare Workers"
}

3. 根据路径返回不同内容

export default {
  async fetch(request) {
    const url = new URL(request.url);

    if (url.pathname === "/") {
      return new Response("首页", {
        headers: {
          "content-type": "text/plain;charset=UTF-8"
        }
      });
    }

    if (url.pathname === "/api/time") {
      return Response.json({
        time: new Date().toISOString()
      });
    }

    if (url.pathname === "/about") {
      return new Response("关于我们", {
        headers: {
          "content-type": "text/plain;charset=UTF-8"
        }
      });
    }

    return new Response("404 Not Found", {
      status: 404
    });
  }
};

4. 简单反向代理源码

下面是一个通过 Worker 转发请求的简单代理示例。

假设你希望把请求代理到：

https://api.example.com

源码如下：

const TARGET = "https://api.example.com";

export default {
  async fetch(request) {
    const url = new URL(request.url);
    const targetUrl = new URL(TARGET);

    targetUrl.pathname = url.pathname;
    targetUrl.search = url.search;

    const newRequest = new Request(targetUrl.toString(), {
      method: request.method,
      headers: request.headers,
      body: request.body,
      redirect: "follow"
    });

    return fetch(newRequest);
  }
};

需要注意的是，代理类应用应遵守目标网站规则，不要用于非法用途或绕过访问限制。

5. 给响应添加安全 Header

可以通过 Worker 给网站添加常见安全响应头。

export default {
  async fetch(request) {
    const response = await fetch(request);
    const newResponse = new Response(response.body, response);

    newResponse.headers.set("X-Frame-Options", "DENY");
    newResponse.headers.set("X-Content-Type-Options", "nosniff");
    newResponse.headers.set("Referrer-Policy", "strict-origin-when-cross-origin");
    newResponse.headers.set("Permissions-Policy", "geolocation=(), microphone=(), camera=()");

    return newResponse;
  }
};

这些 Header 可以帮助减少点击劫持、MIME 类型嗅探、隐私泄露等风险。

七、使用 Wrangler 部署 Worker

Wrangler 是 Cloudflare 官方命令行工具，用于开发和部署 Workers。

1. 安装 Node.js

建议安装 Node.js LTS 版本。

检查版本：

node -v
npm -v

2. 创建 Worker 项目

使用 npm 创建项目：

npm create cloudflare@latest my-worker

根据提示选择：

Workers
Hello World
JavaScript 或 TypeScript

进入项目：

cd my-worker

3. 本地开发

启动本地开发服务器：

npm run dev

通常会看到本地地址：

http://localhost:8787

4. 部署到 Cloudflare

npx wrangler login

部署：

npm run deploy

部署成功后，会得到类似地址：

https://my-worker.username.workers.dev

如果绑定自定义域名，可以在 Cloudflare 控制台中配置 Worker Routes 或 Custom Domains。

八、Cloudflare Pages 入门

如果你有一个前端项目，比如 Vue、React、Vite、Next.js 静态导出、Astro、Hugo、Hexo 等，可以使用 Cloudflare Pages 自动部署。

1. Pages 适合部署什么？

适合：

个人主页
博客
文档站
落地页
前端单页应用
静态资源站点

2. 部署流程

基本流程如下：

将项目代码推送到 GitHub
登录 Cloudflare 控制台
进入 Workers & Pages
创建 Pages 项目
连接 GitHub 仓库
设置构建命令和输出目录
点击部署

3. Vite 项目配置示例

如果你的项目是 Vite，通常配置如下：

Build command: npm run build
Build output directory: dist

package.json 示例：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vitejs/plugin-vue": "latest",
    "vite": "latest",
    "vue": "latest"
  },
  "devDependencies": {}
}

4. React 项目配置示例

Build command: npm run build
Build output directory: build

如果是 Vite React，则输出目录一般是：

dist

5. Vue Router 刷新 404 问题

如果你使用 Vue Router 的 history 模式，刷新页面可能出现 404。可以在项目的 public 目录下创建 _redirects 文件：

/* /index.html 200

部署后，所有路径都会回退到 index.html，由前端路由接管。

九、常见安全配置推荐

Cloudflare 的安全配置非常丰富，新手可以先从以下设置开始。

1. 开启 Bot Fight Mode

路径：

Security → Bots

开启：

Bot Fight Mode

它可以帮助阻挡部分自动化机器人请求。

2. 设置安全级别

路径：

Security → Settings

建议：

Security Level: Medium

如果你的网站经常被攻击，可以临时调整为：

High

3. 开启 Under Attack Mode

当网站遭遇明显攻击时，可以开启：

Under Attack Mode

开启后，访问者会先经过 Cloudflare 的浏览器检查页面，再进入网站。

不建议长期打开，因为会影响用户体验。

4. 创建防火墙规则

例如阻止特定 User-Agent：

http.user_agent contains "BadBot"

动作为：

Block

再例如只允许特定国家访问后台：

http.request.uri.path contains "/admin"
and ip.geoip.country ne "CN"

动作为：

Block

以上规则只是示例，实际配置需要结合业务情况。

十、常见问题与解决方案

1. 接入后网站打不开

可能原因：

DNS 记录配置错误
源站服务器没有运行
防火墙阻止了 Cloudflare IP
SSL/TLS 模式选择错误

建议检查：

ping example.com
curl -I https://example.com

2. 出现 525 SSL Handshake Failed

原因通常是 Cloudflare 无法和源站建立 HTTPS 连接。

解决方法：

检查源站证书是否有效
检查 Nginx/Apache 是否正确监听 443
SSL/TLS 模式改为 Full 或 Full Strict
确认源站支持 SNI

3. 出现 521 Web Server Is Down

表示 Cloudflare 无法连接源站服务器。

常见原因：

源站宕机
防火墙拦截 Cloudflare
Web 服务未启动
服务器端口未开放

检查命令：

sudo systemctl status nginx
sudo ss -tulpn | grep 443
sudo ufw status

4. 修改内容后页面不更新

可能是缓存导致。

解决方法：

进入：

Caching → Configuration → Purge Cache

可以选择：

Purge Everything

也可以只清理指定 URL。

5. 后台登录异常

如果你的网站后台需要实时交互，建议对后台路径禁用缓存。

例如：

example.com/admin/*
example.com/wp-admin/*
example.com/login/*

创建 Cache Rule：

Bypass cache

十一、实用 Worker 源码：短链接服务

下面提供一个简单的短链接 Worker 示例。它通过对象映射实现短链接跳转。

const links = {
  "/github": "https://github.com/",
  "/cloudflare": "https://www.cloudflare.com/",
  "/blog": "https://example.com/blog"
};

export default {
  async fetch(request) {
    const url = new URL(request.url);
    const target = links[url.pathname];

    if (target) {
      return Response.redirect(target, 302);
    }

    return new Response("短链接不存在", {
      status: 404,
      headers: {
        "content-type": "text/plain;charset=UTF-8"
      }
    });
  }
};

访问：

https://你的域名/github

会跳转到：

https://github.com/

这个版本适合学习。如果需要正式使用，可以结合 Cloudflare KV 存储短链接数据。

十二、实用 Worker 源码：IP 查询接口

这个接口可以返回访问者 IP、国家、城市等 Cloudflare 提供的信息。

export default {
  async fetch(request) {
    const ip = request.headers.get("CF-Connecting-IP") || "";
    const country = request.cf?.country || "";
    const city = request.cf?.city || "";
    const colo = request.cf?.colo || "";

    return Response.json({
      ip,
      country,
      city,
      colo,
      userAgent: request.headers.get("User-Agent")
    });
  }
};

返回示例：

{
  "ip": "203.0.113.10",
  "country": "CN",
  "city": "Shanghai",
  "colo": "HKG",
  "userAgent": "Mozilla/5.0 ..."
}

十三、Cloudflare 使用建议

对于新手来说，建议按照以下优先级使用 Cloudflare：

先用 DNS 托管
开启 HTTPS
开启 CDN 代理
配置基础缓存
配置真实 IP
保护源站 IP
根据需求使用 Workers
静态项目使用 Pages
遇到攻击时再调整安全策略

不要一开始就打开所有功能，尤其是缓存规则、防火墙规则和重写规则。配置过度反而可能造成网站异常。

十四、总结

Cloudflare 是一个非常适合新手和专业开发者使用的平台。它既可以作为简单的 DNS 和 CDN 工具，也可以作为完整的边缘云平台。对于个人站长来说，Cloudflare 免费套餐已经能够带来明显收益：更快的访问速度、更稳定的 DNS、更方便的 HTTPS、更基础的安全防护。

如果你是第一次使用 Cloudflare，建议从以下几个步骤开始：

添加域名 → 修改 Nameserver → 检查 DNS → 开启 HTTPS → 设置缓存 → 测试访问

当你熟悉基础功能后，可以进一步学习 Cloudflare Workers、Pages、KV、R2、D1 等产品，把 Cloudflare 从“网站加速工具”升级为“边缘应用平台”。

本文附带的 Worker 源码示例，如 Hello World、JSON API、反向代理、短链接服务、IP 查询接口，都可以直接复制到 Cloudflare Workers 中运行。通过这些示例，你可以快速理解 Cloudflare 的边缘计算能力，并逐步构建自己的轻量级云应用。

文章标签： Cloudflare DNS CDN Workers

上一篇：从域名接入到 Tunnel 部署：Cloudflare 新手实战手册（命令版）

下一篇：第一次用 Cloudflare？从域名解析到 HTTPS 的完整上手指南

更多栏目

新闻动态

文档中心

下载中心

目录结构

全文

产品与服务

新闻帮助

生态合作

了解我们