把 GPT Image Playground 部署到 Cloudflare Workers

最近看到一个比较顺手的生图前端：GPT Image Playground。它是一个基于 OpenAI gpt-image-2 API 的图片生成和编辑工具，支持 OpenAI 兼容接口、fal.ai、自定义 HTTP 服务商，也支持参考图、遮罩编辑、历史记录和 Agent 模式。

这个项目本身已经支持 Vercel、Docker、Cloudflare Workers 等部署方式。这里记录一下我自己会怎么把它部署到 Cloudflare Workers。

准备环境#

先准备好 Node.js、npm 和一个 Cloudflare 账号。项目用的是 Vite 前端，Cloudflare Workers 部署靠 Wrangler。

把仓库拉下来：

1
git clone https://github.com/CookSleep/gpt_image_playground.git
2
cd gpt_image_playground

安装依赖：

1
npm install

然后登录 Cloudflare：

1
npx wrangler login

浏览器里授权完成以后，Wrangler 就可以往你的 Cloudflare 账号里部署 Worker 了。

直接部署#

项目已经内置了 Cloudflare Workers 的部署脚本，所以最简单就是直接执行：

1
npm run deploy:cf

这个命令会先跑 npm run build，生成 Vite 的静态产物，然后再用 wrangler deploy 把 dist/ 目录上传到 Workers。

部署完成以后，终端会给出一个 workers.dev 地址。打开以后就能看到 GPT Image Playground 的页面。

预设默认 API 地址#

如果只是自己用，也可以不预设 API 地址，部署完以后在页面里手动填 API URL 和 Key。

但如果想让页面打开时默认就填好 API 地址，可以在构建前设置 VITE_DEFAULT_API_URL。注意这里是“构建前”，因为 Cloudflare Workers 的环境变量不会自动改写已经打包好的静态文件。

Linux / macOS：

1
VITE_DEFAULT_API_URL=https://api.openai.com/v1 npm run deploy:cf

PowerShell：

1
$env:VITE_DEFAULT_API_URL="https://api.openai.com/v1"; npm run deploy:cf

如果你用的是中转站，把这个地址换成自己的 OpenAI 兼容接口地址就行，比如：

1
$env:VITE_DEFAULT_API_URL="https://你的中转站域名/v1"; npm run deploy:cf

它也支持把一些默认参数写进 URL，比如 apiMode、model、profileName、codexCli、streamImages 这些。项目 README 里有完整说明。一般自用的话，我觉得最常用的还是只预设 API URL，Key 让浏览器本地保存。

只展示默认配置#

如果你是给家人朋友用，不希望他们看到太多配置项，可以在构建前再加一个：

1
$env:VITE_DEFAULT_API_URL="https://你的中转站域名/v1"; $env:VITE_SHOW_DEFAULT_CONFIG_ONLY="true"; npm run deploy:cf

这样在已经配置默认 API URL 的情况下，前端会限制配置切换，只让用户使用默认配置。这个适合比较固定的自用场景。

不过要注意，静态前端里能看到的东西就不要当秘密。API Key 这种东西不建议直接打进前端构建里。更稳妥的做法仍然是让用户自己填 Key，或者后端做好鉴权和额度限制。

自定义域名#

部署成功以后，如果不想用默认的 workers.dev，可以去 Cloudflare 控制台给这个 Worker 绑定自己的域名。

大概路径是：

进入 Cloudflare Dashboard。
找到 Workers & Pages。
进入刚部署的 Worker。
在触发器或自定义域名相关设置里添加自己的域名。

这个步骤 Cloudflare 控制台偶尔会改名字，但逻辑一直差不多：把某个域名或子域名指到这个 Worker 上。

用 CLIProxyAPI 当后端时的一个坑#

这里单独说一下我遇到的点。

如果你的 API 后端用的是 CLIProxyAPI 这类项目，给 GPT Image Playground 调生图接口时，记得在名为“禁用图像生成”的请求选项里选择 passthrough。

原因很简单：这类中转后端有时会为了适配聊天、Codex CLI 或别的客户端，自动改写请求参数。普通对话接口可能没问题，但生图接口对请求格式更敏感。现在这个时间点，也就是 2026 年 7 月我这里用到的版本，如果“禁用图像生成”这个选项没有设为 passthrough，它会自动改你的请求，最后就可能导致画图失败。

所以配置大概就是：

1
请求选项：禁用图像生成 = passthrough

不要让中转层帮你“智能处理”这个请求。GPT Image Playground 本身已经按生图接口组织好了请求，中间层只要原样转发就行。

更新#

后续更新项目也很简单：

1
git pull
2
npm install
3
npm run deploy:cf

如果你设置了 VITE_DEFAULT_API_URL，更新部署时也要记得重新带上这个环境变量。因为它不是运行时配置，而是打包时写进前端产物里的配置。

整体上，这个项目部署到 Cloudflare Workers 很省事。真正需要注意的反而不是 Workers，而是你的 API 后端到底有没有动请求。生图这种接口，能少改一层就少改一层。