Micro-front-end multi-application architecture, system and integration method thereof

Abstract

The invention provides a micro-front-end multi-application architecture, a micro-front-end multi-application system and an integration method of the micro-front-end multi-application system. The method comprises the following steps: constructing a main application based on a Vite tool chain; a multi-application universal code warehouse is constructed based on Monorepo; based on the main application and the multi-application universal code warehouse, introducing a Wujie micro-front-end, and constructing a micro-front-end multi-application architecture; performing technical agreement based on a micro-front-end multi-application architecture; based on the technical agreement, transforming a main application and a sub-application which are integrated and accessed into the micro-front-end multi-application architecture, and constructing a multi-application integrated system; according to the dependency relationship of different application resources in the multi-application integrated system, public resources are planned, a CDN content distribution network is constructed, and a distribution strategy of the resources and a distribution service of the resources are constructed; performing configuration setting and construction deployment on the multi-application integrated system and the resource distribution service; according to the method, the problem of'giant application 'of enterprise-level integrated software is solved.

Description

Technical Field

[0001] The present application belongs to the field of Web front-end architecture and development technology, and in particular, relates to a micro-front-end multi-application architecture, system and integration method thereof. Background Art

[0002] In the development of enterprise-level system architecture, highly cohesive and loosely coupled architecture has always been pursued by information workers. However, with the rapid development of the Internet and the continuous advancement of enterprise information construction, due to the increase in business functions and complexity, as well as the continuous changes in participating personnel and teams, the convenient and efficient single application has gradually evolved into a complex and cumbersome monolithic application, facing the following main problems:

[0003] 1. The application is too centralized and the compilation efficiency is low;

[0004] 2. The application loads slowly and occupies a lot of client memory;

[0005] 3. High service pressure and high network load;

[0006] 4. The technology stack is too single, with low compatibility and information barriers between different applications;

[0007] Therefore, how to decouple the "giant stone application" and break through the above problems has become a technical problem that needs to be solved urgently. Summary of the invention

[0008] Purpose of the invention: To solve the above problems, the purpose of the present invention is to provide a design method, architecture and system for micro-frontend multi-application integration to solve the "monolith application" problem of enterprise-level integrated software.

[0009] In a first aspect, the present application provides a micro-frontend multi-application architecture integration method, the method comprising:

[0010] Build the main application based on the Vite toolchain;

[0011] Build a common code repository for multiple applications based on Monorepo;

[0012] Based on the main application and multi-application common code repository, Wujie micro-frontend is introduced to build a micro-frontend multi-application architecture.

[0013] Preferably, the construction of a multi-application universal code repository based on Monorepo includes:

[0014] Creating private workspaces for different applications and a public workspace folder in the common code repository;

[0015] Initialize common configuration files and common script files in the common workspace.

[0016] Preferably, the micro-frontend multi-application architecture has one and only one main application and multiple sub-applications, and the sub-applications are registered and configured in the main application.

[0017] On the second aspect, the present application also provides a micro-frontend multi-application architecture, which is constructed by the aforementioned integration method.

[0018] In a third aspect, the present application also provides a micro-frontend multi-application system integration method, the method comprising:

[0019] Make technical agreements based on the micro-frontend multi-application architecture;

[0020] Based on the technical agreement, the main and sub-applications integrated into the micro-frontend multi-application architecture are transformed to build a multi-application integration system;

[0021] According to the resource dependencies of different applications in the multi-application integration system, plan public resources, build CDN content distribution network, and build resource distribution strategy and resource distribution service;

[0022] The multi-application integration system and resource distribution service are configured, set up, built and deployed.

[0023] Preferably, the technical agreement includes:

[0024] Set sub-application naming and registration rules;

[0025] Set communication rules between the main application and sub-applications, and between sub-applications;

[0026] Set application access authentication and authorization rules.

[0027] Preferably, the master and sub-applications integrated into the micro-frontend multi-application architecture are transformed based on the technical agreement to build a multi-application integration system, including:

[0028] Uniquely identify the main application and sub-application;

[0029] Realize cross-domain access to applications;

[0030] Authorization and authentication are achieved through tokens;

[0031] Structuring main application and sub-application routing configuration information;

[0032] Modify the entry files of the main application and sub-applications of the application entry and configure them as singleton mode;

[0033] By configuring the route jump mode and cache, three loading modes of sub-applications can be implemented: non-loading, pre-loading, and pre-execution.

[0034] Build a management module in the main application to centrally configure sub-applications.

[0035] Preferably, the public resources include: general business components, general functions, static resources, SDK tools, and third-party component libraries; the method further includes:

[0036] Public resources are stored through independent servers and distributed through CDN.

[0037] In a fourth aspect, the present application also provides a micro-front-end multi-application system, which is composed of the above-mentioned method.

[0038] Beneficial technical effects of this application:

