Appearance
渐进式系统升级方案
一个复杂的'系统'可能存在较多的应用,以惟客为例,我们有 wkb、da、dmp、dsp、cdp、scrm 等若干个应用,并且这些子应用可能还有多个业态版本,涉及多个团队。
很难一次性对所有的应用进行改造。因此会维持较久的老旧并存的场面。
假设:
旧的前端资源在
frontend-resources
(主容器是nginx
) Pod 下, 其中挂载了以下域名的相关资源新的微前端基座在
wakeadmin
(主容器是wkfe/bay
) Pod 下
渐进式升级有两种方案:
- Sidecar 迁移。将
frontend-resources
下的 sidecar 迁移到wakeadmin
下
- Sidecar 迁移。将
- 流量迁移。保留
frontend-resources
, 通过 Ingress 将已经完成改造的应用的流量转移到wakeadmin
- 流量迁移。保留
1. Sidecar 迁移
迁移步骤:
- 将
frontend-resources
下的 sidecar 迁移到wakeadmin-apps
下
- 将
- 将迁移过来 sidecar 的入口命令修改为: 将静态资源拷贝到
/data/source/__public__/
下(__public__
的静态资源是直接暴露的,不需要加任何前缀)
- 将迁移过来 sidecar 的入口命令修改为: 将静态资源拷贝到
- 注意: 如果有特殊的 nginx 配置需求, 比如装修图片的 URL 转发。 可以将相关的 nginx 配置通过
配置映射
放到wakeadmin
下的/data/under-server
或/data/under-http
下'
- 注意: 如果有特殊的 nginx 配置需求, 比如装修图片的 URL 转发。 可以将相关的 nginx 配置通过
- 测试通过后, 将 www.wakedt.cn + cdn.wakedt.cn 的 ingress 流量从
frontend-resources
迁移到wakeadmin
- 测试通过后, 将 www.wakedt.cn + cdn.wakedt.cn 的 ingress 流量从
注意事项
这种方式,当一个旧的应用转换为微前端子应用之后,记得将 /data/source/__public__
下的资源删除。举个例子:
/data
/source
/__public__
wkb.html # 残留的旧静态资源
/__apps__
/dssWeb # -> 子应用,路由为 /wkb.html
index.html
因为 __public__
的优先级高于其他目录,因此当加载 http://example.com/wkb.html
时,会优先加载 __public__
下面的。
2. 流量迁移(推荐)
迁移步骤:
- 将
wakeadmin PVC
下的public
子路径挂载到wakeadmin
的/data/public
容器路径下
- 将
- 同时将
wakeadmin PVC
下的public/__public__
子路径挂载到frontend-resources
的/data/node/node-server/__public__
容器路径下。 2 和 3 这两步主要是为了让frontend-resources
、wakeadmin
共享公共静态资源
- 同时将
修改
frontend-resources
的 nginx 配置旧的配置:
server { listen 80; server_name cdn.wakedt.cn; error_log /var/log/nginx/error_ssl.log error; access_log /var/log/nginx/access_ssl.log main; location /resources/dss-web-portal/fonts { add_header Access-Control-Allow-Origin "*"; alias /data/node/node-server/resources/dss-web-portal/fonts; } add_header Cache-Control max-age=360000; add_header Access-Control-Allow-Origin "*"; location / { root /data/node/node-server; } } server { listen 80; server_name www.wakedt.cn; error_log /var/log/nginx/error.log error; access_log /var/log/nginx/access.log main; error_page 497 https://$server_name$request_uri; location /resources/dss-web-portal/fonts { add_header Access-Control-Allow-Origin "*"; alias /data/node/node-server/resources/dss-web-portal/fonts; } location /resources/dss-web-portal/dsp { add_header Access-Control-Allow-Origin "*"; alias /data/node/node-server/resources/dss-web-portal/dsp; } location / { rewrite ^/(.*) /wkb.html permanent; } location /store { rewrite ^/(.*) /store.html last; } location /login { rewrite ^/(.*) /login.html last; } # 短链跳转映射 location ^~ /s/ { rewrite ^/(.*) /scheme.html last; } location ~ \.(html|ico|txt)$ { # html不缓存 add_header Cache-Control no-store; root /data/node/node-server; } }
新的配置:
server { listen 80; server_name cdn.wakedt.cn www.wakedt.cn; error_log /var/log/nginx/error_ssl.log error; access_log /var/log/nginx/access_ssl.log main; root /data/node/node-server; add_header Access-Control-Allow-Origin "*"; # dsp 短链跳转映射 location ^~ /s/ { rewrite ^/(.*) /scheme.html last; } # 根路径处理 location = / { rewrite ^/(.*) /wkb.html redirect; } # html 禁止缓存 location ~* \.html$ { expires -1; try_files /__public__/$uri $uri =404; } location / { expires max; try_files /__public__/$uri $uri @fallback; } # html fallback location @fallback { expires -1; try_files /__public__/$uri/index.html $uri/index.html /__public__/$uri.html $uri.html =404; } # ... 其他配置放这里 }
新的配置去除了一些冗余的配置,并且优先从
__public__
中获取资源。
- 分配 Ingress 流量到
wakeadmin
, 假设我们已经将 dsp 迁移过来了, 那么 Ingress 配置如下:
/dsp.html
这是已改造后的 dsp 子应用的 activeRule/__
wakeadmin 的内置目录都以__
前缀,所以非常容易区分
- 分配 Ingress 流量到
- 后续:
- 当所有模块都完成了改造,就可以废弃掉 frontend-resources, 所有流量都走 wakeadmin
- 或者按照 上述 Sidecar 迁移方案, 逐步将
frontend-resources
的sidecar
搬运过来,最后废弃掉frontend-resources
其他子系统
对于 manage、ma 等其他子系统, 建议改造成单应用容器。在未改造之前 frontend-resources
依旧可以保留。