okooooooo/prompt-optimizer
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add cloudflare pages deployment guide

Browse Source
This commit is contained in:
linshen committed 2026-05-16 11:23:41 +08:00
1 parent 72b253565b
commit 2c08e28ade
9 files changed
+481 -70
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+13 -3
View File
@@ -16,7 +16,7 @@
[Website](https://always200.com) | [Online Optimizer](https://prompt.always200.com) | [Prompt Garden](https://garden.always200.com) | [Docs](https://docs.always200.com) | [Quick Start](#quick-start) | [Chrome Extension](https://chromewebstore.google.com/detail/prompt-optimizer/cakkkhboolfnadechdlgdcnjammejlna) | [💖 Support](https://ko-fi.com/linshenkx)
[Development Docs](dev.md) | [Vercel Deployment Guide](docs/user/deployment/vercel_en.md) | [MCP Deployment Guide](docs/user/mcp-server_en.md) | [DeepWiki Docs](https://deepwiki.com/linshenkx/prompt-optimizer) | [ZRead Docs](https://zread.ai/linshenkx/prompt-optimizer)
[Development Docs](dev.md) | [Vercel Deployment Guide](docs/user/deployment/vercel_en.md) | [Cloudflare Pages Deployment Guide](docs/user/deployment/cloudflare-pages_en.md) | [MCP Deployment Guide](docs/user/mcp-server_en.md) | [DeepWiki Docs](https://deepwiki.com/linshenkx/prompt-optimizer) | [ZRead Docs](https://zread.ai/linshenkx/prompt-optimizer)
</div>
@@ -91,7 +91,9 @@ Direct access: [https://prompt.always200.com](https://prompt.always200.com)
This is a pure frontend project with all data stored locally in your browser and never uploaded to any server, making the online version both safe and reliable to use.
### 2. Vercel Deployment
### 2. Web Deployment
#### Vercel Deployment
Method 1: One-click deployment to your own Vercel:
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flinshenkx%2Fprompt-optimizer)
@@ -102,9 +104,16 @@ Method 2: Fork the project and import to Vercel (Recommended):
- Configure environment variables:
- `ACCESS_PASSWORD`: Set access password to enable access restriction
- `VITE_OPENAI_API_KEY` etc.: Configure API keys for various AI service providers
For more detailed deployment steps and important notes, please check:
- [Vercel Deployment Guide](docs/user/deployment/vercel_en.md)
- [Cloudflare Pages Deployment Guide](docs/user/deployment/cloudflare-pages_en.md)
#### Cloudflare Pages Deployment
Fork the project and import your fork into Cloudflare Pages. Use the repository root, set the build output directory to `packages/web/dist`, and sync your fork later to trigger automatic redeploys.
For access control and analytics on Cloudflare, configure Cloudflare Access and Cloudflare Web Analytics in the Cloudflare dashboard. No frontend dependency or application-code change is required.
### 3. Download Desktop Application
Download the latest version from [GitHub Releases](https://github.com/linshenkx/prompt-optimizer/releases). We provide both **installer** and **archive** formats for each platform.
@@ -353,6 +362,7 @@ For detailed project status, see [Project Status Document](docs/project/project-
- [Project Status](docs/project/project-status.md) - Current progress and plans
- [Product Requirements](docs/project/prd.md) - Product requirements document
- [Vercel Deployment Guide](docs/user/deployment/vercel_en.md) - Detailed instructions for Vercel deployment
- [Cloudflare Pages Deployment Guide](docs/user/deployment/cloudflare-pages_en.md) - Web frontend deployment on Cloudflare Pages
## Star History
README.zh-CN.md
+12 -2
View File
@@ -16,7 +16,7 @@
[官网](https://always200.com) | [在线优化器](https://prompt.always200.com) | [提示词库](https://garden.always200.com) | [文档站](https://docs.always200.com) | [快速开始](#快速开始) | [Chrome插件](https://chromewebstore.google.com/detail/prompt-optimizer/cakkkhboolfnadechdlgdcnjammejlna) | [💖赞助支持](images/other/sponsor_wx.jpg)
[开发文档](dev.md) | [Vercel部署指南](docs/user/deployment/vercel.md) | [MCP部署使用说明](docs/user/mcp-server.md) | [DeepWiki文档](https://deepwiki.com/linshenkx/prompt-optimizer) | [ZRead文档](https://zread.ai/linshenkx/prompt-optimizer)
[开发文档](dev.md) | [Vercel部署指南](docs/user/deployment/vercel.md) | [Cloudflare Pages部署指南](docs/user/deployment/cloudflare-pages.md) | [MCP部署使用说明](docs/user/mcp-server.md) | [DeepWiki文档](https://deepwiki.com/linshenkx/prompt-optimizer) | [ZRead文档](https://zread.ai/linshenkx/prompt-optimizer)
</div>
@@ -91,7 +91,9 @@ Prompt Optimizer是一个强大的AI提示词优化工具，帮助你编写更
项目是纯前端项目，所有数据只存储在浏览器本地，不会上传至任何服务器，因此直接使用在线版本也是安全可靠的
### 2. Vercel部署
### 2. Web部署
#### Vercel部署
方式1：一键部署到自己的Vercel(方便，但后续无法自动更新)：
[![部署到 Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flinshenkx%2Fprompt-optimizer)
@@ -105,6 +107,13 @@ Prompt Optimizer是一个强大的AI提示词优化工具，帮助你编写更
更多详细的部署步骤和注意事项，请查看：
- [Vercel部署指南](docs/user/deployment/vercel.md)
- [Cloudflare Pages部署指南](docs/user/deployment/cloudflare-pages.md)
#### Cloudflare Pages部署
Fork 项目后在 Cloudflare Pages 中导入自己的 fork。保持仓库根目录，构建产物目录设置为 `packages/web/dist`，后续同步 fork 后会自动重新部署。
Cloudflare 上的访问控制和访问分析建议分别使用 Cloudflare Access 和 Cloudflare Web Analytics，在 Cloudflare 控制台配置即可，不需要安装前端依赖或修改应用代码。
### 3. 下载桌面应用
从 [GitHub Releases](https://github.com/linshenkx/prompt-optimizer/releases) 下载最新版本。我们为各平台提供**安装程序**和**压缩包**两种格式。
@@ -348,6 +357,7 @@ pnpm dev:fresh # 完整重置并重新启动开发环境
- [项目状态](docs/project/project-status.md) - 当前进度和计划
- [产品需求](docs/project/prd.md) - 产品需求文档
- [Vercel部署指南](docs/user/deployment/vercel.md) - Vercel部署详细说明
- [Cloudflare Pages部署指南](docs/user/deployment/cloudflare-pages.md) - 在 Cloudflare Pages 上部署 Web 前端
## Star History
docs/user/README.md
+2
View File
@@ -25,6 +25,8 @@
### 自部署
- [Vercel部署指南（中文）](./deployment/vercel.md) - 在Vercel上部署Web版
- [Vercel部署指南（英文）](./deployment/vercel_en.md) - Vercel deployment guide (English)
- [Cloudflare Pages部署指南（中文）](./deployment/cloudflare-pages.md) - 在 Cloudflare Pages 上部署 Web 前端
- [Cloudflare Pages Deployment Guide (English)](./deployment/cloudflare-pages_en.md) - Deploy the Web frontend on Cloudflare Pages
## ❓ 常见问题
docs/user/deployment/cloudflare-pages.md
+102
View File
@@ -0,0 +1,102 @@
## Cloudflare Pages 部署说明
Cloudflare Pages 适合部署 Prompt Optimizer 的 **Web 前端**。它提供静态站点托管和 Git 自动部署；站点访问控制、访问分析等能力由 Cloudflare 控制台配置。
### 推荐方式：Fork 后导入 Cloudflare Pages
这种方式和推荐的 Vercel 部署方式一样：部署绑定到你自己的 fork，后续同步上游更新后会自动重新部署。
1. **Fork 项目到自己的 GitHub**
- 访问 [prompt-optimizer 项目](https://github.com/linshenkx/prompt-optimizer)
- 点击右上角的 "Fork"
- 完成后，你会在自己的 GitHub 账号下拥有一份仓库副本
2. **在 Cloudflare Pages 中导入仓库**
- 登录 [Cloudflare Dashboard](https://dash.cloudflare.com/)
- 进入 **Workers & Pages**
- 选择 **Create application** -> **Pages** -> **Connect to Git**
- 选择你 fork 后的 `prompt-optimizer` 仓库
3. **配置构建参数**
建议保持仓库根目录作为项目根目录，不要把根目录改成 `packages/web`。
| 配置项 | 推荐值 |
| --- | --- |
| Framework preset | `None` 或留空 |
| Root directory | `/` 或留空 |
| Build command | `pnpm -F @prompt-optimizer/core build && pnpm -F @prompt-optimizer/ui build && pnpm -F @prompt-optimizer/web build` |
| Build output directory | `packages/web/dist` |
4. **配置环境变量**
在 Cloudflare Pages 项目的 **Settings** -> **Environment variables** 中添加：
```bash
NODE_VERSION=22
PNPM_VERSION=10.6.1
```
如果你希望预置模型 API Key，也可以添加常用的 `VITE_*` 环境变量：
```bash
VITE_OPENAI_API_KEY=...
VITE_GEMINI_API_KEY=...
VITE_DEEPSEEK_API_KEY=...
VITE_GROK_API_KEY=...
VITE_SILICONFLOW_API_KEY=...
VITE_ZHIPU_API_KEY=...
```
也可以不在部署平台配置 API Key，让用户在应用界面的模型管理中自行填写。这样更适合公开站点。
5. **部署**
- 保存配置并开始部署
- 部署成功后，Cloudflare Pages 会提供一个 `*.pages.dev` 域名
- 后续你的 fork 有新 commit 时，Cloudflare Pages 会自动重新构建并部署
6. **同步上游更新**
- 在 GitHub 打开你 fork 的仓库
- 当页面提示落后于 `linshenkx/prompt-optimizer` 时，点击 **Sync fork**
- 同步产生新 commit 后，Cloudflare Pages 会自动重新部署
### 可选：访问控制
Cloudflare Pages 部署不使用 Vercel 的 `ACCESS_PASSWORD`、`middleware.js` 或 `api/auth.js`。如果你想限制访问，推荐使用 **Cloudflare Access**：
1. 进入 Cloudflare Zero Trust
2. 创建一个 Self-hosted application
3. 绑定你的 Pages 域名
4. 配置允许访问的邮箱、域名、身份提供商或其他策略
这样访问请求会先经过 Cloudflare Access，再进入静态站点，不需要修改前端代码。
### 可选：访问分析
Cloudflare Pages 可以在项目的 **Metrics** -> **Web Analytics** 中启用 Web Analytics。Cloudflare 会在后续部署中自动注入统计脚本，不需要安装类似 `@vercel/analytics` 的前端依赖。
需要注意：Prompt Optimizer 当前使用 hash 路由，因此 Cloudflare Web Analytics 可以统计站点访问和性能数据，但不会自动把 `/#/xxx` 这类 hash 内页面切换当作独立页面浏览。
### 和 Vercel 部署的区别
| 能力 | Vercel | Cloudflare Pages |
| --- | --- | --- |
| Web 前端部署 | 支持 | 支持 |
| Fork 后自动部署 | 支持 | 支持 |
| 自动同步上游更新 | 不支持，需要用户同步 fork | 不支持，需要用户同步 fork |
| 站点访问控制 | `ACCESS_PASSWORD` 密码页 | 推荐 Cloudflare Access |
| Vercel Analytics | 支持 | 不适用，推荐 Cloudflare Web Analytics |
### 常见问题
#### 修改环境变量后没有生效
Cloudflare Pages 的构建环境变量需要重新部署后才会进入前端构建产物。保存环境变量后，请在 **Deployments** 中重新部署一次。
#### 为什么没有一键部署按钮
Cloudflare 官方的 "Deploy to Cloudflare" 按钮主要面向 Workers 应用，不适合当前这种 Cloudflare Pages Git 集成部署。为了后续更新更可靠，推荐 Fork 后导入 Cloudflare Pages。
#### 连接模型 API 失败怎么办
Cloudflare Pages 部署的是纯前端页面，浏览器仍然会直接请求模型服务。如果模型服务不允许浏览器跨域访问，Web 版会失败。此时建议使用桌面版，或配置你自己的 API 中转服务。
docs/user/deployment/cloudflare-pages_en.md
+102
View File
@@ -0,0 +1,102 @@
## Cloudflare Pages Deployment Guide
Cloudflare Pages is suitable for deploying the Prompt Optimizer **Web frontend**. It provides static hosting and Git-triggered deployments; access control and analytics are configured from the Cloudflare dashboard.
### Recommended method: Fork and import into Cloudflare Pages
This follows the same maintenance model as the recommended Vercel deployment: the deployment is connected to your own fork, and Cloudflare Pages redeploys after you sync upstream changes into that fork.
1. **Fork the project to your GitHub account**
- Visit the [prompt-optimizer repository](https://github.com/linshenkx/prompt-optimizer)
- Click "Fork" in the top right corner
- After forking, you will have a copy of the repository under your own GitHub account
2. **Import the repository into Cloudflare Pages**
- Log in to the [Cloudflare Dashboard](https://dash.cloudflare.com/)
- Open **Workers & Pages**
- Select **Create application** -> **Pages** -> **Connect to Git**
- Choose your forked `prompt-optimizer` repository
3. **Configure build settings**
Keep the repository root as the project root. Do not change the root directory to `packages/web`.
| Setting | Recommended value |
| --- | --- |
| Framework preset | `None` or empty |
| Root directory | `/` or empty |
| Build command | `pnpm -F @prompt-optimizer/core build && pnpm -F @prompt-optimizer/ui build && pnpm -F @prompt-optimizer/web build` |
| Build output directory | `packages/web/dist` |
4. **Configure environment variables**
In the Cloudflare Pages project, go to **Settings** -> **Environment variables** and add:
```bash
NODE_VERSION=22
PNPM_VERSION=10.6.1
```
If you want to preconfigure model API keys, you can also add common `VITE_*` variables:
```bash
VITE_OPENAI_API_KEY=...
VITE_GEMINI_API_KEY=...
VITE_DEEPSEEK_API_KEY=...
VITE_GROK_API_KEY=...
VITE_SILICONFLOW_API_KEY=...
VITE_ZHIPU_API_KEY=...
```
You can also leave API keys out of the hosting platform and let users configure models in the application UI. This is usually better for public deployments.
5. **Deploy**
- Save the settings and start the deployment
- After deployment succeeds, Cloudflare Pages provides a `*.pages.dev` domain
- Later, whenever your fork receives new commits, Cloudflare Pages rebuilds and redeploys automatically
6. **Sync upstream updates**
- Open your forked repository on GitHub
- When GitHub shows that it is behind `linshenkx/prompt-optimizer`, click **Sync fork**
- Once the sync creates new commits in your fork, Cloudflare Pages redeploys automatically
### Optional: access control
Cloudflare Pages deployment does not use Vercel's `ACCESS_PASSWORD`, `middleware.js`, or `api/auth.js`. If you want restricted access, use **Cloudflare Access**:
1. Open Cloudflare Zero Trust
2. Create a Self-hosted application
3. Bind it to your Pages domain
4. Configure allowed emails, domains, identity providers, or other access policies
Requests will pass through Cloudflare Access before reaching the static site, without frontend code changes.
### Optional: analytics
Cloudflare Pages can enable Web Analytics from **Metrics** -> **Web Analytics** in the Pages project. Cloudflare injects the analytics snippet on later deployments, so you do not need a frontend dependency like `@vercel/analytics`.
Note that Prompt Optimizer currently uses hash routing. Cloudflare Web Analytics can track overall site visits and performance, but it will not automatically treat `/#/xxx` hash route changes as separate page views.
### Differences from Vercel deployment
| Capability | Vercel | Cloudflare Pages |
| --- | --- | --- |
| Web frontend deployment | Supported | Supported |
| Auto deploy after fork commits | Supported | Supported |
| Automatic upstream sync | Not supported; users sync their fork | Not supported; users sync their fork |
| Site access control | `ACCESS_PASSWORD` password page | Use Cloudflare Access |
| Vercel Analytics | Supported | Not applicable; use Cloudflare Web Analytics |
### FAQ
#### Environment variable changes did not take effect
Cloudflare Pages build environment variables are included in the frontend build output only after a new deployment. After saving variables, redeploy from **Deployments**.
#### Why is there no one-click deploy button?
Cloudflare's official "Deploy to Cloudflare" button is mainly for Workers applications, not this Cloudflare Pages Git integration flow. For reliable future updates, fork the repository and import the fork into Cloudflare Pages.
#### What if model API connections fail?
Cloudflare Pages deploys a pure frontend page. The browser still calls model services directly. If a model provider does not allow browser CORS requests, the Web version will fail. Use the desktop app or configure your own API relay service in that case.
docs/user/deployment/vercel.md
+16 -32
View File
@@ -5,7 +5,7 @@
| 部署方式 | 优点 | 缺点 |
|---------|------|------|
| 一键部署 | 快速简便，无需额外设置 | 无法自动同步源项目更新 |
| Fork后导入 | 可跟踪源项目更新，更易维护 | 第一次部署需要手动修复根目录设置以启用Vercel代理功能 |
| Fork后导入 | 可跟踪源项目更新，更易维护 | 第一次部署需要确认项目根目录和构建配置 |
### 推荐方式：Fork项目后导入到Vercel（推荐）
@@ -25,9 +25,9 @@
![导入项目到Vercel](../images/vercel/import.png)
3. **修复根目录设置（强烈建议）**
- 通过导入部署时，虽然项目的`vercel.json`文件已包含相关修复可以让基本功能正常工作
- 但若要启用**Vercel代理功能**（解决跨域问题的关键功能），则需手动修复根目录：
3. **确认根目录设置（建议）**
- 通过导入部署时，建议确认 Vercel 项目根目录保持为仓库根目录
- 如果 Vercel 自动把根目录识别为某个子目录，请手动修正：
a. 在项目部署完成后，进入项目设置
@@ -71,31 +71,19 @@
2. 按照Vercel的引导完成部署流程
**优势：** 一键部署方式Vercel能自动正确识别根目录，无需手动修复，所有功能（包括Vercel代理）均可正常使用。
**优势：** 一键部署方式 Vercel 通常能自动正确识别根目录，无需手动修复。
### 关于Vercel代理功能
### 关于内置代理功能
Prompt Optimizer在Vercel部署时支持使用Edge Runtime代理解决跨域问题。
Prompt Optimizer 早期版本曾提供 Vercel / Docker 内置代理能力，但由于 SSRF 安全风险，当前版本已经移除内置模型代理端点。
1. **确认代理功能可用**
- 如使用一键部署：代理功能应直接可用
- 如使用导入部署：需完成上述"修复根目录设置"和"重新部署"步骤
- 在应用中打开"模型管理"
- 选择目标模型->"编辑"，此时应该可以看到"使用Vercel代理"选项
- 如果没有看到此选项，说明Vercel Function未正确部署，请检查根目录设置
当前 Web 版仍是纯前端应用：
2. **启用代理功能**
- 勾选"使用Vercel代理"选项
- 保存配置
- 浏览器会直接请求你配置的模型服务
- 如果模型服务不允许浏览器跨域访问，Vercel 部署本身不能绕过
- 需要跨域中转时，请使用桌面版，或自行配置可信的 API 中转服务
3. **代理原理**
- 请求流向：浏览器→Vercel Edge Runtime→模型服务提供商
- 解决了浏览器直接访问API时的跨域限制
- 代理功能基于Vercel Function实现，依赖于`/api`路径
4. **注意事项**
- 部分模型服务提供商可能会限制来自Vercel的请求
- 如遇限制，建议使用自部署的API中转服务
根目录中的 `api/auth.js` 和 `middleware.js` 只用于 Vercel 部署下的访问密码校验，不是模型 API 代理。
### 密码保护访问
@@ -112,18 +100,14 @@ Prompt Optimizer在Vercel部署时支持使用Edge Runtime代理解决跨域问
2. **无法连接到模型API**
- 确认API密钥已正确配置
- 尝试启用Vercel代理功能
- 检查模型服务提供商是否限制了Vercel请求
- 检查模型服务提供商是否允许浏览器跨域请求
- 如遇跨域限制，建议使用桌面版或自部署 API 中转服务
3. **"使用Vercel代理"选项未显示**
- 如使用导入部署：检查是否已清空根目录设置并重新部署
- 查看部署日志中是否有关于Function的错误信息
4. **如何更新已部署的项目**
3. **如何更新已部署的项目**
- 如果是fork后导入：同步fork并等待自动部署
- 如果是一键部署：需要重新部署新版本（无法自动跟踪源项目更新）
5. **如何添加自定义域名**
4. **如何添加自定义域名**
- 在Vercel项目设置中选择"Domains"
- 添加并验证你的域名
- 按照指引配置DNS记录
docs/user/deployment/vercel_en.md
+16 -32
View File
@@ -5,7 +5,7 @@
| Deployment Method | Advantages | Disadvantages |
|---------|------|------|
| One-click Deployment | Quick and convenient, no additional setup required | Cannot automatically sync updates from the source project |
| Fork and Import | Can track source project updates, easier to maintain | First deployment requires manual root directory fix to enable Vercel proxy functionality |
| Fork and Import | Can track source project updates, easier to maintain | First deployment may require checking the project root and build settings |
### Recommended Method: Fork the Project and Import to Vercel (Recommended)
@@ -25,9 +25,9 @@ This method allows you to track project updates, making it easier to sync the la
![Import project to Vercel](../images/vercel/import.png)
3. **Fix the root directory setting (Strongly recommended)**
- When deployed through import, although the project's `vercel.json` file already contains related fixes to make basic functionality work
- To enable **Vercel proxy functionality** (a key feature for solving cross-origin issues), you need to manually fix the root directory:
3. **Check the root directory setting (Recommended)**
- When deploying through import, make sure the Vercel project root remains the repository root
- If Vercel automatically detects a subdirectory as the project root, fix it manually:
a. After the project is deployed, go to project settings
@@ -71,7 +71,7 @@ If you only need quick deployment and don't care about subsequent updates, you c
2. Follow Vercel's guidance to complete the deployment process
**Advantage:** With one-click deployment, Vercel can automatically correctly identify the root directory, no manual fixing required, and all features (including Vercel proxy) can work normally.
**Advantage:** With one-click deployment, Vercel can usually identify the root directory correctly without manual fixing.
### Password Protected Access
@@ -80,29 +80,17 @@ When the `ACCESS_PASSWORD` environment variable is configured, your site will en
- Access to the application is granted after entering the correct password
- The system will set a cookie to remember the user, eliminating the need to re-enter the password for a period of time
### About Vercel Proxy Functionality
### About built-in proxy functionality
Prompt Optimizer supports using Edge Runtime proxy to solve cross-origin issues when deployed on Vercel.
Prompt Optimizer had Vercel / Docker built-in proxy support in early versions, but current versions have removed built-in model proxy endpoints because of SSRF security risk.
1. **Confirm proxy functionality is available**
- If using one-click deployment: proxy functionality should be directly available
- If using import deployment: you need to complete the "Fix root directory setting" and "Redeploy" steps mentioned above
- Open "Model Management" in the application
- Select the target model -> "Edit", at this point you should see the "Use Vercel Proxy" option
- If you don't see this option, it means the Vercel Function is not correctly deployed, please check the root directory setting
The Web version is still a pure frontend application:
2. **Enable proxy functionality**
- Check the "Use Vercel Proxy" option
- Save the configuration
- The browser calls the configured model service directly
- If the model service does not allow browser CORS requests, Vercel deployment cannot bypass that by itself
- If you need a relay, use the desktop app or configure a trusted API relay service yourself
3. **Proxy principle**
- Request flow: Browser → Vercel Edge Runtime → Model service provider
- Solves the cross-origin limitation when browsers directly access APIs
- Proxy functionality is based on Vercel Function implementation, dependent on the `/api` path
4. **Notes**
- Some model service providers may restrict requests from Vercel
- If restrictions are encountered, it is recommended to use a self-deployed API relay service
The root `api/auth.js` and `middleware.js` files are only used for access-password verification in Vercel deployments. They are not model API proxy routes.
### Common Issues
@@ -112,18 +100,14 @@ Prompt Optimizer supports using Edge Runtime proxy to solve cross-origin issues
2. **Cannot connect to model API**
- Confirm the API key is correctly configured
- Try enabling Vercel proxy functionality
- Check if the model service provider restricts Vercel requests
- Check whether the model service allows browser CORS requests
- If CORS is blocked, use the desktop app or a self-hosted API relay service
3. **"Use Vercel Proxy" option not displayed**
- If using import deployment: check if you have cleared the root directory setting and redeployed
- Check if there are any Function-related error messages in the deployment logs
4. **How to update a deployed project**
3. **How to update a deployed project**
- If forked and imported: sync the fork and wait for automatic deployment
- If one-click deployed: need to redeploy the new version (cannot automatically track source project updates)
5. **How to add a custom domain**
4. **How to add a custom domain**
- Select "Domains" in the Vercel project settings
- Add and verify your domain
- Follow the guidance to configure DNS records
mkdocs/docs/en/deployment/web.md
+183 -1
View File
@@ -1 +1,183 @@
# Coming Soon
# Web Deployment
The Web version is a frontend page, not a model proxy layer.
Whether you use the official online site or deploy your own static site, model requests are sent directly from the browser to the model provider.
## How it relates to Docker and MCP
These options are easy to confuse:
| Method | What you get | Best for |
| --- | --- | --- |
| Web | A reachable frontend page | Online use, static hosting |
| Docker | Web page + `/mcp` service inside the container | Self-hosting and LAN deployments |
| Standalone MCP | MCP service only, without the Web page | MCP clients |
If you want Web and MCP together, start with [Docker Basics](docker-basic.md).
If you only care about MCP integration, see [MCP Server](../user/mcp-server.md).
## When the Web version is a good fit
Good fit:
- You mainly connect to public HTTPS model APIs
- You want to quickly publish a reachable frontend site
- You do not need to access local interfaces such as `http://localhost`
Not a good fit:
- You mainly connect to Ollama, LM Studio, or local gateways
- You need to access enterprise intranet APIs with strict CORS policies
- You expect frontend deployment to bypass browser restrictions
## Two simple ways to use it
### 1. Use the official online site
URL: <https://prompt.always200.com>
This is the easiest option, but browser restrictions still apply:
- Data is stored locally in the current browser by default
- Requests are sent directly to the model service you configure
- If the model service does not allow browser CORS access, the online site cannot bypass that restriction
### 2. Deploy your own static site
The repository root includes `vercel.json`, so it can be deployed to Vercel directly.
You can also deploy the build output to Cloudflare Pages or any other static hosting platform.
## Deploy to Vercel
Recommended flow:
1. Fork this repository
2. Import the repository into Vercel
3. Keep the repository root as the project root
4. Configure environment variables
5. Deploy
### Common environment variables
Text models:
```bash
VITE_OPENAI_API_KEY=...
VITE_GEMINI_API_KEY=...
VITE_ANTHROPIC_API_KEY=...
VITE_DEEPSEEK_API_KEY=...
VITE_GROK_API_KEY=...
VITE_SILICONFLOW_API_KEY=...
VITE_ZHIPU_API_KEY=...
VITE_DASHSCOPE_API_KEY=...
VITE_OPENROUTER_API_KEY=...
VITE_MODELSCOPE_API_KEY=...
VITE_MINIMAX_API_KEY=...
```
Custom OpenAI-compatible API:
```bash
VITE_CUSTOM_API_KEY=...
VITE_CUSTOM_API_BASE_URL=https://your-api.example.com/v1
VITE_CUSTOM_API_MODEL=your-model-name
```
### Optional: site password protection
If you set this on Vercel:
```bash
ACCESS_PASSWORD=your_password
```
The site shows a password page first. This behavior is provided by the root `middleware.js` and `api/auth.js`.
## Deploy to Cloudflare Pages
The recommended flow is similar to the recommended Vercel flow: fork the project first, then import your fork into Cloudflare Pages. Later, when you sync upstream updates into your fork, Cloudflare Pages redeploys automatically.
1. Fork this repository
2. In the Cloudflare Dashboard, open **Workers & Pages**
3. Select **Create application** -> **Pages** -> **Connect to Git**
4. Choose your forked `prompt-optimizer` repository
5. Use the build settings below:
| Setting | Recommended value |
| --- | --- |
| Framework preset | `None` or empty |
| Root directory | `/` or empty |
| Build command | `pnpm -F @prompt-optimizer/core build && pnpm -F @prompt-optimizer/ui build && pnpm -F @prompt-optimizer/web build` |
| Build output directory | `packages/web/dist` |
Set these Cloudflare Pages environment variables:
```bash
NODE_VERSION=22
PNPM_VERSION=10.6.1
```
If you want to preconfigure model API keys, you can also add `VITE_OPENAI_API_KEY`, `VITE_GEMINI_API_KEY`, and other `VITE_*` variables. You can also leave API keys out of the hosting platform and let users configure models in the application UI.
### Optional: Cloudflare Access and Web Analytics
Cloudflare Pages does not use Vercel's `ACCESS_PASSWORD`, `middleware.js`, or `/api/auth`. If you need restricted access, configure Cloudflare Access for your Pages domain in Cloudflare Zero Trust.
Cloudflare Web Analytics can be enabled from **Metrics** -> **Web Analytics** in the Pages project. Cloudflare injects the analytics snippet on later deployments, so no frontend dependency like `@vercel/analytics` is required.
!!! note
The Web version currently uses hash routing. Cloudflare Web Analytics can track site visits and performance data, but it will not automatically treat `/#/xxx` hash route changes as separate page views.
## Deploy to other static hosting
Local build:
```bash
pnpm install
pnpm build
```
After the build completes, the Web frontend output is:
```text
packages/web/dist
```
Deploy this directory to Nginx, OSS, S3, Cloudflare Pages, or another static hosting platform.
!!! note
If you are not using Vercel, static hosting does not automatically provide the `ACCESS_PASSWORD` password page or `/api/auth`. Those are part of the Vercel deployment path.
## Main limitation of the Web version
The problem is usually not whether the page can open. The problem is whether the browser can connect to your model service.
### CORS
If the model service does not return browser-compatible CORS headers, the Web version fails directly.
### Mixed Content
If your site is served over `https://...` but your model API is `http://localhost:...`, browsers usually block the request.
### Enterprise network policies
If a company network blocks unknown API domains, restricts self-signed certificates, or requires a proxy, the frontend site itself cannot solve that automatically.
## When to use another option
Choose another option for these needs:
- Connect to Ollama / LM Studio: use the [desktop app](desktop.md)
- Connect to LAN HTTP APIs: use the [desktop app](desktop.md)
- Provide Web and MCP together: use [Docker Basics](docker-basic.md)
- Provide MCP only: see [MCP Server](../user/mcp-server.md)
## Related pages
- [Desktop App](desktop.md)
- [Docker Basics](docker-basic.md)
- [MCP Server](../user/mcp-server.md)
mkdocs/docs/zh/deployment/web.md
+35
View File
@@ -98,6 +98,41 @@ ACCESS_PASSWORD=your_password
站点会先显示密码页。对应逻辑由根目录的 `middleware.js` 和 `api/auth.js` 提供。
## 部署到 Cloudflare Pages
推荐流程和 Vercel 的推荐方式类似：先 Fork 项目，再在 Cloudflare Pages 中导入自己的 fork。这样后续你同步 upstream 更新后，Cloudflare Pages 会自动重新部署。
1. Fork 本仓库
2. 在 Cloudflare Dashboard 中进入 **Workers & Pages**
3. 选择 **Create application** -> **Pages** -> **Connect to Git**
4. 选择你 fork 后的 `prompt-optimizer` 仓库
5. 使用下面的构建配置：
| 配置项 | 推荐值 |
| --- | --- |
| Framework preset | `None` 或留空 |
| Root directory | `/` 或留空 |
| Build command | `pnpm -F @prompt-optimizer/core build && pnpm -F @prompt-optimizer/ui build && pnpm -F @prompt-optimizer/web build` |
| Build output directory | `packages/web/dist` |
建议在 Cloudflare Pages 环境变量中设置：
```bash
NODE_VERSION=22
PNPM_VERSION=10.6.1
```
如果你想预置模型 API Key，可以继续添加 `VITE_OPENAI_API_KEY`、`VITE_GEMINI_API_KEY` 等 `VITE_*` 变量。也可以不在部署平台配置 API Key，让用户在应用界面的模型管理中自行填写。
### 可选：Cloudflare Access 和 Web Analytics
Cloudflare Pages 不会使用 Vercel 的 `ACCESS_PASSWORD`、`middleware.js` 或 `/api/auth`。如果你需要限制访问，推荐在 Cloudflare Zero Trust 中为 Pages 域名配置 Cloudflare Access。
Cloudflare Web Analytics 可以在 Pages 项目的 **Metrics** -> **Web Analytics** 中启用。Cloudflare 会在后续部署中自动注入统计脚本，不需要安装 `@vercel/analytics` 之类的前端依赖。
!!! note
当前 Web 版使用 hash 路由。Cloudflare Web Analytics 可以统计站点访问和性能数据，但不会自动把 `/#/xxx` 这类 hash 内页面切换当作独立页面浏览。
## 部署到其他静态托管
本地构建：