[0039] The present invention builds the main application and sub-application based on Vite, builds the architecture of multiple applications based on Monorepo multi-application universal code repository and Wujie, and builds CDN content distribution service through Nginx load balancing; wherein, building applications based on Vite can improve the speed of application rendering in browser and the efficiency of code compilation.

[0040] The multi-application architecture built based on Wujie can split large applications into a main application and multiple sub-applications. Different applications can be compiled and run independently, communicate and share data with each other, and can be deployed on different servers to share server pressure.

[0041] Building a common code repository based on Monorepo can manage common code and configuration independently, reduce duplicate code, and facilitate version control of common components. Furthermore, in conjunction with CDN content distribution services, it can share the load pressure of application servers, speed up resource acquisition, and realize resource sharing and code reuse, improving code quality and development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 It is a flow chart of a method for constructing a multi-application integration system provided in an embodiment of the present application;

[0043] Figure 2 This is a diagram of the directory structure of a multi-application universal code repository provided in an embodiment of the present application;

[0044] Figure 3 This is a schematic diagram of the system interface provided in the embodiment of the present application. Figure 1 ;

[0045] Figure 4 This is a schematic diagram of the system interface provided in the embodiment of the present application. Figure 2 ;

[0046] Figure 5is a schematic diagram of the system architecture of a multi-application integration system provided in an embodiment of the present application;

[0047] Figure 6 It is a schematic diagram of the communication mechanism and resource interaction in the running state provided by the embodiment of the present application. DETAILED DESCRIPTION

[0048] The present invention provides a design method for a high-performance micro-frontend multi-application integrated architecture based on the integration of technologies such as the vite tool chain, the wujie micro-frontend, and the CND content distribution network, that is, improving efficiency from three aspects: the compilation layer, the application layer, and the network layer, including:

[0049] Build the main application based on the Vite toolchain.

[0050] Build a common code repository for multiple applications based on Monorepo.

[0051] Wherein, private workspaces of different applications and public workspace folders are created in the general code repository; public configuration files and public script files are initialized in the public workspace;

[0052] Furthermore, the sub-application is configured in subsequent steps based on the initialized configuration file and script file.

[0053] Based on the main application and multi-application common code repository, Wujie is introduced to build a micro-frontend multi-application architecture;

[0054] Among them, the micro-frontend multi-application architecture has one and only one main application and multiple sub-applications, and the sub-applications are registered and configured in the main application.

[0055] Based on the above micro-frontend multi-application architecture, technical agreements are made, wherein the technical agreements include:

[0056] Set sub-application naming and registration rules;

[0057] Set communication rules between the main application and sub-applications, and between sub-applications;

[0058] Set application access authentication and authorization rules;

[0059] Furthermore, based on the agreement, the main and sub-applications integrated into the micro-frontend multi-application architecture are transformed to build a multi-application integration system. The transformation content includes:

[0060] Uniquely identify the main application and sub-application;

[0061] Realize cross-domain access to applications;

[0062] Authorization and authentication are achieved through tokens;

[0063] Structuring main application and sub-application routing configuration information;

[0064] Modify the entry files of the main application and sub-applications of the application entry and configure them as singleton mode;

[0065] By configuring the route jump mode and cache, three loading modes of sub-applications can be implemented: non-loading, pre-loading, and pre-execution.

[0066] Build a management module in the main application to centrally configure sub-applications.

[0067] According to the resource dependencies of different applications in the multi-application integration system, plan public resources, build CDN content distribution network, and build resource distribution strategy and resource distribution service;

[0068] The above-mentioned public resources include but are not limited to: general business components, general functions, static resources, SDK tools, and third-party component libraries.

[0069] Public resources are stored through independent servers and distributed through CDN.

[0070] Furthermore, the multi-application integration system and resource distribution service are configured, set up, constructed and deployed.

[0071] Optionally, in the multi-application integration system, automated deployment is built for the main application and different sub-applications based on git and Jenkins respectively.

[0072] Optionally, in the resource distribution service, load balancing deployment is implemented through nginx

[0073] The present invention provides a micro-front-end architecture, which includes a micro-front-end multi-application architecture and a multi-application universal code repository, and the micro-front-end architecture is obtained according to the construction method of the multi-application front-end architecture described in any one of the above items.

[0074] The present invention provides a multi-application integration system, which is used to visually configure sub-applications. The sub-applications obtained by implementing the construction method of the above-mentioned multi-application front-end architecture can be connected to the multi-application integration system through the configuration module of the multi-application integration system, wherein the access mode includes three states: not loading, preloading, and pre-execution. The three states correspond to different loading modes, respectively, and can be configured according to needs.

[0075] This embodiment provided by the present application provides a method for constructing a multi-application integration system, such as Figure 1-Figure 6 As shown, including:

[0076] S1, build applications based on the Vite toolchain;

