### [WP-ChatGPT web前端](https://pmself.com/article/1911)

**Published:** 2023-04-11T07:43:00

**Author:** eganvi

**Excerpt:** 介绍 支持双模型，提供了两种非官方 方法 方式免费？可靠性质量 否可靠相对较笨 是相对不可靠聪明 对比： 使用…

![](https://pmself.com/wp-content/uploads/2023/04/746efcaf396bf.png)

## 介绍

支持双模型，提供了两种非官方 `ChatGPT API` 方法

| 方式  | 免费？ | 可靠性 | 质量  |
| --- | --- | --- | --- |
| `ChatGPTAPI(gpt-3.5-turbo-0301)` | 否   | 可靠  | 相对较笨 |
| `ChatGPTUnofficialProxyAPI(网页 accessToken)` | 是   | 相对不可靠 | 聪明  |

对比：

1.  `ChatGPTAPI` 使用 `gpt-3.5-turbo-0301` 通过官方`OpenAI`补全`API`模拟`ChatGPT`（最稳健的方法，但它不是免费的，并且没有使用针对聊天进行微调的模型）
2.  `ChatGPTUnofficialProxyAPI` 使用非官方代理服务器访问 `ChatGPT` 的后端`API`，绕过`Cloudflare`（使用真实的的`ChatGPT`，非常轻量级，但依赖于第三方服务器，并且有速率限制）

[查看详情](https://github.com/Chanzhaoyu/chatgpt-web/issues/138)

切换方式：

1.  进入 `service/.env.example` 文件，复制内容到 `service/.env` 文件
2.  使用 `OpenAI API Key` 请填写 `OPENAI_API_KEY` 字段 [(获取 apiKey)](https://platform.openai.com/overview)
3.  使用 `Web API` 请填写 `OPENAI_ACCESS_TOKEN` 字段 [(获取 accessToken)](https://chat.openai.com/api/auth/session)
4.  同时存在时以 `OpenAI API Key` 优先

反向代理：

`ChatGPTUnofficialProxyAPI`时可用，[详情](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy)

\# service/.env
API\_REVERSE\_PROXY=

环境变量：

全部参数变量请查看或[这里](https://github.com/HaoZi-Team/chatgpt-web#docker-%E5%8F%82%E6%95%B0%E7%A4%BA%E4%BE%8B)

```
/service/.env
```

## 前置要求

### [](https://github.com/HaoZi-Team/chatgpt-web#node)Node

`node` 需要 `^16 || ^18` 版本（`node >= 14` 需要安装 [fetch polyfill](https://github.com/developit/unfetch#usage-as-a-polyfill)），使用 [nvm](https://github.com/nvm-sh/nvm) 可管理本地多个 `node` 版本

node -v

### [](https://github.com/HaoZi-Team/chatgpt-web#pnpm)PNPM

如果你没有安装过 `pnpm`

npm install pnpm -g

### [](https://github.com/HaoZi-Team/chatgpt-web#%E5%A1%AB%E5%86%99%E5%AF%86%E9%92%A5)填写密钥

获取 `Openai Api Key` 或 `accessToken` 并填写本地环境变量 [跳转](https://github.com/HaoZi-Team/chatgpt-web#%E4%BB%8B%E7%BB%8D)

```
# service/.env 文件

# OpenAI API Key - https://platform.openai.com/overview
OPENAI_API_KEY=

# change this to an `accessToken` extracted from the ChatGPT site's `https://chat.openai.com/api/auth/session` response
OPENAI_ACCESS_TOKEN=
```

## [](https://github.com/HaoZi-Team/chatgpt-web#%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96)安装依赖

> 为了简便 `后端开发人员` 的了解负担，所以并没有采用前端 `workspace` 模式，而是分文件夹存放。如果只需要前端页面做二次开发，删除 `service` 文件夹即可。

### [](https://github.com/HaoZi-Team/chatgpt-web#%E5%90%8E%E7%AB%AF)后端

进入文件夹 `/service` 运行以下命令

pnpm install

### [](https://github.com/HaoZi-Team/chatgpt-web#%E5%89%8D%E7%AB%AF)前端

根目录下运行以下命令

pnpm bootstrap

## [](https://github.com/HaoZi-Team/chatgpt-web#%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83%E8%BF%90%E8%A1%8C)测试环境运行

### [](https://github.com/HaoZi-Team/chatgpt-web#%E5%90%8E%E7%AB%AF%E6%9C%8D%E5%8A%A1)后端服务

进入文件夹 `/service` 运行以下命令

pnpm start

### [](https://github.com/HaoZi-Team/chatgpt-web#%E5%89%8D%E7%AB%AF%E7%BD%91%E9%A1%B5)前端网页

根目录下运行以下命令

pnpm dev

## [](https://github.com/HaoZi-Team/chatgpt-web#%E6%89%93%E5%8C%85)打包

### [](https://github.com/HaoZi-Team/chatgpt-web#%E4%BD%BF%E7%94%A8-docker)使用 Docker

#### [](https://github.com/HaoZi-Team/chatgpt-web#docker-%E5%8F%82%E6%95%B0%E7%A4%BA%E4%BE%8B)Docker 参数示例

-   `OPENAI_API_KEY` 二选一
-   `OPENAI_ACCESS_TOKEN` 二选一，同时存在时，`OPENAI_API_KEY` 优先
-   `OPENAI_API_BASE_URL` 可选，设置 `OPENAI_API_KEY` 时可用
-   `OPENAI_API_MODEL` 可选，设置 `OPENAI_API_KEY` 时可用
-   `API_REVERSE_PROXY` 可选，设置 `OPENAI_ACCESS_TOKEN` 时可用 [参考](https://github.com/HaoZi-Team/chatgpt-web#%E4%BB%8B%E7%BB%8D)
-   `AUTH_SECRET_KEY` 访问权限密钥，可选
-   `TIMEOUT_MS` 超时，单位毫秒，可选
-   `SOCKS_PROXY_HOST` 可选，和 SOCKS\_PROXY\_PORT 一起时生效
-   `SOCKS_PROXY_PORT` 可选，和 SOCKS\_PROXY\_HOST 一起时生效

[![docker](https://github.com/HaoZi-Team/chatgpt-web/raw/main/docs/docker.png)](https://github.com/HaoZi-Team/chatgpt-web/blob/main/docs/docker.png)

#### [](https://github.com/HaoZi-Team/chatgpt-web#docker-build--run)Docker build & Run

docker build -t chatgpt-web .

# 前台运行
docker run --name chatgpt-web --rm -it -p 3002:3002 --env OPENAI\_API\_KEY=your\_api\_key chatgpt-web

# 后台运行
docker run --name chatgpt-web -d -p 3002:3002 --env OPENAI\_API\_KEY=your\_api\_key chatgpt-web

# 运行地址
http://localhost:3002/

#### [](https://github.com/HaoZi-Team/chatgpt-web#docker-compose)Docker compose

[Hub 地址](https://hub.docker.com/repository/docker/chenzhaoyu94/chatgpt-web/general)

version: '3'

services:
  app:
    image: chenzhaoyu94/chatgpt-web # 总是使用 latest ,更新时重新 pull 该 tag 镜像即可
    ports:
      - 3002:3002
    environment:
      # 二选一
      OPENAI\_API\_KEY: xxxxxx
      # 二选一
      OPENAI\_ACCESS\_TOKEN: xxxxxx
      # API接口地址，可选，设置 OPENAI\_API\_KEY 时可用
      OPENAI\_API\_BASE\_URL: xxxx
      # API模型，可选，设置 OPENAI\_API\_KEY 时可用
      OPENAI\_API\_MODEL: xxxx
      # 反向代理，可选
      API\_REVERSE\_PROXY: xxx
      # 访问权限密钥，可选
      AUTH\_SECRET\_KEY: xxx
      # 超时，单位毫秒，可选
      TIMEOUT\_MS: 60000
      # Socks代理，可选，和 SOCKS\_PROXY\_PORT 一起时生效
      SOCKS\_PROXY\_HOST: xxxx
      # Socks代理端口，可选，和 SOCKS\_PROXY\_HOST 一起时生效
      SOCKS\_PROXY\_PORT: xxxx

-   `OPENAI_API_BASE_URL` 可选，设置 `OPENAI_API_KEY` 时可用
-   `OPENAI_API_MODEL` 可选，设置 `OPENAI_API_KEY` 时可用

### [](https://github.com/HaoZi-Team/chatgpt-web#%E4%BD%BF%E7%94%A8-railway-%E9%83%A8%E7%BD%B2)使用 Railway 部署

[![Deploy on Railway](https://camo.githubusercontent.com/081df3dd8cff37aab35044727b02b94a8e948052487a8c6253e190f5940d776d/68747470733a2f2f7261696c7761792e6170702f627574746f6e2e737667)](https://railway.app/new/template/yytmgc)

#### [](https://github.com/HaoZi-Team/chatgpt-web#railway-%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F)Railway 环境变量

| 环境变量名称 | 必填  | 备注  |
| --- | --- | --- |
| `PORT` | 必填  | 默认 `3002` |
| `AUTH_SECRET_KEY` | 可选  | 访问权限密钥 |
| `TIMEOUT_MS` | 可选  | 超时时间，单位毫秒 |
| `OPENAI_API_KEY` | `OpenAI API` 二选一 | 使用 `OpenAI API` 所需的 `apiKey` [(获取 apiKey)](https://platform.openai.com/overview) |
| `OPENAI_ACCESS_TOKEN` | `Web API` 二选一 | 使用 `Web API` 所需的 `accessToken` [(获取 accessToken)](https://chat.openai.com/api/auth/session) |
| `OPENAI_API_BASE_URL` | 可选，`OpenAI API` 时可用 | `API`接口地址 |
| `OPENAI_API_MODEL` | 可选，`OpenAI API` 时可用 | `API`模型 |
| `API_REVERSE_PROXY` | 可选，`Web API` 时可用 | `Web API` 反向代理地址 [详情](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy) |
| `SOCKS_PROXY_HOST` | 可选，和 `SOCKS_PROXY_PORT` 一起时生效 | Socks代理 |
| `SOCKS_PROXY_PORT` | 可选，和 `SOCKS_PROXY_HOST` 一起时生效 | Socks代理端口 |

> 注意: `Railway` 修改环境变量会重新 `Deploy`

### [](https://github.com/HaoZi-Team/chatgpt-web#%E6%89%8B%E5%8A%A8%E6%89%93%E5%8C%85)手动打包

#### [](https://github.com/HaoZi-Team/chatgpt-web#%E5%90%8E%E7%AB%AF%E6%9C%8D%E5%8A%A1-1)后端服务

> 如果你不需要本项目的 `node` 接口，可以省略如下操作

复制 `service` 文件夹到你有 `node` 服务环境的服务器上。

\# 安装
pnpm install

# 打包
pnpm build

# 运行
pnpm prod

PS: 不进行打包，直接在服务器上运行 `pnpm start` 也可

#### [](https://github.com/HaoZi-Team/chatgpt-web#%E5%89%8D%E7%AB%AF%E7%BD%91%E9%A1%B5-1)前端网页

1、修改根目录下 `.env` 文件中的 `VITE_APP_API_BASE_URL` 为你的实际后端接口地址

2、根目录下运行以下命令，然后将 `dist` 文件夹内的文件复制到你网站服务的根目录下

[参考信息](https://cn.vitejs.dev/guide/static-deploy.html#building-the-app)

pnpm build

**Tags:** ChatGPT, WP-ChatGPT

**Categories:** 开源项目, 插件&API

---