基于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上；

步骤b3:在访问域名的服务器上，使用nginx设置不同工程的路由转发，用于门户访问不同的前端应用。

本发明与现有技术相比具有以下特点：

本发明实现了每个独立的工程应用可以做到按需加载，不占用额外的资源；自动化打包部署，尽可能降低相关人力成本；局部、增量升级，可以更好的扩展新功能；独立部署，不管哪个项目下，都可以快速聚合前端应用，进而缩短开发周期，提高开发效率。

附图说明

图1为本发明一实施例中微前端方案示意图；

图2为本发明一实施例中微前端架构示意图；

图3为本发明一实施例中微前端方案的开发方法示意图；

图4为本发一实施例中微前端方案的部署方法示意图。

具体实施方式

下面结合附图及实施例对本发明做进一步说明。

请参照图1，本发明提供一种基于nginx路由分发式的微前端系统，包括若干相互独立的相同或不同的前端框架工程；访问门户地址，通过nginx判断url路由跳转相应工程，在对应工程的router路由管理器中，读取到菜单配置，生成菜单路由并跳转到对应模块，生成页面展示到门户中。

在本实施例中，如图2所示，基于nginx路由分发式的微前端架构，以前端框架为主体，应用不同的路由模式，基于nodejs的运行环境，使用gulp或者webpack构建工具，使用jenkins发布工具，在nginx代理服务器下，展现在浏览器中。

在本实施例中，如图3所示，一种基于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路由，进而跳转对应工程。

在本实施例中，如图4所示，一种基于nginx路由分发式的微前端系统的部署方法，包括以下步骤：

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

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

步骤b3:在访问域名的服务器上，使用nginx设置不同工程的路由转发，用于门户访问不同的前端应用。

以上所述仅为本发明的较佳实施例，凡依本发明申请专利范围所做的均等变化与修饰，皆应属本发明的涵盖范围。

技术特征：

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

2.根据权利要求1所述的基于nginx路由分发式的微前端系统，其特征在于：所述前端框架工程包括前端angular框架工程和前端react框架工程。

3.根据权利要求2所述的基于nginx路由分发式的微前端系统，其特征在于：所述前端angular框架工程以angular框架为主体，使用history路由模式，以nodejs为运行环境，使用gulp为构建工具，以gitlab为存储环境，使用jenkins为发布工具。

4.根据权利要求2所述的基于nginx路由分发式的微前端系统，其特征在于：所述前端react框架工程以react框架为主体，使用hash路由模式，以nodejs为运行环境，使用webpack为构建工具，以gitlab为存储环境，使用jenkins为发布工具。

5.根据权利要求1-4任一所述的基于nginx路由分发式的微前端系统，其特征在于：不同的前端工程同时使用history路由模式或hash路由模式，或者分别使用history路由模式和hash路由模式。

6.一种基于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路由，进而跳转对应工程。

7.一种基于nginx路由分发式的微前端系统的部署方法，其特征在于，包括以下步骤：

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

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

步骤b3:在访问域名的服务器上，使用nginx设置不同工程的路由转发，用于门户访问不同的前端应用。

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

技术研发人员：江琳;雷向应;吴华添
受保护的技术使用者：厦门靠谱云股份有限公司
技术研发日：2020.01.20
技术公布日：2020.06.02