相关阅读
图文讲解
源码下载
![图片[1]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506145027793-1024x352.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
当然,你也可以直接使用下面命令,将其下载到服务器上
git clone https://github.com/Yidadaa/ChatGPT-Next-Web.git
![图片[2]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506152114176-1024x505.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
添加站点
![图片[3]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506150106287-1024x741.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
添加SSL
![图片[4]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506150136449.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
![图片[5]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506150155741.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
反向代理设置为127.0.0.1:3000
![图片[6]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506150229673.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
配置文件
你需要创建一个.env文件,其中需要包含你的OpenAI ApiKey,譬如
OPENAI_API_KEY=sk-xxxxxxxxxxxx
上述sk-xxxxxxxxxxxx替换成您的key
除此之外,如果你还需要使用自己的镜像代理URL,则还需要配置BASE_URL
OPENAI_API_KEY=sk-xxxxxxxxxxxx
BASE_URL=https://openai.nooc.ink/
https://openai.nooc.ink/
要改成你自己的OpenAI API镜像代理
镜像代理URL可以使用cloudflare workers搭建,参考👇
参考链接:https://github.com/noobnooc/noobnooc/discussions/9
🆕 将域名 NS 转到 Cloudflare
如果域名已经托管在 Cloudflare 的忽略这一步即可。
⚠️ 经评论区指出,Cloudflare Workers 的域名绑定仅支持托管在 Cloudflare 上的域名。由于本人常年是把域名托管在 Cloudflare 的没有注意到这一点,所以得先将域名的 NS 转到 Cloudflare,如果介意将域名转到 Cloudflare 的话,可以考虑使用 nginx 反代、Docker 容器等其他方法 🥲。
没有 Cloudflare 账号的话可以注册一个,具体注册细节就不多说了。注册或登录到 Cloudflare 的管理界面后,点击侧边栏的 “Websites” ,然后点击 “Add a Site” 按钮准备将域名转到 Cloudflare:
![图片[7]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506145614623-1024x174.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
在 “Enter your site (example.com)” 处输入要转入的域名后,点击 “Add Site”:
![图片[8]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506145618988-1024x671.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
根据 Cloudflare 的提示,在域名注册商处将 NS 修改到 Cloudflare 指定的地址,等待域名解析成功后,即可进行后续操作。
创建一个 Cloudflare Worker
登录到 Cloudflare 的管理界面后,点击侧边栏的 “Workers” 选项,然后点击 “Create a Service” 创建一个 Worker。
![图片[9]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506145623511-1024x474.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
然后在创建界面中输入 “Service name” 后点击 “Create Service” 按钮新建 Worker。“Select a starter” 项先不用管。
![图片[10]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506145627137-1024x787.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
至此 Cloudflare 的 Worker 便创建好了,下面开始修改 Worker 的代码,使其能代理 OpenAI 的 API。
修改 Cloudflare Worker 的代码
在 Worker 的管理界面,点击右上角的 “Quick Edit” 按钮编辑代码 Worker 的代码。
![图片[11]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506145632207-1024x639.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
在左侧的代码编辑器中,删除现有的所有代码,然后复制粘贴以下内容到代码编辑器:
export default {
async fetch(request) {
const url = new URL(request.url);
url.host = 'api.openai.com';
return fetch(url, { headers: request.headers, method: request.method, body: request.body });
},
};
最后点击编辑器右下角的 “Save and deploy” 按钮部署该代码,在弹出的对话框中继续选择 “Save and deploy” 确认部署。
![图片[12]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506145639334-833x1024.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
至此,便可以使用该 worker 的地址来代替 OpenAI 的 API 地址了。比如想要请求 ChatGPT 的 API 时,把官方文档中的 https://api.openai.com/v1/chat/completions
替换成 https://openai.workers.dev
即可(注意这个地址并不存在,是需要换成自己刚刚创建的 Worker 的地址)。
但是你可能会发现,这样做了依然还是没有解决问题,因为 Cloudflare Workers 的 workers.dev
域名也是被 GFW 认证过的🥲。但是好在只是认证了 workers.dev
域名,而 ip 还是幸存的状态,所以我们可以给 Worker 绑定一个自己的域名。
绑定域名
在 Cloudflare Workers 的管理界面中,点击 “Triggers” 选项卡,然后点击 “Custom Domians” 中的 “Add Custom Domain” 按钮以绑定域名。
![图片[13]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506145647723-1024x952.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
输入域名后点击 “Add Custom Domain”,根据提示修改域名的 DNS 记录。因为我的域名是托管在 Cloudflare 上的,所以无需手动更改 DNS 记录,如果域名没有托管在 Cloudfalre 上,可以根据相关提示自行配置。 ⚠️ 据评论区提示,目前只支持 NS 托管在 Cloudflare 上的域名,如果不介意,可以点击 Cloudflare 侧边栏的 “Websites”,然后点击 “Add a Site” 按钮,根据提示将域名的 NS 记录指定到 Cloudflare。
![图片[14]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506145651972-991x1024.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
至此便大功告成。等待片刻,应该就可以通过你自己的域名来代替 OpenAI 的 API 地址了,比如在本文的例子中,想要请求 ChatGPT 的 API ,即是把官方 API 地址 https://api.openai.com/v1/chat/completions
换为我自己的域名 https://openai.nooc.ink/v1/chat/completions
,其他参数均参照官方示例即可。由于 Cloudflare 有每天免费 10 万次的请求额度,所以轻度使用基本是零成本的。⚠️ 注意请不要使用我这里的 openai.nooc.ink
,因为随时可能会被我关闭🤪
![图片[15]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506145809352.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
安装依赖
点击终端,在项目的目录下运行下面命令
yarn install
![图片[16]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506152200892.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
启动服务
同样地,在项目目录下运行下面的命令来启动服务
yarn dev
如果你需要后台运行,则可以使用screen
后台运行,譬如启动一块屏幕名字叫做ChatGPT
screen -R ChatGPT
![图片[17]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506152356577.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
然后在后台运行
yarn dev
![图片[18]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506152433861.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
效果演示
![图片[19]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506152654547-1024x509.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
![图片[20]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506152708244-1024x508.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
![图片[21]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506152726294-1024x508.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
![图片[22]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506152741687-1024x510.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
![图片[23]-如何制作一个ChatGPT聊天页面(二) | ChatGPT国产化思路-FancyPig's blog](https://static.iculture.cc/wp-content/uploads/2023/05/20230506152839326-1024x509.png?x-oss-process=image/auto-orient,1/format,webp/watermark,image_cHVibGljL2xvZ28ucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMTA,x_10,y_10)
- 最新
- 最热
只看作者