用Codex从零搭建独立站：WordPress+Next.js+Cloudflare实战

项目背景与技术选型思路

拥有20年开发经验的程序员翟路嘉（网名Midhill）在B站直播中，完整演示了如何使用OpenAI Codex作为AI编程助手，从零开始规划和启动一个海外独立站项目。这个项目的需求来自一位汽车轮毂经销商，希望搭建一个面向海外市场的电商独立站。

整个技术架构的核心思路是：WordPress作为Headless CMS提供后台管理和API，Next.js作为前端框架部署到Cloudflare Worker上。这种架构兼顾了WordPress强大的内容管理能力和现代前端框架的性能优势。

所谓Headless CMS，是一种将内容管理后台与前端展示层完全解耦的架构模式。传统CMS如WordPress是"耦合式"的——后台管理和前端渲染由同一套系统完成。而Headless模式下，CMS只负责内容的创建、存储和通过API输出，前端则可以使用任何技术框架来消费这些API并渲染页面。这种架构使得同一套后台内容可以同时服务于网站、App、小程序等多个渠道，前后端团队也可以独立开发和部署。

为什么不直接用WordPress全栈？

翟路嘉指出了传统WordPress建站的几个痛点：

• WordPress基于PHP，前后端技术栈不统一，开发成本较高
• 网站性能优化空间有限，难以做到极致
• 对于需要炫酷交互和个性化设计的电商场景，WordPress模板的灵活性不足

轮毂改装是一个高度个性化的市场，用户不是简单地浏览商品列表下单，而是需要沉浸式的视觉体验来激发购买欲望。因此，基于React的Next.js能提供更好的交互体验和开发灵活性。

与AI协作的正确姿势

AI不是万能的决策者

翟路嘉在直播中特别强调了一个重要观点：AI给出的方案未必是最优方案。AI天生被设计为顺着用户的意思聊天，如果用户本身对技术不够了解，AI可能会顺着一个并不理想的方向持续推进，最终得到一个"凑合够用但上限很低"的方案。

这正是有经验的开发者的价值所在——能够判断AI建议的合理性，知道什么是真正的最佳实践，并在关键节点做出正确的技术决策。

需求讨论阶段的实操

在Codex中，翟路嘉选择了Plan Mode（计划模式），使用GPT-5.5模型，以Medium算力进行规划。整个过程分为几个步骤：

1. 阐述方案：向AI描述整体架构设想，请AI评价可行性
2. 回应质疑：AI提出了Shopify等替代方案，翟路嘉基于业务特点逐一回应
3. 达成共识：确认Headless WordPress + Next.js + Cloudflare Worker的架构
4. 细化计划：让AI生成具体的开发计划

说个细节，AI在讨论中确认了WooCommerce的REST API完全支持Headless场景，包括购物车、支付、运费、税费等核心电商功能都可以通过API完成。WooCommerce是WordPress生态中最流行的电商插件，全球有超过500万活跃安装。其REST API提供了完整的电商功能接口，涵盖产品CRUD、分类管理、购物车操作、订单创建与管理、优惠券系统、运费计算、税费规则、客户管理等。在Headless模式下，WooCommerce本质上变成了一个电商中台，所有业务逻辑都在后端完成，前端只需调用API即可。这意味着商家可以继续使用熟悉的WordPress后台管理商品和订单，同时前端获得完全的设计自由度。

最终技术架构详解

Mono Repo项目结构

经过多轮讨论，最终确定的项目采用Mono Repo架构，包含以下子项目：

• wordpress/：WooCommerce后台，通过Docker容器部署到VPS或Fly.io
• storefront/：Next.js前端，通过OpenNext部署到Cloudflare Worker
• packages/ui/：基于CodeUI的共享组件库
• shared/：公共工具和类型定义

Mono Repo（单一代码仓库）是一种将多个相关项目放在同一个Git仓库中管理的代码组织策略，与之相对的是Multi Repo（每个项目独立仓库）。Google、Meta、Microsoft等大型科技公司广泛采用这种模式。其核心优势包括：跨项目代码共享更便捷（如共享UI组件库和类型定义）、依赖版本统一管理避免冲突、原子化提交确保多个子项目的变更同步生效。常用的Mono Repo管理工具包括Turborepo、Nx、pnpm workspace等，它们提供了增量构建、任务编排、缓存等能力来解决大型仓库的构建效率问题。

关键技术选型

层级	技术选择	用途
前端框架	Next.js + React	用户交互界面
部署平台	Cloudflare Worker	全球边缘计算
适配层	OpenNext	Next.js到Cloudflare的桥接
CMS/电商	WordPress + WooCommerce	产品管理、订单处理
数据库	TiDB Cloud	自动备份、混合搜索
对象存储	Cloudflare R2	产品图片、媒体文件
状态管理	Zustand	客户端状态
样式方案	Tailwind CSS + CodeUI	UI组件和样式
支付网关	可插拔设计	Stripe/PayPal等灵活切换

关于Cloudflare Worker与边缘计算：Cloudflare Worker是Cloudflare提供的Serverless边缘计算平台，允许开发者将代码部署到全球300多个数据中心节点上。与传统的中心化服务器不同，边缘计算将应用逻辑推送到离用户最近的节点执行，从而大幅降低网络延迟。对于面向海外市场的电商独立站来说，这意味着无论用户在美国、欧洲还是东南亚，都能获得接近本地的访问速度。Worker基于V8引擎运行JavaScript/TypeScript代码，冷启动时间极短（通常在5毫秒以内），且按请求计费，没有流量时不产生费用，非常适合中小型电商项目的成本控制。

