部署前端

328 阅读1分钟

首先把前端项目打包成dist文件

npm run build

之前写过一篇用下载的

此处为语雀内容卡片,点击链接查看:www.yuque.com/lzh777/sa9u…

今天用面板首先我们配置几个子域名,教程如下

此处为语雀内容卡片,点击链接查看:www.yuque.com/lzh777/ni6a…

视频操作如下:

QQ2024127-175656.mp4

把dist文件内容拿进来后,即可直接生效

输入网址验证即前端部署成功

这个项目只有一个接口

前端post请求:ttt/api/stream/generate

后端地址端口为10011 : /api/stream/generate

前端反向代理配置

location /ttt/api/stream/generate {
        proxy_pass http://127.0.0.1:10011/api/stream/generate;
        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-Forwarded-Proto $scheme;
    proxy_buffering off;      # 关闭缓冲
    proxy_cache off;          # 关闭缓存
    chunked_transfer_encoding on;  # 启用 chunked 响应
    proxy_http_version 1.1;   # 确保使用 HTTP/1.1
}

就相当于把/ttt/api/stream/generate代理到http://127.0.0.1:10011/api/stream/generate

因为我是把前端和后端都是部署在同一个服务器里面所以可以直接写127.0.0.1

因为我部署这个项目是聊天机器人所以要流式输出所以就得加 (为什么)

    proxy_buffering off;      # 关闭缓冲
    proxy_cache off;          # 关闭缓存
    chunked_transfer_encoding on;  # 启用 chunked 响应
    proxy_http_version 1.1;   # 确保使用 HTTP/1.1

最后部署成功: