刚毕业进了一家国资，都是全栈开发，那时还是 Javascript，JQuery 的 DOM 操作，操作得一6一6的，后因为觉得太安逸然后跳了一家技术栈比较新的上市公司专心做后端开发，现在已经是后端开发的中流砥柱，主要负责项目的技术攻坚。已经考了软件设计师证，今年已报名考系统架构师证，目标是做一名资深的架构师。
一、技术背景架构采用前后端分离的 B/S 架构。后端用 SpringCloud，前端用 qiankun + VUE + TS。下图是我要将要搭建的网络链路，通过 SLB 实现各开发环境切换的功能，SLB 固定代理 / 代理 NGINX，NGINX 通过 path 区分不同环境，再通过前后端网关进行请求分发到各自前端服务或后端服务，前端通过相对路径访问后端 API，也解决前端与前端和前端与后端的跨域问题。图中蓝色是前端网关，黄色是后端网关，最后是前后端独立服务。前端是多个单功能的服务，需要用 qiankun 将每个服务进行组装，主应用和每个微应用部署在不同的服务器，使用 Nginx 代理访问。不得已用 qiankun。
场景：主应用和微应用部署在不同的服务器，使用 Nginx 代理访问。使用 qiankun 时按照上文中图示对主应用和微应用进行 NGINX 代理，部署后。如下配置：
/dev/ {
proxy_pass http://www.a.com/;
proxy_set_header Host $host:$server_port;
}
/dev/app1/ {
proxy_pass http://www.b.com/;
proxy_set_header Host $host:$server_port;
}
访问主应用为：ip:port/dev/，访问微应用地址为：ip:port/dev/app1/
主应用配置：
registerMicroApps([
{
name: 'admin',
entry: '/app1/',
container: '#container',
activeRule: '/admin',
},
],
然后使用地址 ip:port/dev/ 能够正常访问但微应用无法访问，使用地址 ip:port/dev/app1/ 能够正常访问微服务。另外主应用在部署后无法加载资源，没有触发资源请求，没有报错，本地正常。
综上，我在将主应用和微应用分别部署在不同的服务器后，使用 Nginx 代理无法正常访问微服务，产生原因是主应用路由不正确（后面才知道的）。
三、痛苦边缘挣扎摸索遇到上述问题后，和前端同事（小强）一起排查问题，毕竟人多力量大。小强给我本地调试了一下没发现问题。卧槽，这不就是我本地一点毛病都没有，线上有什么问题跟我有什么关系。然后我通过修改 entry 地址为绝对地址 ip:port/dev/app1/ 发现没什么用，然后整理思路，查看官网教程：https://qiankun.umijs.org/zh/cookbook#%E5%9C%BA%E6%99%AF-2%E4%B8%BB%E5%BA%94%E7%94%A8%E5%92%8C%E5%BE%AE%E5%BA%94%E7%94%A8%E9%83%A8%E7%BD%B2%E5%9C%A8%E4%B8%8D%E5%90%8C%E7%9A%84%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BD%BF%E7%94%A8-nginx-%E4%BB%A3%E7%90%86%E8%AE%BF%E9%97%AE 这不就是我这个场景吗，找小强继续改为相对路径 / 再来一把，发现没什么用，这可如何是好？相对地址改为 /dev/app1/ 再来一把，不行；找人吧，问了两个前端同事，后又找了架构师，问题还是没有解决。好难啊，这问题阻塞半天了，晚上还的给领导演示，又不能更换部署方案（项目机器有限），能操作的就是这个 nginx 了，然后我想那将配置的 /dev 先去掉吧，去掉后 nginx 配置：
/ {
proxy_pass http://www.a.com/;
proxy_set_header Host $host:$server_port;
}
/app1/ {
proxy_pass http://www.b.com/;
proxy_set_header Host $host:$server_port;
}
主应用 entry 改为 /app1/ ，碰碰运气试一下，可以了，通过主应用能够访问到微应用了，这时在脑中浮现一个问题，难道是代理的问题？？？？后面证明不是？？？？没办法了，再找个前端同事试试，给她描述了一番现象后，她感觉是前端路由的问题，我也坚信，外网再仔细查查，果然查到了同事查到了 [Bug]主应用在部署后无法加载资源，没有触发资源请求，没有报错，本地正常
用qiankun引用发现是因为本地路径是localhost/#/myapp,然后服务器是 xxx.com/xxx/yyy/zzz/#/myapp, 然后路由中心的配置是/#/myapp，路由没有正确匹配引起的。
主应用增加了一个函数，帮助补充window.location.pathname前缀
快去找小强改一下，试一下，最终通过改写 activeRule 函数，关键代理如下：
window.location.hash.startsWith("#container")
四、终得真理大道
真实的解决过程远比描述的要曲折，前前后后总共花了将近一天时间，但是我很享受这个解决过程，从不知道 qiankun，到慢慢了解，再求助他人，最后解决问题。通过这次帮助我们的小强解决主应用和微应用部署在不同的服务器，使用 Nginx 代理无法访问的问题发现，其是每个问题都不是问题，而是一次又一次的沟通过程，在沟通中分析问题，寻找问题，最后解决问题。当你不知道的时候不妨问问身边的同事，但往往这种简单的事却很复杂，因为有些人迈不出这一步，特别是我们这个行业，不知道的问题太多，就需要多问多学，问在前，学在后，边问边学，边学边问。在这我劝那些不敢问，不想问的同行，要勇敢的迈出第一步，只有去问才能知道自己的不足，才能进步，大家一起进步。
