背景
有时候通过 chatGPT 前端访问的时候会出现一些拥塞或响应很慢，但 API 仍响应迅速，为了降低交互门槛，本篇将介绍如何速搭一个自己的前端页面，以 API 形式直接交互。
同时，在本次 Nginx 的反向代理中，引入了对于服务端推送事件(ServerEvents)的流式响应代理方法，实现响应文字的逐字输出。
注意:
API调用需要消耗 tokens，并非免费交互，请在使用前三思。
获取API Keys
此处省略账号 OpenAI 账号创建，请自行准备。
首先，登陆后台页面: OpenAI API
然后，在 API keys 中点击创建 secret key
点击 Create 后会有弹窗返回对应 key 内容
请妥善保管好你的 secret key。
部署服务
本次服务采用 GitHub - ddiu8081/chatgpt-demo 实现”开箱即用”。
环境依赖:
- nodejs: ≥ 18.15.0
- nginx
环境准备
cd /usr/local
wget https://nodejs.org/dist/v18.15.0/node-v18.15.0-linux-x64.tar.xz
tar xf node-v18.15.0-linux-x64.tar.xz
mv node-v18.15.0-linux-x64 node-v18.15.0
ln -s node-v18.15.0 node
export NODEPATH=/usr/local/node/bin
export PATH=$PATH:$NODEPATH拉取仓库
在服务端执行如下命令
cd /opt
git clone https://github.com/ddiu8081/chatgpt-demo.git
cd chatgpt-demo安装依赖
npm i -g pnpm
pnpm install启动运行
# 请在 OPENAI_API_KEY 填入 OpenAI 上生成的 API Key
export OPENAI_API_KEY=sk-xxxx
pnpm run dev --host 0.0.0.0浏览器验证访问: http://192.168.7.28:3000
访问正常，接下来开始配置域名的反向代理。
配置Nginx
此处省略 Nginx 安装。
upstream chatgpt_demo {
server 192.168.7.28:3000;
}
server {
listen 80;
listen 443 ssl;
server_name chatgpt-demo.nestealin.com;
charset utf-8;
access_log logs/$http_host.access.main.log main;
error_log logs/chatgpt-demo.nestealin.com.error.log error;
ssl_certificate keys/server.cer;
ssl_certificate_key keys/server.key;
ssl_session_timeout 5m;
ssl_prefer_server_ciphers on;
ssl_protocols TLSv1.2 TLSv1.3;
location / {
chunked_transfer_encoding off;
proxy_cache off;
proxy_buffering off;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-Port $remote_port;
proxy_set_header Connection '';
proxy_pass http://chatgpt_demo;
}
}由于 OpenAI 是以 Server Sent Events 形式进行交互，客户端以 text/event-stream 格式发送事件，而服务端也会以 EventSource 的事件类型进行流式响应，这也就是为什么能在前端看到响应文字是逐字输出的。
以下几项是实现逐字输出的关键。
proxy_cache off;
proxy_buffering off;
proxy_http_version 1.1;
proxy_set_header Connection '';
chunked_transfer_encoding off;如果没有上述配置，那么返回结果将会等 Nginx 在完整收到结果后，再一股脑整段成篇地返回给用户，而不会像在 chatGPT 页面那样逐字流畅返回。
访问测试
浏览器访问: https://chatgpt-demo.nestealin.com/
如上图所示，后续即可通过自己的服务端页面直接调用 API 交互。
