前两天吃午饭时，同事提到一个项目本地调试很不友好，遇到 keycloak 在本地无法完成登录
这实际牵扯到两个问题

  1. 前端无需强依赖本地环境的，通过 charles 代理等，可以完全支持直接调试先上环境
    1. 通过代理，将先上前端站点代理为本地环境
  2. keycloak 为什么不支持本地开发登录
    1. keycloak 回调地址时写死的，不会回跳 localhost 本地开发域
      1. 可通过代理配置，修改回跳地址
    2. 回跳后，cookie 设置的不对

我们这儿是针对的第一个问题，本文对配置解决过程，简单做个记录

使用代理（如 charles）抓包，调试代码等，这是一个前端必备技能，能极大提高前端研发效率

如果前端项目路由及资源都在一个目录下，简单配置一个 map remote 即可实现代理请求到本地网络了
image.png

午饭聊到的这个项目因为结构原因，配置会稍微复杂一点

项目结构

前端项目结构以及 API 接口结构如下：

  1. /              前端项目 使用 hash 路由
  2. /xxx.js        前端 js
  3. /xxx.css       前端 css
  4. /oauth/xxx     后端接口
  5. /api/xxx         后端接口

此时仅仅使用 map remote 无法实现诉求了（map remote 不支持复杂的正则匹配）
我们这里进行如下配置

  1. 配置 map remote 代理域名到本地根目录
    1. m.dev.xxx.com -> localhost:8000
  2. 配置 rewrite 规则，将 js、css 等前端资源代理到本地
    1. 配置如下 location 配置适配哪个域，下方配置具体规则，此处选择 URL，配置如截图
    2. image.png
    3. image.png

不要忘记打开本地代理
image.png
如上配置，即可通过 dev 域名访问本地开发代码

  • 接口与登录权限等，都使用 dev 环境的
  • 前端代码使用本地的