站点图标 加密狗

ChatGPT接入到web网站保姆级教程

加密狗
ChatGPT接入到web网站保姆级教程

背景

今天我就来把接入Web网站，这个网站不需要魔法上网，也不需要注册，打开就可以使用。我做这个网站的主要目的是为了让没有精力或者条件去注册ChatGPT的小伙伴也能免费体验到ChatGPT。

同时我会公布我完整的搭建教程，让每一个人都能轻轻松松搭建自己的ChatGPT网站并分享给朋友使用。

我先来展示一下我搭建的网站，既可以在电脑上使用，也可以在手机上使用。它接入了ChatGPT3.5的API，如果GPT 4.0的API申请通过，我也会公布4.0的网站给大家体验。喜欢的给个一键三连吧。

这是我的ChatGPT web服务器在电脑和手机上的展示效果。 

我先教大家怎么自己搭建ChatGPT web网站，博客最后会公布我的网站给大家免费使用。

你也可以直接拉到最后获取我的ChatGPT web网站使用。

搭建ChatGPT web网站

API key

需要一个chatGPT账号并生成一个API Key，这个API secret Key是为了验证你的身份。

这个非常简单，我们打开openai的平台地址：https://platform.openai.com/

登录之后点击右上角的头像，点击Manage Account->API Keys->Create New Secret Key, 然后复制下来保存备用。

云服务器

云服务器需要在境外。

VPS/云服务器

如果你还没有云服务器或者VPS，可以点此地址购买：https://cnwebmasters.com/thread-19.htm

它们的VPS非常便宜，可以用来搭建科学上网，搭建个人网站，也可以用来接入ChatGPT。如果你的预算充足，也可以直接购买云服务器。

云服务器建议使用Linux Ubuntu系统

如果有了云服务器我们先切换到root账户sudo su

然后执行以下命令来复制一份网站的模版：

git clone https://github.com/techxiaofei/chatgpt-web.git
cd chatgpt-web

安装依赖

安装Node

node 需要 18或以上的版本

执行以下命令：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

# 安装nodejs
apt install nodejs

# 安装node包管理器
apt install npm

# 升级包管理工具upgrade
npm install -g n

# 升级到node.js最新稳定版
n stable # latest

hash -r

# 查看版本，如果是 18及以上就可以了
node -v

安装PNPM

如果你没有安装过 pnpm，这是npm的替代品

1

npm install pnpm -g

填写密钥

# 进入 service目录
cd service
# 打开 .env 文件
vim .env

# 填写你之前复制的API srecet key
OPENAI_API_KEY=abcdefgh

安装服务

后端

我们在文件夹 service 运行以下命令

1

pnpm install

前端

根目录chatgpt-web下运行以下命令

1

pnpm bootstrap

运行

后端服务

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

1
2

touch nohup.out
nohup pnpm start & tail -f nohup.out

前端网页

默认是1002端口，记得修改云服务器的防火墙允许你使用的端口被外网访问。

如果需要修改端口请打开这个文件修改。

1

vim vite.config.ts

我这里把端口改成80，因为http的默认端口是80，为了方便我绑定域名到这个ip上。如果你的80端口被占用，那请选择另外的端口。

根目录下运行以下命令

1
2

touch nohup.out
nohup pnpm dev & tail -f nohup.out

绑定域名

如果你有域名，可以直接绑定到你的公网IP上，既可以绑定`顶级域名也可以绑定到二级域名。

只需要加一条A记录即可。

顶级域名

使用 http://example.com 就可以访问了。 

二级域名

使用 http://chat.example.com 就可以访问了。 

杀进程

如果需要重启，需要执行以下命令查到所有的进程ID，然后杀掉所有进程

1
2
3
4

ps -ef | grep -v grep | grep -E 'pnpm|node'

# 所有的进程都需要kill掉
kill -9 PID

修改个人信息

如果你想修改你的个人信息：

打开helper.ts文件，vim src/store/modules/user/helper.ts

export function defaultSetting(): UserState {
  return {
    userInfo: {
      avatar: 'https://raw.githubusercontent.com/Chanzhaoyu/chatgpt-web/main/src/assets/avatar.jpg',
      name: '科技小飞哥',
      description: 'Youtube频道 <a href="https://www.youtube.com/@techxiaofei" class="text-blue-500" target="_blank" >科技小飞哥</a>',
    },
  }
}

userInfo的信息都可以修改。

密码访问

如果需要添加密码访问： 

打开.env文件，vim service/.env

这个等号后面填上你的密码即可。

AUTH_SECRET_KEY=

如果想修改提示文本：

vim src/locales/zh-CN.ts

搜索：unauthorizedTips并修改文本即可。 

每小时访问限制

打开service目录下的.env文件，vim service/.env

# Rate Limit
MAX_REQUEST_PER_HOUR=3600

结束语

在中国使用ChatGPT是强需求，一般都会由于使用太过火爆，会让自己的VPS崩溃，当然也异常容易被推广以及获取流量。

退出移动版