轻松应对多后端挑战：前端部署只需一次！

HAND汉得
72 阅读3分钟

01 场景解释

在现代企业的IT架构中，业务系统往往需要在不同的网络环境中运行，以满足不同的业务需求和安全要求。这些环境可能包括内网环境（用于企业内部的数据处理与共享）、外网环境（面向公众或合作伙伴提供服务）、测试环境等。

不同的环境通常需要部署不同的前端，这样比较耗费服务器资源，同时也降低了运维效率。使用HZEROJS脚手架的动态环境变量功能，前端部署只需一次，就可以轻松实现多后端环境的动态切换。

动态切换功能的定义和重要性

定义：

动态切换功能是指用户能够通过一个统一的域名下的不同路径，快速访问不同权限的系统数据，而无需部署多个前端。

重要性：

  • 提高使用效率： 减少用户在不同系统间切换的时间。
  • 降低运维难度： 如需有前端需求变更，只需要部署一次前端即可。
  • 更具扩展性： 通过动态环境变量配置， 用户可以实现更加复杂的环境变量控制逻辑。
  • 增强安全性： 通过统一的访问入口，便于权限管理和监控。

02 案例介绍

需求背景：

某工业制造公司，希望在内网环境和外网环境下访问不同数据的HZERO系统，但是又不希望重复部署多个前端，针对这种需求，我们HZEROJS团队提供了动态环境变量方案，能根据线上环境路径动态切换为不同的后端。

具体如下所示：

前端访问域名不变的情况下, 访问 /app-1 和 /app-2 时使用不同的网关配置：

当前端访问 /app-1 时使用下面配置：

API_HOST: https://aaa.saas.hand-china.com

当前端访问 /app-2 时使用下面配置

API_HOST: https://aaa.saas.hand-china.com

配置修改步骤

修改 config/config.dev.ts 和 config/config.ts 文件，配置如下内容：

export default {
define: {    
'process.env': {
CLIENT_ENV_RAW_LIST: 'API_HOST,WEBSOCKET_HOST,BASE_PATH,PUBLIC_URL',  
API_HOST: "(window.location.pathname.startsWith('/app-1') ? 'https://aaa.saas.hand-china.com' : 'http://bbb.saas.hand-china.com' )", 
WEBSOCKET_HOST: "(window.location.pathname.startsWith('/app-1') ? 'https://aaa.saas.hand-china.com/hpfm/sock-js' : 'http://bbb.saas.hand-china.com/hpfm/sock-js' )", 
BASE_PATH: `(window.location.pathname.startsWith('/app-1') ? '/app-1/' : '/app-2/' )`, 
PUBLIC_URL: JSON.stringify('/'), 
},  
}
}

修改部署配置charts/项目名称/values.yaml :

ingress:  
enabled: true  
annotations: 
nginx.ingress.kubernetes.io/configuration-snippet: |- 
rewrite ^/app-1/(.*)$ "/$1" break;     
rewrite ^/app-2/(.*)$ "/$1" break;  
path: /  
host: hzero-front-test.open-front.hand-china.com  
tls: []
env: 
open:    
BUILD_BASE_PATH: "(window.location.pathname.startsWith('/app-1') ? '/app-1/' : '/app-2/' )"    
BUILD_PUBLIC_URL: "(window.location.pathname.startsWith('/app-1') ? '/app-1/' : '/app-2/' )"    
BUILD_CLIENT_ID: localhost
BUILD_WEBSOCKET_HOST: "(window.location.pathname.startsWith('/app-1') ? 'https://aaa.saas.hand-china.com/hpfm/sock-js' : 'http://bbb.saas.hand-china.com/hpfm/sock-js' )"    
BUILD_API_HOST: "(window.location.pathname.startsWith('/app-1') ? 'https://aaa.saas.hand-china.com' : 'http://bbb.saas.hand-china.com' )"    
BUILD_PLATFORM_VERSION: SASS

通过以上配置我们完美实现了客户的内外网动态切换的需求。得到了客户的肯定。

03 注意事项

  • HZEROJS脚手架版本需要升级到 V1.2.12 以上
  • 后端不同的API网关需要各项目自己提供

04 附件

- HZEROJS 一个前端多后端环境配置文档

联系我们

了解HZEROJS的详细功能，请查阅我们的文档：

● HZEROJS 功能文档

如果您有疑问或建议，可以通过开放平台进行工单反馈，问题分类请选择【前端组件库 ->  HZEROJS】：

● 汉得焱牛开放平台

相关咨询或更多信息，欢迎联系我们：

邮箱：openhand@vip.hand-china.com

avatar
文章
阅读
粉丝