dify前端工程开发改造步骤

2 阅读1分钟

前置说明:每个人需求不一样,以下为我的需求路线

1后端服务已经部署到自己服务器上-2完整改造前端代码-3改完前端代码更新到自己服务器上-4前端单独部署

其他:为了保持跟官方同步更新,前端只改显示部分(导航标题的文字,颜色,风格等)

1,获取代码,前端代码在/web,最好down整个项目,

代码地址:github.com/langgenius/…

然后进入/web

pnpm install

2,环境准备

创建开发环境变量

/web下

cp .env.example .env.local

配置env.local,需注意,我当前的环境是自己在腾讯云部署了一个dify,接口算是线上我的接口和本地前端服务不在一个域,所以必须代理线上服务地址,环境变量都提供了相应配置

配置环境变量,只需要修改以下信息即可

HONO_CONSOLE_API_PROXY_TARGET=https://onlinehost:port/console/api

HONO_PUBLIC_API_PROXY_TARGET=https://onlinehost:port/api

3,运行代码(需要分别单独启动两个命令)

pnpm run dev  ***启动前端服务***

pnpm run dev:proxy   
***启动代理服务器,即2中代理的两个地址,***
***即2中的配置项需要指向NEXT_PUBLIC_API_PREFIX和NEXT_PUBLIC_PUBLIC_API_PREFIX***

4,访问

前端访问地址:localhost:3000

127.0.0.1:5001为开发环境后端服务接口地址

5,还需要注意一个坑
可能出现无法访问的情况,观察pnpm run dev:proxy输出

出现ssl问题时,处理办法为修改node环境变量,跳过自签证书的限制
1,安装cross-env
pnpm install --save-dev 
2,修改package.json文件中,启动指令pnpm run dev:proxy
"dev:proxy": "tsx ./scripts/dev-hono-proxy.ts"-->
"dev:proxy": "cross-env NODE_TLS_REJECT_UNAUTHORIZED=0 tsx ./scripts/dev-hono-proxy.ts"
3, 重新启动