前端启动

13 阅读1分钟

本地开发代理配置与项目启动说明

一、本地代理(whistle)操作

1. 核心命令

操作命令
启动 whistlew2 start
查看状态whistle status
配置页面http://127.0.0.1:8899/#rules

2. 代理规则配置

在 whistle 配置页面填入以下规则:

############ 本地开发 ######################

# 对应到测试环境的旧后端(部分旧的功能不是这种模式开发的)
healthlab-test.wanyol.com/uat/aihealth 10.177.116.223:8080
# 对应到本地的后端
healthlab-test.wanyol.com/uat/nodeServer 127.0.0.1:3009
# 对应到本地的前端
healthlab-test.wanyol.com 127.0.0.1:3005

############ 本地开发 END ######################

二、浏览器代理配置(SwitchyOmega V3)

在 SwitchyOmega 中配置代理服务器:

  • 地址:127.0.0.1
  • 端口:8899

三、本地项目启动

项目类型启动命令运行端口
前端npm run dev3005
后端npm run start:dev3009

四、请求处理流程

image.png

总结

  1. whistle 是核心代理工具,需先通过 w2 start 启动,端口固定为 8899,规则配置决定请求路由方向;
  2. SwitchyOmega 需指向 whistle 的 8899 端口,完成浏览器请求到 whistle 的转发;
  3. 前端(3005)、后端(3009)项目启动后,whistle 会按路径规则将请求路由到对应服务。
  4. healthlab-test.wanyol.com/pre/admin-h…
  5. healthlab-test.wanyol.com/uat/admin-h…