[0077] S2, based on Monorepo, builds a common code repository for multiple applications;

[0078] S3, based on the common code repository of the main application and multiple applications, introduces Wujie to build a micro-frontend multi-application architecture;

[0079] S4, building a multi-application integrated system;

[0080] S5, based on the resource dependencies of the multi-application integration system, classify the dependent resources, migrate the common parts to independent servers, and build content distribution services.

[0081] S6, configuring, setting, deploying and publishing the multi-application integration system.

[0082] The construction and integration method of the multi-application integration system provided in this embodiment transforms, agrees, builds, and deploys the compilation layer, application layer, and network layer of the integration system. This improves the compilation and packaging efficiency of the application in the development phase, and realizes communication and data sharing while maintaining relative isolation in the application phase. In the network request phase, it relieves the server load pressure during concurrency, accelerates resource acquisition efficiency, and improves overall service performance.

[0083] Furthermore, in this embodiment, step S1, based on the Vite tool chain, the method for building an application includes:

[0084] Optionally, S11 builds a new application based on Vite by using pnpm create vite;

[0085] Optionally, S12 transforms the original application based on Vite;

[0086] Further, in this embodiment, in step S2, the multi-application common code repository structure is as follows: Figure 2 As shown, the construction method includes:

[0087] S21In the root directory, execute "pnpminit -y" to initialize the Monorepo configuration; create a Monorepo configuration file;

[0088] S22: In the root directory, create a new multi-application folder Apps, name the application code according to the business name, and store it in the multi-application folder, ensuring that one application has one folder; create a new public resource folder packages, identify and filter the code in the project. In this embodiment, the public resources are divided into four categories according to demand: general business components, general functions, static resources, and SDK tools;

[0089] S23 adds a new alias file Alias.ts to manage the alias space of multiple applications. Its advantage is to avoid address pointing conflicts when referencing common components in the root directory after different applications are integrated;

[0090] S24 initializes the common description and configuration file package.json under the common code repository of multiple applications;

[0091] The directory structure of the multi-application common code repository in this embodiment is as follows Figure 2 shown.

[0092] Furthermore, in this embodiment, in step S3, the method for constructing a micro-frontend multi-application architecture includes:

[0093] S31, making technical agreements, wherein the technical agreements include: dividing the application into a main application and a sub-application; a unique ID naming method for the main application and the sub-application; and authentication and authorization rules between applications.

[0094] Among them, in the above-mentioned micro-frontend multi-application architecture or the following multi-application front-end integration system, there is one and only one main application.

[0095] It should be noted that, in this embodiment, an application with a portal property is selected as the main application.

[0096] It should be noted that each application can be started and deployed individually.

[0097] S32, according to the technical agreement, reference wujie components in the main application, transform the main and sub-applications, and the transformation content includes:

[0098] Find the entry file of each application and uniquely identify each application according to the naming convention of the main application and sub-applications;

[0099] Change the route to dynamic acquisition, add relevant configuration variables based on the application, and structure it;

[0100] Perform cors transformation on sub-applications to achieve cross-domain access of applications;

[0101] Mount the micro-frontend startup program in the mount function of the main application and sub-application's main.js file, transform the main application and sub-application life cycle, and configure them as singleton mode to meet the custom configuration of the sub-application loading mode;

[0102] Furthermore, after completing the above configuration, by configuring the route jump and cache mode, three loading modes of sub-applications, namely, non-loading, pre-loading, and pre-execution, can be implemented;

[0103] It should be noted that the three methods correspond to different loading and caching mechanisms: when not loading, the page will not load any resources of this sub-application, nor will it be instantiated. Resources will only be loaded when the user accesses the application; when preloading, after the user logs in from the main application, the system will load the application entry resources of the corresponding sub-application according to the user's menu routing permissions. When the user accesses the sub-application menu, the resources are executed and the sub-application routing and status are initialized; pre-execution, after the user logs in, on the basis of preloading, the resources are directly executed to initialize the sub-application routing and status.

[0104] It should be further explained that the above resources refer to the js files, css files, etc. after the page is compiled and packaged.

[0105] Among the three methods, the startup time of the unloaded sub-application is the slowest and it does not occupy memory when not opened; the startup time of the pre-loaded sub-application is medium and it occupies medium memory; the startup time of the pre-executed sub-application is the fastest and it occupies the most memory;

[0106] The sub-application loading method can be adjusted according to the specific implementation;

[0107] Adjust the navigation and menu layout according to the different entry programs. When entering the system with the main application, the system loads the navigation and menu layout of the main application by default. When entering the corresponding sub-application with the sub-application as the entry, load the navigation and menu layout of the sub-application.

[0108] Build a unified authentication service. After a user logs in on any platform, access authentication is performed through a token, and the authentication result determines whether the user has application access rights.

