徐旺的个人博客

一个 9.8 年开发经验即将被AI取代的前端牛马，热爱开源，喜欢分享

Next.js 博客部署到 Cloudflare Pages

文章
一条命令完成构建和部署，通过 publish.js 脚本自动读取 .env 配置，支持多设备同步部署。

方案概述

通过 scripts/publish.js 实现一键部署：自动读取 .env 中的配置，完成构建 → 目录重组 → 上传，全程无需手动敲命令。

在线预览： https://1fff46f0.xuwang-62j.pages.dev

部署流程

npm run build          ← Next.js 构建 + 目录重组
        ↓
wrangler pages deploy  ← 上传到 Cloudflare Pages CDN

详细步骤

1. 创建 Cloudflare API Token

  1. 打开 https://dash.cloudflare.com/profile/api-tokens
  2. Create Token → Get a custom token → Create Custom Token
  3. 权限配置：
    • Account permissions：Account Settings → Read
    • Cloudflare Pages：Edit
  4. 创建后复制 Token

2. 获取 Account ID

在终端运行（把 <Token> 换成上一步的 Token）：

curl -H "Authorization: Bearer <Token>" https://api.cloudflare.com/client/v4/accounts

返回结果中 result[].id 即为 Account ID，复制备用。

3. 配置 .env 文件

# 在项目根目录创建 .env（不要提交到 Git）
CLOUDFLARE_API_TOKEN=cfut_your_token_here
CLOUDFLARE_ACCOUNT_ID=your_account_id_here

.env 已在 .gitignore 中，不会被提交到 Git。

4. 安装 Wrangler CLI

npm install -g wrangler

5. 配置 wrangler.toml

name = "xuwang"
pages_build_output_dir = "dist"
compatibility_date = "2024-01-01"

Wrangler 4 不再支持在 wrangler.toml 中写 account_id，改由环境变量或命令行传入。

6. 一键部署

node scripts/publish.js

脚本会自动读取 .env，依次执行构建和部署。成功后会输出：

🚀 开始发布到 Cloudflare Pages
📦 步骤 1/2：运行构建...
🌎 步骤 2/2：上传到 Cloudflare Pages...
✅ 发布完成！

换电脑后的操作

# 1. 克隆仓库
git clone https://github.com/xuwangxx/xuwang.git

# 2. 安装依赖
npm install

# 3. 配置 Token
cp .env.example .env
# 编辑 .env，填入真实 Token 和 Account ID

# 4. 部署
node scripts/publish.js

关键文件说明

| 文件 | 作用 | |------|------| | scripts/publish.js | 一键部署脚本（构建 + 上传） | | scripts/cf-pages-deploy.js | 构建后将 .next/ 重组为 dist/ | | next.config.js | webpack.cache=false 解决 25MB 限制 | | wrangler.toml | Wrangler 项目配置 | | .env | API Token 和 Account ID（本地，不提交） | | .env.example | 配置模板（占位符，已提交 Git） |

遇到的问题与解决

Wrangler 提示 account_id 未找到

原因： Wrangler 4 不再支持 wrangler.toml 中的 account_id 字段。

解决： Account ID 通过环境变量传入，由 publish.js 自动完成，无需手动配置。

提示 account_id 权限不足

原因： Token 缺少 Account Settings Read 权限。

解决： 重新创建 Token，确保勾选 Account Settings → Read。

部署后页面 404

原因： Next.js 的 .next/server/pages/ 结构与 Cloudflare Pages 不兼容。

解决： cf-pages-deploy.js 已自动将 HTML 重组到 dist/ 根目录，无需手动处理。

成本

  • Cloudflare Pages：免费（无限带宽，无限请求）
  • Wrangler CLI：免费
  • 自定义域名（可选）：约 ¥60/年

相关文件

  • next.config.js — Next.js 配置
  • scripts/publish.js — 一键部署脚本
  • scripts/cf-pages-deploy.js — 目录重组脚本
  • wrangler.toml — Wrangler 配置文件
  • .env.example — 配置模板

评论