本地彭于晏 发表于 2023-8-21 04:11:35

部署和调试打造属于自己的ChatGPT

首先我关注这个项目有一段时间了,不得不说作者和他的社区真的很猛!

首先这个项目截至目前已经有了40.9K的Start了,Fork也已经有了38.1K了,这个数据真的超级牛批了。

那么我们来看一下这款号称: “一键拥有你自己的跨平台 ChatGPT 应用”。的应用都有那些过人之处吧。

不想看的直接去搭建好的站点体验,下面的教程是针对想自己搭建和自己本地运行的

[https://ikunn.icu](https://ikunn.icu)

都是大棚里的教程如有雷同纯属巧合,CV的时候可能没注意别介意。

根据作者的ReadMe写道:

## 主要功能

- 在 1 分钟内使用 Vercel 免费一键部署
- 提供体积极小(~5MB)的跨平台客户端(Linux/Windows/MacOS), 下载地址
- 完整的 Markdown 支持:LaTex 公式、Mermaid 流程图、代码高亮等等
- 精心设计的 UI,响应式设计,支持深色模式,支持 PWA
- 极快的首屏加载速度(~100kb),支持流式响应
- 隐私安全,所有数据保存在用户浏览器本地
- 预制角色功能(面具),方便地创建、分享和调试你的个性化对话
- 海量的内置 prompt 列表,来自中文和英文
- 自动压缩上下文聊天记录,在节省 Token 的同时支持超长对话
- 多国语言支持:English, 简体中文, 繁体中文, 日本語, Español, Italiano, Türkçe, Deutsch, Tiếng Việt, Русский, Čeština
- 拥有自己的域名?好上加好,绑定后即可在任何地方无障碍快速访问
那么这是这个项目中基本的一些功能清单,另外功能还在陆续更新中,我们今天着重讲解一下如何使用他。
首先,你如果想在自己的本地PC上直接使用的话,你无需下载NodeJS、Yarn等的环境配置文件,也就是说门槛为0!,作者在Releases中已经打造好了全面适配Windows和MacOS的桌面端应用,也就是说你直接下载解压后直接启动就可以运行了。
下面我们进入仓库地址:
- [https://github.com/Yidadaa/ChatGPT-Next-Web](https://link.zhihu.com/?target=https%3A//github.com/Yidadaa/ChatGPT-Next-Web)
在右侧的Release中直接点击,选择适合自己的操作系统版本,下载解压后直接使用即可。

!(https://pic3.zhimg.com/80/v2-742b664a7e33ca0cc598efa95e46e026_720w.webp)

目前截至发稿日最新的版本为v2.9.4

**下面让我来给大家做一个教程和评测吧。**

**我们围绕着三个主流系统上如何使用:**

**1、windows安装使用(这里会穿插讲解一下原生代码Clone到本地后的运行方法)**

**2、MacOS上安装使用**

**3、宝塔面板如何运行部署**

**后面会统一讲解一下如何设置APIKey和代理节点的使用方法。**

## **1、在Window上安装使用**

首先我们来看Widnows版本用户的”傻瓜式“安装使用

1、首先我们通过刚才的界面直接下载ChatGPT.Next.Web_2.9.4_x64-setup.exe 这个即可

下载后是一个可.exe的可执行文件,大概是这样子的

!(https://pic2.zhimg.com/80/v2-c2abd4f8ff5624da33f5e2c666ca1c49_720w.webp)

接下来我们双击运行它,可能会出现下面的弹窗,我们不用管他,点击仍然运行即可。

(这里需要注意的是,下载安装的文件目录一定是在某个盘下的二级目录,不要直接安装在比如D:// 下的一级目录下,他会有个提示的,没关系)



!(https://pic4.zhimg.com/80/v2-9d0e33604609ab366bb51d7dc1494583_720w.webp)

点击仍然要运行后,我们会出现以下界面,我们点击Next

!(https://pic2.zhimg.com/80/v2-6a461e5a83d5daab96555b019e98add1_720w.webp)

我们Next后会出现让你选择安装目录的路径,这里注意一下我上面说的路径问题。

!(https://pic3.zhimg.com/80/v2-4d1b8a9b0a45fcf8286f4c6e8c325d06_720w.webp)

我们自己选择到对应的目录位置后,继续点击Next

!(https://pic3.zhimg.com/80/v2-91c288c68240af092483942c14d78022_720w.webp)

接下来我们点击Install

!(https://pic3.zhimg.com/80/v2-2ddec3d0bf347a59f1f3b3aab8aa093a_720w.webp)

我们Install后会出现两个选项,分别是Run ChatGPT Next Web 和Create desktop short truct

至于一个意思是现在立刻运行 ChatGPT Next Web这个软件,一个是创建桌面快捷方式。我们根据自己的需求勾选或者取消即可,

!(https://pic2.zhimg.com/80/v2-1f388fcdb5c5b0bcf117ecc47acaeced_720w.webp)

这样我们就完成了Windows上安装——————简直不要太方便了兄弟们,这个项目的牛逼之处就在于,很多Github上的代码你都需要拉下来重新编译,有时候环境不对的情况下还会导致错误失败的原因,这个Release中就相当于帮你打包成了完整的软件,就像我们常用的QQ和微信一样,直接桌面安装。真的非常厉害!

我们安装完成后直接点击Finish就可以看出来直接在本地就能运行了。就像微信一样简单Easy。



!(https://pic2.zhimg.com/80/v2-650e0cef3b11fc4a228647400e93a381_720w.webp)

下面我们切换一下分支,来讲解一下,如何在本地Build和Install运行他,也就是我们常说的本地编译,如果你是一名开发者你肯定不会陌生这些操作,尤其是前端的同学们,这节主要是为了方便你自己本地进行修改代码和学习代码来用的,其实一般操作这一步骤的同学基本都是同行了。就不赘述那么多,直接来讲一下吧。

首先我们使用Git命令将次仓库Clone下来



我们桌面新建一个文件夹。

!(https://pic3.zhimg.com/80/v2-24341c11975cb29ce267da54a72f21ea_720w.webp)

右键使用GitBash进行操作。

输入命令:git clone [https://github.com/Yidadaa/ChatGPT-Next-Web.git](https://link.zhihu.com/?target=https%3A//github.com/Yidadaa/ChatGPT-Next-Web.git)

!(https://pic1.zhimg.com/80/v2-8be77bceabfee418d89e78de89c5d338_720w.webp)

出现100% 就说明我们已经把这个仓库的代码Clone下来了。

我们双击进入该文件夹,我们就可以看到改代码了。

!(https://pic3.zhimg.com/80/v2-50f8630e0d3de627356b3ed3b87bb51e_720w.webp)

如果你想本地运行它,请确认你的电脑中有NodeJS 这些环境,最基本的你要有

我们如何检查呢?使用Win+R 输入CMD 进入控制台。输入Node -v检查我们的Node版本。

yarn 自己安装

!(https://pic1.zhimg.com/80/v2-e70e6f1acd6accafbbbe075026b7ae30_720w.webp)

我这里使用的是16.19.1版本的NodeJS 你可以尝试一下其他版本,没试过其他的我不晓得。

!(https://pic2.zhimg.com/80/v2-49d4241354669840a485cb026e329e15_720w.webp)

那么确定好版本之后呢,我们需要给他配置一个环境变量,我们看到刚才的文件夹下方有一个叫做.env.template 的文件 他就是一个环境配置文件的模板,我们复制他 并且使用F12 对他进行重命名,把后面的 .template去掉,改成.env

!(https://pic4.zhimg.com/80/v2-ad1b3bf48ceb4442ed4eb13d811b1ccb_720w.webp)

那么我们创建好这个文件夹之后,我们来使用记事本进行打开,为他填上所需要的变量,这里给大家截个图,然后我们按照需要自行配置即可。



!(https://pic4.zhimg.com/80/v2-e7746557a73ae56774d517a727342383_720w.webp)



我们打开后就会看到下面的文件,以及一大堆的配置参数。

!(https://pic4.zhimg.com/80/v2-ae8172eef947be896d5de4bdae76f107_720w.webp)

下面我们来详细讲解一下配置参数里面的东西,以及如何配置吧。

## `OPENAI_API_KEY` (必填项)

OpanAI 密钥,你在 openai 账户页面申请的 api key。 买key可以来:[https://hezuba.top/](https://link.zhihu.com/?target=https%3A//hezuba.top/)

## `CODE` (可选)

访问密码,可选,可以使用逗号隔开多个密码。

警告:如果不填写此项,则任何人都可以直接使用你部署后的网站,可能会导致你的 token 被急速消耗完毕,建议填写此选项。

## `BASE_URL` (可选)

> Default: `https://api.openai.com`
> Examples: `http://your-openai-proxy.com`

OpenAI 接口代理 URL,如果你手动配置了 openai 接口代理,请填写此选项。

> 如果遇到 ssl 证书问题,请将 `BASE_URL` 的协议设置为 http。

## `OPENAI_ORG_ID` (可选)

指定 OpenAI 中的组织 ID。

## `HIDE_USER_API_KEY` (可选)

如果你不想让用户自行填入 API Key,将此环境变量设置为 1 即可。

## `DISABLE_GPT4` (可选)

如果你不想让用户使用 GPT-4,将此环境变量设置为 1 即可。

## `HIDE_BALANCE_QUERY` (可选)

如果你不想让用户查询余额,将此环境变量设置为 1 即可。

上面就是对应的配置文件的详细介绍,这个ReadMe下面也是有的 有需要的可以自行设置。



设置好参数之后,我们退出保存。由于是为了给大家演示,就不去配置这些参数了。

我们来看下一步。

我们进入上方文件目录栏里,来进入控制台



!(https://pic1.zhimg.com/80/v2-6dc05001977c0c10e2cc9186f51d0854_720w.webp)

输入CMD后进入控制台界面我们输入 yarn install 没有这些环境的同学自行配置吧。

!(https://pic3.zhimg.com/80/v2-0b9d98f0980e186e11f5cddedd784cbe_720w.webp)

输入yarn install 后我们等待他把依赖安装完成。(可能需要些时间,耐心等待即可)

你也可以直接俩一起执行 yarn install && yarn dev

!(https://pic4.zhimg.com/80/v2-b03451c818928bb95966c6b6de3fae5b_720w.webp)

等待他加载完成后我们继续在这个页面上输入命令 yarn dev

!(https://pic2.zhimg.com/80/v2-da255b5d2b091e1e4dcecc920844735d_720w.webp)

输入yarn dev

!(https://pic3.zhimg.com/80/v2-3338ada648d732948b2c3f14a7f0da5e_720w.webp)



!(https://pic1.zhimg.com/80/v2-dac9c8de047d4e38dbd55e057b48682c_720w.webp)

等到下面出现Successfuly 的时候就说明成功了,我们就可以在浏览器通过localhost:3000 来进行访问了

这期间有错误提示就[http://www.baidu.com](https://link.zhihu.com/?target=http%3A//www.baidu.com) 搜索一下就好了



成功后效果

!(https://pic3.zhimg.com/80/v2-6ac2121253bdc685a283c2827e6605e2_720w.webp)

你如果修改代码里面的东西的话用VSCode 或者是WebStrom 加载进去就行了编译器就不用我教了吧。

!(https://pic2.zhimg.com/80/v2-34f76ef8d8e3710b2aa100359ab3ff8d_720w.webp)

这是作者的Reame 自己看哈

基本上本地二开,调试就是这样了 还有一点:如果你要部署在CentoOS环境上你不要把本地Node_moudle给带上去。不知道是什么原因我本地yarn install 之后打压缩包放在服务器上不行。也可能是操作问题吧,我直接下载纯净的代码把自己修改后的内容进行了替换就是可以的。

具体就是在windows上yarn install 和yarn build 有冲突 如果你也遇到了就重新下载一个纯净的git代码打包到服务器上然后找到你更改的文件替换 在服务器上去yarn install 和yarn build

## 2、在MacOS上下载运行

由于我没有MAC 我只能帮你脑部一下咯。

哈哈哈哈

依然是去Release中下载安装包

地址:[https://github.com/Yidadaa/ChatGPT-Next-Web/releases](https://link.zhihu.com/?target=https%3A//github.com/Yidadaa/ChatGPT-Next-Web/releases)

!(https://pic2.zhimg.com/80/v2-d3e032387c4efd31dd2408cbf3e37341_720w.webp)

这个.dmg的下载后就直接可以运行了。如果有Mac的朋友麻烦补一下看有没有问题哈。

## **3、宝塔如何安装部署**

好了,本地的两种操作系统都进行了讲解,在宝塔上安装主要是踩过几个坑,给大家避免一下。

首先你需要购买一台服务器,然后安装宝塔面板。开心版的话也不是不行。就是可能会有奇奇怪怪的BUG。

我们打开宝塔之后,默认安装他所需要的环境,我的宝塔环境有些杂乱就不给大家演示了,大家上网搜索一下初始化安装的步骤就行了。

我这里主要用到了PM2管理器

!(https://pic3.zhimg.com/80/v2-0d1d8356ba41493beb49b227d61c03ca_720w.webp)



我们去软件商店进行搜索,注意一下NodeJS管理器和PM2管理器有冲突大家别搞错了!

!(https://pic3.zhimg.com/80/v2-d1766e8657fbb1f399c647d1114758da_720w.webp)

我们打开PM2管理器,如果是第一次安装会比较慢,大家耐心能等待一下,然后我们进入Node版本,这里我切换到和我Windwos一样的16.19.1

!(https://pic1.zhimg.com/80/v2-33c1eacfe004464891dc06f4474a536c_720w.webp)

切换好后会比较卡,稍等刷新一下就好了。

然后我们将下载好的代码上传到服务器上

!(https://pic4.zhimg.com/80/v2-1a692a387935b2ae1b01ac83918cb10b_720w.webp)

然后我们继续回到PM2管理器,来添加项目

!(https://pic4.zhimg.com/80/v2-6da2bbb32eb5cead2284a2ad4ce0bc4b_720w.webp)

里面的设置基本是这样的

!(https://pic1.zhimg.com/80/v2-b2578bf5ec0dcf057b90ab9b592e9b54_720w.webp)

如果提示没有模块管理去左侧的模块管理下载安装就行了,然后再返回

!(https://pic2.zhimg.com/80/v2-8044a20efec2a408ea19e4cbd1927455_720w.webp)

正常情况下他就能启动正常运行了,另外通过域名访问有两种方式

第一种,直接在PM2管理器中映射域名

!(https://pic4.zhimg.com/80/v2-f30396d5a86b9881c4dd01ee7f4c239b_720w.webp)

第二种通过反向代理方式:

在左侧网站中添加一个PHP项目 选择纯静态

!(https://pic2.zhimg.com/80/v2-56db508ef80aab9f191708c6be7285fd_720w.webp)

然后自行添加SSL证书开启HTTPS之类的常规操作

!(https://pic3.zhimg.com/80/v2-5d40b6721d6968491affd55c0a52ac42_720w.webp)

主要的是我们需要一个反向代理

!(https://pic4.zhimg.com/80/v2-16e331daebcffd6851136be117d986eb_720w.webp)

点击添加反向代理,按照上面的配置,如果你改了端口就按照你实际的端口来操作。

!(https://pic4.zhimg.com/80/v2-f13a9a4ab6cfc5aa6063dd9eb88fcd13_720w.webp)

然后点击配置文件将下方的配置输入进去:

!(https://pic3.zhimg.com/80/v2-2145357162bdc4efc170aa8cf3aa8216_720w.webp)

proxy_cache off;

proxy_buffering off;

chunked_transfer_encoding on;

tcp_nopush on;

tcp_nodelay on;

keepalive_timeout 300;



别忘了保存啊,保存好之后就可以通过域名访问你的ChatGPT了哈

Docker我嫌麻烦,个人习惯问题别喷,所以我没写。

记录一下踩坑的地方:

1. 宝塔的WAF关了 等运行成功后再开

!(https://pic4.zhimg.com/80/v2-340fa42551486a3373ae6f720b9bb507_720w.webp)

2、把安全中心的防火墙暂时关了,还有入侵防御给关了。

!(https://pic1.zhimg.com/80/v2-4dc9cd6d1f745e863bc1a0344602b71c_720w.webp)

3、就是PM2管理器和NodeJS冲突的问题了

!(https://pic4.zhimg.com/80/v2-4a98d1aaca49bf1d0e416ca942120483_720w.webp)

还有就是:

不要把Windows上build后的东西给传上来 还有install 的东西

不要把Windows上build后的东西给传上来 还有install 的东西

不要把Windows上build后的东西给传上来 还有install 的东西

我不知道为什么我也不想知道。

我是改完之后在本地的文件夹里把修改后的某些代码直接Copy过来在服务器上进行的修改然后build的

基本上就这样了。

## **下面说一下设置的用法。**

**图片上的水印是我自己的别怀疑,不是抄袭**

!(https://pic3.zhimg.com/80/v2-765e88a8f551e0e535570adcd1148b86_720w.webp)

关于如何使用CloudFalre搭建OpenAI的文章到处都是我说一下我的吧

我在CSDN上CV的哈,原作者看到了别捶我谢谢



## 第一步:注册cloudflare账号

前往官方网站注册一个账户 :[https://www.cloudflare.com/](https://link.zhihu.com/?target=https%3A//www.cloudflare.com/)



!(https://pic2.zhimg.com/80/v2-547fa19a6307254e56eb6a3539194169_720w.webp)

## 第二步:创建worker,进行请求中转

!(https://pic2.zhimg.com/80/v2-6e1d58d4c8d45f45b6479eddfe47a8e1_720w.webp)

名字可以自己随便取一个,点击快速编辑,进入代码编辑界面

!(https://pic3.zhimg.com/80/v2-f361f602d5de1df5623e14648d2b22f2_720w.webp)



!(https://pic3.zhimg.com/80/v2-5c2e1b6d397f9d1228906dc1ee0b5f72_720w.webp)

js代码为



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 });

},

};

至此,代理中转服务就搭建完成了,但是我们在国内仍然不能使用的,需要配置一个可访问域名进行域名转发

## 第三步:域名转发

在左侧菜单栏==>网站 ===>添加站点,添加上我们自己的域名,这里需要是根域名

!(https://pic4.zhimg.com/80/v2-3a9d6dfb067a1390b794af0fb6ad3567_720w.webp)



配置以后,点击域名,会提示你修改域名的DNS服务器

需要在我们自己的域名控制面板里,找到dns管理,修改dns服务器地址

比如我的域名是在阿里云上,我们就可以在下面这里,修改为cloudflare 要求的DNS地址

等待cloudflare验证DNS配置成功后,会给你邮箱发送通知邮件

就回到Worker配置那里,增加一个域名转发,我添加了一个自己的自定义域名

!(https://pic3.zhimg.com/80/v2-aa5ee846944886d0dca2ee70947918a2_720w.webp)

以上操作完成后,就可以在使用OpenAI官方接口的时候,配置使用自己的代理域名了

我就不展示了自己用自己的。

基本上代理就是这么玩儿的。

其他的应该没什么遗漏的,如果有的话请见谅。可以在评论区进行互动。

公益站点:ikunn.icu 我是哥哥的好粉丝!!!!

本地彭于晏 发表于 2023-8-21 04:12:01

水印别介意,就是我自己

王一之 发表于 2023-8-21 13:42:18

一注册上来,很明确的发广告的 都是直接封号处理的

看哥哥发的内容也不是收费之类的,也都是删帖处理

如果有教程+公益性的网站,宣传一下自己的其它东西,倒不是很反对

之前那个贴,我试了几下,都错误,我就删除了

本地彭于晏 发表于 2023-8-21 14:38:01

王一之 发表于 2023-8-21 13:42
一注册上来,很明确的发广告的 都是直接封号处理的

看哥哥发的内容也不是收费之类的,也都是删帖处理


哈哈哈哈不得不承认一开始确实是想来打广告,没想到这儿真有教程{:4_115:} 不打了学写脚本去,我发的三个帖子都是自己搭建的不收费放心,现在不会以后也不会。
页: [1]
查看完整版本: 部署和调试打造属于自己的ChatGPT