[发明专利]基于Nginx路由分发式的微前端系统及其开发、部署方法

说明书

本发明提供了一种基于Nginx路由分发式的微前端系统及，其主要通过路由将不同的业务分发到不同的、独立前端应用上，通过nginx的反向代理来实现。本发明实现了不同类型或者相同类型的前端框架结合访问，解决了旧系统更新、技术更新、代码耦合度高的问题，能够独立部署和开发，使代码简洁、解耦、更易维护，提高开发效率和用户体验。

技术领域

本发明属于微前端技术领域，具体涉及一种基于Nginx路由分发式的微前端系统及其开发、部署方法。

背景技术

随着微服务架构的流行，企业内部IT资源和业务应用变得逐渐丰富，这在很大程度上提升了企业业务效能，前端技术栈日新月异，随着新技术和新框架的推出，如何在维护好遗留系统的前提下，提高开发效率、质量、用户体验，成为每个团队需要认真对待的问题。

发明内容

有鉴于此，本发明的目的在于提供一种基于Nginx路由分发式的微前端系统及其开发、部署方法，解决了旧系统更新、技术更新、代码耦合度高的问题。

为实现上述目的，本发明采用如下技术方案：

一种基于Nginx路由分发式的微前端系统，包括若干相互独立的相同或不同的前端框架工程，所述的工程之间基于路由通过nginx进行应用跳转。

进一步的，所述前端框架工程包括前端angular框架工程和前端react框架工程。

进一步的，所述前端angular框架工程以angular框架为主体，使用history路由模式，以nodejs为运行环境，使用gulp为构建工具，以gitlab为存储环境，使用jenkins为发布工具。

进一步的，所述前端react框架工程以react框架为主体，使用hash路由模式，以nodejs为运行环境，使用webpack为构建工具，以gitlab为存储环境，使用jenkins为发布工具。

进一步的，不同的前端工程同时使用history路由模式或hash路由模式，或者分别使用history路由模式和hash路由模式。

一种基于Nginx路由分发式的微前端系统的开发方法，包括以下步骤：

步骤A1：建立angular工程，用于提供angular运行环境，默认使用history路由模式，添加react工程的hash路由模式地址；

步骤A2:建立react工程，用于提供react运行环境，使用hash路由模式，添加angular工程的history路由模式地址，添加react工程的hash路由模式地址；

步骤A3:使用nginx反向代理工具，在开发域名配置下，添加angular工程路由和react工程路由的第一级路径名称做转发;

步骤A4:使用history或者hash路由模式，第一级路径命名如果都是唯一的，那么工程之间的位置无顺序要求，如果命名有相同的，那么优先使用的工程的位置需要在其他工程前面；

步骤A5:nginx判断当前访问的url路由，进而跳转对应工程。

一种基于Nginx路由分发式的微前端系统的部署方法，包括以下步骤：

步骤B1:在angular工程，使用gulp构建工具将静态资源打包成product文件夹，使用git提交到gitlab上，使用jenkins发布工具拉取gitlab相应分支代码，将打包文件更新推送到服务器域名对应工程路由文件夹中；

步骤B2:在react工程，使用git提交到gitlab上，使用jenkins发布工具拉取gitlab相应分支代码，通过配置命令将静态资源打包成build文件夹，打包成功后并更新推送到服务器域名对应工程路由文件夹中，打包失败则阻止并输出错误代码在jenkins上；