文章目录
- 1 克隆项目
- 2 配置 .env 文件
- 3 安装项目依赖
- 3.1 安装后端依赖
- 3.2 安装前端依赖
- 4 本地测试环境运行
- 4.1 运行后端
- 4.2 运行前端
- 5 服务器环境配置
- 5.1 Linux 上安装 Node.js
- 5.2 安装 pnpm
- 6 部署上线
- 6.1 部署后端
- 6.2 部署前端
- 6.3 配置 Nginx
- 6.4 开放端口
- 6.5 上线访问
1 克隆项目
通过 Git 克隆 ChatGPT Web 项目到本地
git clone git@github:Chanzhaoyu/chatgpt-web.git
项目地址：https://github/Chanzhaoyu/chatgpt-web
2 配置 .env 文件
进入项目目录下的 service 文件夹下，复制 .env.example 到 service/.env
需要配置 service/.env文件中的 OPENAI_API_KEY 、OPENAI_API_BASE_URL、OPENAI_API_MODEL、AUTH_SECRET_KEY
我的 OPENAI_API_KEY 是通过在 AI Proxy 上充值后使用其提供的 API Key 来调用 OpenAI API，不过需要将OPENAI_API_BASE_URL 设置为https://api.aiproxy.io
OPENAI_API_MODEL 默认为 gpt-3.5-turbo
因为项目要部署到公网，所以最好设置 AUTH_SECRET_KEY 变量来添加密码访问权限
更多环境变量参考：环境变量
3 安装项目依赖
3.1 安装后端依赖
进入文件夹 /service 运行以下命令
pnpm install
3.2 安装前端依赖
在项目根目录下运行以下命令
pnpm bootstrap
如果本地没安装 pnpm，先执行
npm install pnpm -g安装 pnpm如果本地没有 node 环境，请参考：npm、yarn的安装和设置淘宝镜像源
4 本地测试环境运行
4.1 运行后端
进入文件夹 /service 运行以下命令
pnpm start
成功运行后，后端运行在 http://127.0.0.1:3002/
4.2 运行前端
在根目录下运行以下命令
pnpm dev
成功运行后，前端运行在 http://localhost:1002/
5 服务器环境配置
5.1 Linux 上安装 Node.js
下载 Node.js
wget https://nodejs/download/release/v16.20.1/node-v16.20.1-linux-x64.tar.xz
解压
tar -xf node-v16.20.1-linux-x64.tar.xz
放到指定目录
mv node-v16.20.1-linux-x64 /usr/local/node
配置环境变量
通过vim编辑/etc/profile文件
vim /etc/profile
在一般模式下按G来到/etc/profile文件的末尾，按i进入编辑模式，添加：
export NODE_HOME=/usr/local/node
export PATH=$NODE_HOME/bin:$PATH
按Esc键回到一般模式，按:进入命令模式输入wq保存退出
修改后需要让新的环境变量生效，运行以下命令
source /etc/profile
测试 node
node -v
运行后成功输出 node 的版本，说明环境变量配置成功，已经能找到 node
测试 npm
npm -v
运行后成功输出 npm 的版本，说明环境变量配置成功，已经能找到 npm
设置 npm 使用淘宝镜像源
npm config set registry https://registry.npmmirror/
查看 npm 当前镜像源
npm config get registry
如果输出 https://registry.npmmirror/ 说明淘宝镜像源配置成功
5.2 安装 pnpm
Node.js 安装和配置好环境后执行以下命令来安装 pnpm：
npm install pnpm -g
通过以下命令查询 npm 安装依赖的全局路径：
npm prefix -g
这里我服务器上查询出来的路径为：/www/server/nodejs/v16.9.0
可以看到 pnpm 安装在 /www/server/nodejs/v16.9.0/bin
同样我们也需要将该路径添加到环境变量中
通过vim编辑/etc/profile文件
vim /etc/profile
在一般模式下按G来到/etc/profile文件的末尾，按i进入编辑模式，在 PATH 中添加 /www/server/nodejs/v16.9.0/bin：
export NODE_HOME=/usr/local/node
export PATH=$NODE_HOME/bin:/www/server/nodejs/v16.9.0/bin:$PATH
按Esc键回到一般模式，按:进入命令模式输入wq保存退出
修改后需要让新的环境变量生效，运行以下命令
source /etc/profile
测试 pnpm
pnpm -v
运行后成功输出 pnpm 的版本，说明环境变量配置成功，已经能找到 pnpm
6 部署上线
6.1 部署后端
将本地项目的 service 文件夹上传到已经配置好 Node.js 环境的服务器上。
上传好后进入 service 文件夹
安装依赖
pnpm install
运行后端
nohup pnpm start &
nohup命令可以让进程忽略 SIGHUP 信号，即使终端关闭也不会终止进程在命令后面添加
&符号可以将进程放到后台运行这样 Node.js 程序将被放到后台，并与当前终端断开关联
如果退出 Shell 终端后，服务仍然断开
那么当执行
nohup命令后，不要直接关闭 shell 窗口。先执行 exit ，然后再关闭 Shell 窗口。
6.2 部署前端
1、修改根目录下 .env 文件中的 VITE_GLOB_API_URL 为实际服务器的后端接口地址
2、项目根目录下运行以下命令
pnpm build
3、然后将 dist 文件夹内的文件上传到服务器
注意：把项目发布到公网时，应该设置
service/.env中的AUTH_SECRET_KEY变量添加密码访问权限，也应该修改index.html中的title，防止被关键词搜索到
6.3 配置 Nginx
在前端项目的 Nginx 配置中添加：
# 防止爬虫抓取
if ($http_user_agent ~* "360Spider|JikeSpider|Spider|spider|bot|Bot|2345Explorer|curl|wget|webZIP|qihoobot|Baiduspider|Googlebot|Googlebot-Mobile|Googlebot-Image|Mediapartners-Google|Adsbot-Google|Feedfetcher-Google|Yahoo! Slurp|Yahoo! Slurp China|YoudaoBot|Sosospider|Sogou spider|Sogou web spider|MSNBot|ia_archiver|Tomato Bot|NSPlayer|bingbot")
{
return 403;
}
location /api/ {
proxy_pass http://服务器IP:3002/api/;
proxy_buffering off;
}
Q: 前端没有打字机效果？
A: 一种可能原因是经过 Nginx 反向代理，开启了 buffer，则 Nginx 会尝试从后端缓冲一定大小的数据再发送给浏览器。请尝试在反代参数后添加
proxy_buffering off;，然后重载 Nginx。其他 web server 配置同理。
6.4 开放端口
要记得开放云服务器相应的端口，如果安装了宝塔面板，那么宝塔面板相应的端口也需要开放！！！不然服务访问不到。
6.5 上线访问
以上步骤都完成后，即可通过服务器中前端部署的地址来访问。