[0109] Furthermore, the same dependency module configurations in the main application and each sub-application are adjusted to the package.json file in the root directory of the common code repository of multiple applications for centralized management.

[0110] Furthermore, add the script commands scripts in the package.json file in the root directory of the main application and sub-application to the package.json file in the root directory of the multi-application common code repository for centralized management;

[0111] Furthermore, in this embodiment, in step S4, the method for constructing a multi-application integration system mainly includes:

[0112] S41, according to technical conventions, the configuration of the sub-application in the above S32 is structured.

[0113] S42, in the main application, build a micro front-end management module to implement module functions such as sub-application registration, deletion, and loading method modification through a graphical interface to manage sub-applications, such as Figure 3 and Figure 4 shown.

[0114] Furthermore, in this embodiment, in step S5, the method for constructing a content distribution service includes:

[0115] S51, build a content distribution service server and a public resource warehouse;

[0116] S52, load balancing is achieved through Nginx configuration. In this embodiment, three nodes are implemented;

[0117] S53, through the above step S22, all public resources in the application are sorted and migrated to the public resource folder packages in the root directory. In this step, a copy of the public resource folder is copied to the public resource warehouse in each content distribution service. In this embodiment, the public resource folder includes:

[0118] S54, in the root file of the sub-application, according to the environment variable file .env provided by Vite, configure the resource address of the corresponding application packaged in the formal environment and the test environment. Add VITE_USE_CDN = True as the resource switch for whether the application uses CDN, and the three CDN node addresses corresponding to VITE_CDN_URL1, VITE_CDN_URL2, and VITE_CDN_URL3;

[0119] It should be noted that the configuration in this embodiment is that CDN must be used online, and when there is no network in the local development stage, changing VITE_USE_CDN to false means that all local cache resources are used.

[0120] Furthermore, in this embodiment, in step S6, the method for configuring, setting, deploying and publishing the multi-application integration system includes:

[0121] S61 builds and deploys the multi-application integration system based on git and nginx. Specifically, in this embodiment, git is responsible for the version control of the entire multi-application common code repository; through the script commands in package.json in the root directory of the multi-application common code repository, the main application and each sub-application can be compiled and built as needed. After the compilation and construction is completed, a dist folder will be generated in the corresponding application root directory, and dist will be uploaded to the target server; it will be published on the target server through the nginx proxy.

[0122] In the above embodiment, the system architecture diagram of the multi-application integration system is as follows: Figure 5 shown.

Claims

1. A micro-frontend multi-application architecture integration method, characterized in that the method includes: Build the main application based on the Vite toolchain; Build a common code repository for multiple applications based on Monorepo; Based on the main application and multi-application common code repository, Wujie micro-frontend is introduced to build a micro-frontend multi-application architecture.

2. The method according to claim 1, characterized in that The construction of a multi-application universal code repository based on Monorepo includes: Creating private workspaces for different applications and a public workspace folder in the common code repository; Initialize common configuration files and common script files in the common workspace.

3. The method according to claim 2, characterized in that The micro-frontend multi-application architecture has only one main application and multiple sub-applications, and the sub-applications are registered and configured in the main application.

4. A micro-frontend multi-application architecture, characterized in that: The architecture is constructed by the integrated method of any one of claims 1-3.

5. A micro-frontend multi-application system integration method, characterized in that: The method comprises: Make technical agreements based on the micro-frontend multi-application architecture; Based on the technical agreement, the main and sub-applications integrated into the micro-frontend multi-application architecture are transformed to build a multi-application integration system; According to the resource dependencies of different applications in the multi-application integration system, plan public resources, build CDN content distribution network, and build resource distribution strategy and resource distribution service; The multi-application integration system and resource distribution service are configured, set up, built and deployed.

6. The method according to claim 5, characterized in that The technical agreements include: Set sub-application naming and registration rules; Set communication rules between the main application and sub-applications, and between sub-applications; Set application access authentication and authorization rules.

7. The method according to claim 6, characterized in that The master and sub-applications integrated into the micro-frontend multi-application architecture are transformed based on the technical agreement to build a multi-application integration system, including: Uniquely identify the main application and sub-application; Realize cross-domain access to applications; Authorization and authentication are achieved through tokens; Structuring main application and sub-application routing configuration information; Modify the entry files of the main application and sub-applications and configure them as singleton mode; By configuring the route jump mode and cache, three loading modes of sub-applications can be implemented: non-loading, pre-loading, and pre-execution. Build a management module in the main application to centrally configure sub-applications.

8. The method according to claim 7, characterized in that The public resources include: general business components, general functions, static resources, SDK tools, and third-party component libraries; the method also includes: Public resources are stored through independent servers and distributed through CDN.

9. A micro-frontend multi-application system, characterized in that: The system is constituted by the method according to any one of claims 6-8.

Images