关于OpenNext适配层：OpenNext是一个开源项目，旨在解决Next.js与非Vercel平台之间的部署兼容性问题。Next.js由Vercel公司开发，其许多高级特性（如ISR增量静态再生、Middleware、Server Actions等）在设计上与Vercel的基础设施深度绑定。当开发者希望将Next.js应用部署到Cloudflare Worker、AWS Lambda等其他平台时，就需要OpenNext作为中间适配层，将Next.js的运行时行为翻译为目标平台能理解的格式。这个项目最初由SST社区发起，目前已支持多个主流云平台，是脱离Vercel生态使用Next.js的关键基础设施。

关于Zustand状态管理：Zustand是一个轻量级的React状态管理库，以极简的API和优秀的性能著称。相比Redux的繁重模板代码和Context API的性能问题，Zustand不需要Provider包裹组件树，支持在React组件外部访问状态，且bundle体积仅约1KB。在电商场景中，Zustand非常适合管理购物车状态、用户偏好设置、筛选条件等客户端状态，其中间件系统还支持状态持久化（如将购物车数据存储到localStorage），确保用户刷新页面后不丢失数据。

关于Cloudflare R2对象存储：R2是Cloudflare推出的S3兼容对象存储服务，其最大卖点是零出口流量费用。传统云存储服务（如AWS S3）在数据被读取/下载时会收取出口带宽费，这对图片密集的电商网站来说是一笔不小的开支。R2完全免除了这项费用，只按存储量和请求次数计费。对于轮毂电商这种需要大量高清产品图片、多角度展示图、视频素材的场景，R2可以显著降低运营成本，同时与Cloudflare CDN天然集成，图片可以通过全球边缘节点加速分发。

为什么选TiDB Cloud？

翟路嘉推荐TiDB Cloud作为数据库有三个理由：自动每日快照备份、慷慨的免费额度，以及混合搜索能力——同时支持传统全文搜索和向量语义搜索（RAG），为未来的AI智能客服和智能搜索预留了扩展空间。

TiDB是PingCAP公司开发的分布式NewSQL数据库，兼容MySQL协议，支持水平扩展和强一致性事务。TiDB Cloud是其全托管云服务版本。这里的"混合搜索"是指在同一个数据库中同时支持传统的关键词全文搜索（基于倒排索引）和向量语义搜索（基于向量嵌入的相似度计算）。向量搜索是RAG（检索增强生成）技术的基础——通过将文本转换为高维向量，可以找到语义相近但关键词不同的内容。例如用户搜索"适合越野的大轮毂"，即使商品描述中没有完全匹配的关键词，向量搜索也能找到语义相关的产品。这为未来接入AI客服和智能推荐奠定了数据基础。

管理AI的方法论：agents.md

像管人一样管AI

翟路嘉分享了一个核心洞察：AI非常接近于人，而不是机器。机器死板但不出错，人灵活但会出错。因此管理AI的方法论应该借鉴管理团队的经验。

具体做法是在项目根目录创建agents.md文件，作为AI的行为准则，包含：

• 开发流程规范
• 工作留痕要求（必须留文档、产出可回溯）
• 代码风格约束
• 环境变量使用规范

这种做法本质上类似于软件工程中的"编码规范文档"或"团队开发手册"，但专门针对AI编程助手进行了适配。在OpenAI Codex、Cursor、Claude等AI编程工具中，这类指令文件（有时也叫system prompt文件或rules文件）已经成为一种新兴的最佳实践。它让AI在每次执行任务时都能参考统一的规范，避免不同会话之间产生风格不一致的代码。

平衡灵活性与规范性

关键原则是不能给AI太多约束（会降低效率和创造性），也不能完全放任（会导致代码混乱）。要在灵活性、效率和正确性之间找到平衡点。

给AI补充最新知识

翟路嘉特别指出，AI的知识库往往落后于当前技术现状。例如Next.js无法直接部署到Cloudflare，需要通过OpenNext适配层，这是AI可能不知道的新信息。因此需要主动提供最新的文档和最佳实践，让AI基于正确的知识进行开发。

这也是资深开发者在AI时代的核心价值：知道什么是真正的最佳实践，能够为AI指明正确的方向。大语言模型的训练数据存在时间截止点，而前端技术生态更新极快——框架版本迭代、API变更、新工具涌现的速度远超AI知识更新的频率。开发者需要扮演"知识补丁"的角色，将最新的技术文档、changelog、迁移指南等信息喂给AI，确保其生成的代码基于当前版本的最佳实践而非过时的用法。

总结与启示

这次直播展示了一个完整的"AI辅助项目启动"流程：从需求讨论、技术选型、架构设计到开发计划制定，全程由人类开发者主导决策，AI作为高效的执行伙伴。对于非技术背景的创业者，这个流程同样适用——关键是要理解AI的能力边界，在重要决策点寻求专业人士的判断。

核心要点

• 采用WordPress Headless CMS + Next.js + Cloudflare Worker架构，兼顾内容管理能力和前端性能
• AI的方案未必最优，资深开发者的价值在于判断最佳实践并为AI指明方向
• 通过agents.md文件规范AI行为，在灵活性和规范性之间找平衡
• 需要主动为AI补充最新技术知识（如OpenNext），弥补其知识库滞后的问题
• 完整技术栈包含TiDB Cloud（混合搜索）、Cloudflare全家桶、Zustand状态管理等现代化组件