前置说明:每个人需求不一样,以下为我的需求路线
1后端服务已经部署到自己服务器上-2完整改造前端代码-3改完前端代码更新到自己服务器上-4前端单独部署
其他:为了保持跟官方同步更新,前端只改显示部分(导航标题的文字,颜色,风格等)
1,获取代码,前端代码在/web,最好down整个项目,
然后进入/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, 重新启动