CN116932251B - System integration method and system based on micro front end - Google Patents
System integration method and system based on micro front end Download PDFInfo
- Publication number
- CN116932251B CN116932251B CN202311196855.1A CN202311196855A CN116932251B CN 116932251 B CN116932251 B CN 116932251B CN 202311196855 A CN202311196855 A CN 202311196855A CN 116932251 B CN116932251 B CN 116932251B
- Authority
- CN
- China
- Prior art keywords
- application
- sub
- micro
- main
- integrated system
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 69
- 230000010354 integration Effects 0.000 title claims abstract description 60
- 238000004891 communication Methods 0.000 claims abstract description 26
- 230000004048 modification Effects 0.000 claims abstract description 7
- 238000012986 modification Methods 0.000 claims abstract description 7
- 238000013475 authorization Methods 0.000 claims description 13
- 238000004519 manufacturing process Methods 0.000 claims description 6
- 230000003068 static effect Effects 0.000 claims description 6
- 101100453790 Drosophila melanogaster Kebab gene Proteins 0.000 claims description 4
- 235000015231 kebab Nutrition 0.000 claims description 4
- 230000001419 dependent effect Effects 0.000 claims description 3
- 238000004806 packaging method and process Methods 0.000 claims description 3
- 238000009420 retrofitting Methods 0.000 claims 1
- 238000005516 engineering process Methods 0.000 abstract description 20
- 238000010276 construction Methods 0.000 description 10
- 230000006870 function Effects 0.000 description 10
- 230000008569 process Effects 0.000 description 8
- 238000011161 development Methods 0.000 description 5
- 230000008859 change Effects 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 238000009826 distribution Methods 0.000 description 4
- 230000009466 transformation Effects 0.000 description 3
- 230000000694 effects Effects 0.000 description 2
- 101001094649 Homo sapiens Popeye domain-containing protein 3 Proteins 0.000 description 1
- 101000608234 Homo sapiens Pyrin domain-containing protein 5 Proteins 0.000 description 1
- 101000578693 Homo sapiens Target of rapamycin complex subunit LST8 Proteins 0.000 description 1
- BUGBHKTXTAQXES-UHFFFAOYSA-N Selenium Chemical compound [Se] BUGBHKTXTAQXES-UHFFFAOYSA-N 0.000 description 1
- 102100027802 Target of rapamycin complex subunit LST8 Human genes 0.000 description 1
- 230000005856 abnormality Effects 0.000 description 1
- 230000004075 alteration Effects 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 230000001149 cognitive effect Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 229910052711 selenium Inorganic materials 0.000 description 1
- 239000011669 selenium Substances 0.000 description 1
- 238000003860 storage Methods 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
- G06F9/547—Remote procedure calls [RPC]; Web services
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/34—Network arrangements or protocols for supporting network services or applications involving the movement of software or configuration parameters
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Networks & Wireless Communication (AREA)
- Signal Processing (AREA)
- Stored Programmes (AREA)
Abstract
The invention provides a system integration method and system based on a micro front end, comprising the following steps: building an integrated system based on the micro front end framework, wherein the integrated system comprises a main application and a sub application which are in communication connection; modifying the integrated system; technical convention is carried out on the integrated system after modification, and based on the convention, the sub-application inlets comprise a micro-application inlet and a sub-application inlet; and constructing deployment and configuration settings for the integrated system. By modifying the integrated system, adopting technical convention and constructing deployment and configuration setting, the sub-application inlet comprises a micro-application inlet and a sub-application inlet, the problem that the current mainstream integrated technology shares a user system is solved, and the problem of pollution of main application and sub-application modes is further avoided.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a system integration method and system based on a micro front end.
Background
With the development of computer network technology, the technology stacks of computer networks are various, such as an operating system (Windows, linux, mac OS, etc.), a development language (Java, python, javaScript, C # etc.), a back-end framework (Spring, django, flask, express, etc.), a front-end framework (React, angular, vue, etc.), a database (MySQL, postgreSQL, mongoDB, etc.), a cache (Redis, memcache, etc.), a server (Tomcat, nginx, apache, etc.), a test framework (JUnit, selenium, etc.), a deployment tool (Docker, jenkins, etc.), a log analysis (ELK, splenk, etc.), etc. Different applications may employ different technology stacks, and even the same application may employ different technology stacks at different companies or teams. Selecting an appropriate technology stack can improve development efficiency, reduce development cost, and improve performance and stability of an application program.
However, in the existing application process, different technology stacks cannot be directly compatible and integrated, so that an integrated system needs to be built to integrate multiple different technology stacks, and therefore an entry and a cognitive mode can be used uniformly. Currently, there are two common integration schemes: one is iframe integration and one is micro front end integration. The iframe integration is the most common integration method, and although the iframe integration can solve the problems of unified use of entries, compatibility with different technical stacks and support of communication between different applications, the iframe integration has cross-domain limitation, and has poor page loading performance and inflexible style and layout. The micro front-end integration is a deeper integration method, although the micro front-end integration can solve the problem that an inlet is uniformly used, different technical stacks are compatible, and the micro front-end uses the same domain name and has a richer application data interaction mode, the micro front-end integration does not solve the problem of the user mode of sub-applications, the main application and the sub-application modes are polluted, and the micro front-end has no uniform solution, so that the configuration threshold is too high and the deployment is too complex.
Disclosure of Invention
The invention aims to provide a system integration method and system based on a micro front end, which are used for solving the problem of how to provide a technical stack integration scheme which is pollution-free in main application and sub application modes and simple to deploy.
In order to solve the technical problems, the present invention provides a system integration method based on micro front end, comprising:
building an integrated system based on the micro front end framework, wherein the integrated system comprises a main application and a sub application which are in communication connection;
modifying the integrated system;
technical convention is carried out on the integrated system after modification, and based on the convention, the sub-application inlets comprise a micro-application inlet and a sub-application inlet;
and constructing deployment and configuration settings for the integrated system.
Optionally, in the micro front end based system integration method, the method for building an integrated system based on the micro front end framework includes:
constructing a main application and a sub application based on the micro front end frame;
initializing the main application and registering sub-applications;
setting an application management module in the main application, and realizing the communication between the main application and the sub-application through the application management module.
Optionally, in the micro front end based system integration method, the method for modifying the integrated system includes:
modifying the main application and the sub-application to use a Hash routing mode;
packaging the page route of the main application and the page route of the sub-application in a routers array;
the routers array is placed in a main.js entry file;
setting a mount hook function, constructing a page route when the mount hook function is called, and initializing the page of the sub-application.
Optionally, in the micro front end based system integration method, the method for performing technical engagement on the modified integrated system includes:
establishing a convention technique to divide the sub-application entry into a micro-application entry and a sub-application entry;
setting up a micro-application registration rule in the micro-application portal so as to load the micro-application through a micro-front-end framework of the main application;
and building a sub-application menu in the sub-application portal so as to load the sub-application through the sub-application menu.
Optionally, in the system integration method based on the micro front end, the micro application portal is a Kebab case named micro application portal; the sub-application portal is named as a sub-application portal of a Pascal case.
Optionally, in the micro front end based system integration method, the method for constructing deployment and configuration settings for the integrated system includes:
performing micro front end construction and deployment on the integrated system based on jenkins and dockers;
and carrying out configuration setting on the server reverse proxy server of the integrated system based on the nginx.
Optionally, in the method for integrating a system based on a micro front end, the method for implementing micro front end construction and deployment on the integrated system based on jenkins and docker includes:
continuously integrating the main application and the sub application based on jenkins and automatically constructing deployment;
and configuring the running environments of the main application and the sub-application based on the docker, and compiling a front-end application.
Optionally, in the micro front end based system integration method, the method based on jenkins continuously integrates the main application and the sub application respectively and automatically constructs and deploys the main application and the sub application includes:
constructing a mirror image and storing the mirror image into a tar file;
uploading the mirror image in the tar file to a target server;
decompressing the mirror image and running the mirror image.
Optionally, in the micro front end based system integration method, the method for configuring the running environments of the main application and the sub application based on the dock and compiling the front end application includes:
creating an intermediate container to compile a front-end application and obtain a front-end file;
copying the front-end file to a working directory, and installing a dependent package;
constructing a production environment code to run and generate a static resource command;
using the nginx image as a base image to create a final container;
copying the production environment code to a static resource position of an nginx default service;
copying the custom nginx configuration file into the final container, and covering a default configuration file.
Optionally, in the micro front end based system integration method, after the deployment and configuration setting is constructed on the integrated system, the micro front end based system integration method further includes: and unified authentication is carried out on the integrated system.
Optionally, in the micro front end based system integration method, the method for uniformly authenticating the integrated system includes:
when a user accesses the integrated system, acquiring an authorization code from an authentication center based on oauth 2.0;
the rear end of the integrated system acquires a token through the authorization code and stores the token;
and the main application and the sub application acquire authorized resources according to the token.
In order to solve the technical problem, the invention also provides a system integration system based on the micro front end, which comprises a main application and a sub application which are in communication connection;
the main application comprises an initialization module, an application management module and a main communication module; the initialization module is used for initializing the main application; the application management module is used for searching the application and loading the application; the main communication module is used for communicating with the sub-application;
the sub-application comprises a single-page application module and a sub-communication module; the single-page application module is used for loading the sub-application; the sub-communication module is used for communicating with the main application.
The invention provides a system integration method and a system based on a micro front end, comprising the following steps: building an integrated system based on the micro front end framework, wherein the integrated system comprises a main application and a sub application which are in communication connection; modifying the integrated system; technical convention is carried out on the integrated system after modification, and based on the convention, the sub-application inlets comprise a micro-application inlet and a sub-application inlet; and constructing deployment and configuration settings for the integrated system. By modifying the integrated system, adopting technical convention and constructing deployment and configuration setting, the sub-application inlet comprises a micro-application inlet and a sub-application inlet, the problem that the current mainstream integrated technology shares a user system is solved, and the problem of pollution of main application and sub-application modes is further avoided.
Drawings
Fig. 1 is a flowchart of a system integration method based on micro front end according to the present embodiment;
fig. 2 is a schematic architecture diagram of an integrated system according to the present embodiment;
FIG. 3 is a loading process code segment of the integrated system provided in this embodiment;
FIG. 4 is a coding section of the integrated system retrofit process provided by the present embodiment;
fig. 5 is an application page style provided in the present embodiment;
FIG. 6 is a schematic flow chart of the micro front end architecture deployment provided in the present embodiment;
fig. 7 is a unified authentication logic diagram provided in this embodiment.
Detailed Description
The system integration method and system based on the micro front end provided by the invention are further described in detail below with reference to the accompanying drawings and the specific embodiments. It should be noted that the drawings are in a very simplified form and are all to a non-precise scale, merely for convenience and clarity in aiding in the description of embodiments of the invention. Furthermore, the structures shown in the drawings are often part of actual structures. In particular, the drawings are shown with different emphasis instead being placed upon illustrating the various embodiments.
It is noted that "first", "second", etc. in the description and claims of the present invention and the accompanying drawings are used to distinguish similar objects so as to describe embodiments of the present invention, and not to describe a specific order or sequence, it should be understood that the structures so used may be interchanged under appropriate circumstances. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.
The embodiment provides a system integration method based on micro front end, as shown in fig. 1, including:
s1, building an integrated system based on a micro front end framework, wherein the integrated system comprises a main application and a sub application which are in communication connection;
s2, modifying the integrated system;
s3, carrying out technical convention on the integrated system after transformation, wherein the sub-application inlets comprise a micro-application inlet and a sub-application inlet based on convention;
s4, constructing deployment and configuration settings for the integrated system.
According to the system integration method based on the micro front end, through transformation, technical convention, construction, deployment and configuration setting of the integrated system, the sub-application inlet comprises the micro application inlet and the sub-application inlet, the problem that a user system is shared by the current mainstream integration technology is solved, and the problem of pollution of main application and sub-application modes is further avoided.
It should be noted that, in the system integration method based on the micro front end provided in this embodiment, the order between the steps may be adjusted, different steps may be performed synchronously, and even other steps may be added between the steps to enrich the functions or effects of system integration. Variations of the micro front end based system integration method provided by the present application without departing from the spirit of the present application shall also fall within the scope of the present application.
Further, in this embodiment, step S1, the method for building an integrated system based on the micro front end frame includes:
s11, constructing a main application and a sub application based on the micro front end frame;
s12, initializing the main application and registering the sub-application;
s13, setting an application management module in the main application, and realizing communication between the main application and the sub-application through the application management module.
Specifically, referring to fig. 2, a schematic architecture diagram of an integrated system based on micro front end framework construction according to this embodiment is provided. The main application comprises a plurality of functional modules, such as main application initialization, registration sub-application, route distribution, application management service, application loader and the like; the sub-application may include a plurality of sub-application terminals, such as sub-app, which implement a communication function with the main application through the application loader. The main application initializes and registers the sub-application, then the route distribution receives the change of the page route URL, so as to search the sub-application according to the change of the page route URL to the application management service, and the searched sub-application is loaded by the application loader. The framework construction based on the micro front end, such as initializing a main application, registering a sub-application, etc., are well known to those skilled in the art, and will not be described herein.
It should be noted that, in the initial stage of the whole construction project, the main application needs to be loaded first, and after the main application is loaded successfully, each sub-application is registered in the micro-application registry of the main application. When the page routing URL changes, if the page routing URL satisfies the configuration rule of the main application (set in the application management service), loading of the sub-application is started. An exemplary portion of this embodiment is shown in fig. 3.
It should be further noted that, the principle and basic technology of building the main application and the sub-application based on the micro front end framework are well known to those skilled in the art, and will not be described herein. The present embodiment is described in detail only with respect to the differences from the existing micro front end integration technology, and the omitted points of the present embodiment are known from the prior art.
Further, in this embodiment, in step S2, the method for modifying the integrated system includes:
s21, modifying the main application and the sub-application to use a Hash routing mode;
s22, packaging the page route of the main application and the page route of the sub application in a routers array;
s23, placing the routers array in a main.js entry file;
s24, setting a mount hook function, constructing a page route when the mount hook function is called, and initializing the page of the sub-application.
The Hash routing mode, the method for calling the hook function, and the like used for modifying the embodiment are all well known to those skilled in the art, and are not described herein. An exemplary portion of this embodiment showing a retrofit process is shown in fig. 4.
The advantage of the Hash routing mode is that it, although it appears in the URL, is not included in the HTTP request, has no effect on the backend at all, and therefore there is no problem to change the post-Hash refresh.
By setting the hook function, the application program can filter all messages and events at the system level and access messages which cannot be accessed under normal conditions. The nature of the hook function is a program to process system messages, which are suspended into the system by system calls. The embodiment sets a mount hook function, can construct a page route, and initializes the page of the sub-application.
Still further, in this embodiment, step S3, the method for performing technical engagement on the integrated system after modification includes:
s31, establishing a convention technology to divide the entrance of the sub-application into a micro-application entrance and a sub-application entrance. Specifically, in this embodiment, the micro-application portal is a Kebab case named micro-application portal; the sub-application portal is named as a sub-application portal of a Pascal case.
S32, setting up a micro-application registration rule in the micro-application inlet so as to load the micro-application through the micro-front-end framework of the main application. Specifically, in this embodiment, the micro application portal hits the micro application registration rule of the Main application, accesses the micro application are loaded through the micro front end framework of the Main application, the micro application portal is agreed to be used for integration of a general page, the interface may refer to fig. 5, and when the user clicks the sub application menu, the sub application page is loaded in the Main area.
S33, building a sub-application menu in the sub-application entry so as to load the sub-application through the sub-application menu. Specifically, in this embodiment, the sub-application portal is directly accessed through the sub-application, and does not pass through the micro front end framework of the main application, and the sub-application portal is agreed to be used for page integration with high style complexity, so that style pollution does not exist in the sub-application portal.
The principle of creating the micro-application portal using the Kebab case rule and creating the sub-application portal using the Pascal case rule is well known to those skilled in the art. The embodiment can solve the problem of style pollution of the main application and the sub-application in the micro front end integration process by establishing the convention.
Further, in this embodiment, step S4, the method for constructing deployment and configuration settings for the integrated system includes:
s41, performing micro-front-end construction deployment on the integrated system based on jenkins and dockers. Specifically, in this embodiment, the deployment is continuously integrated and automatically built based on jenkins for the main application and the sub application, respectively; and configuring the running environments of the main application and the sub-application based on the docker, and compiling a front-end application.
S42, carrying out configuration setting of a server reverse proxy server on the integrated system based on the nginx.
The present embodiment provides a micro front end deployment technique based on jenkins+docker+nginx, where jenkins is responsible for continuous integration, automated construction; the dock is responsible for configuring the running environments of the main application and the sub-application and compiling the front-end application; the nginx is used as a reverse proxy server to realize configuration based on convention. The micro front end deployment technology adopted by the embodiment is consistent with the deployment of the main application and the sub application, so that the complexity of an integrated system can be reduced to a certain extent.
This embodiment provides a specific example, as shown in fig. 6, to illustrate the micro front end deployment technique employed. Specifically, the method for continuously integrating and automatically constructing and deploying the main application and the sub-application based on jenkins comprises the following steps of: constructing a mirror image and storing the mirror image into a tar file; uploading the mirror image in the tar file to a target server; decompressing the mirror image and running the mirror image.
And configuring the running environments of the main application and the sub-application based on a dock, and compiling a front-end application, wherein the method comprises the following steps: creating an intermediate container to compile a front-end application and obtain a front-end file; copying the front-end file to a working directory, and installing a dependent package; constructing a production environment code to run and generate a static resource command; using the nginx image as a base image to create a final container; copying the production environment code to a static resource position of an nginx default service; copying the custom nginx configuration file into the final container, and covering a default configuration file. Preferably, in order to prevent the container from exiting immediately after the container is started, the present embodiment is further provided with a command to prevent the container from exiting immediately after the container is started.
jenkins is an open source software project, is a continuous integration tool based on Java development, is used for monitoring continuous repeated work, and aims to provide an open and easy-to-use software platform so that the software project can be continuously integrated.
dock is an open-source application container engine that allows developers to package their applications and rely on packages into a portable image, then issue to any popular Linux or Windows operating system machine, and also implement virtualization; the containers are completely sandboxed without any interface to each other.
nginx is a high-performance HTTP and reverse proxy web server, while also providing IMAP/POP3/SMTP services that release source code in the form of BSD-like licenses, well known for its stability, rich functionality, simple configuration files, and low consumption of system resources.
The specific application modes of jenkins, docker and ngix are well known to those skilled in the art, and the description of this embodiment is omitted.
In addition, in this embodiment, after the deployment and configuration settings are constructed on the integrated system, the system integration method based on the micro front end further includes: and unified authentication is carried out on the integrated system. Specifically, in this embodiment, the method for unified authentication of the integrated system includes: when a user accesses the integrated system, acquiring an authorization code from an authentication center based on oauth 2.0; the rear end of the integrated system acquires a token through the authorization code and stores the token; and the main application and the sub application acquire authorized resources according to the token.
The invention provides a technology for solving user mode sharing of micro front end integration, which is based on OAuth2.0 and adds authentication logic between sub-application and main application. When a user accesses the integrated system, firstly, an authorization code is acquired from an authentication center; then telling the authorization code to the back end of the system, enabling the back end to go to an authentication center through the authorization code to obtain a token, and storing the token in a browser storage; then, the main application and the sub-application acquire system authorized resources according to the token, and the main application and the sub-application share the same token, so that the user state consistency of the integrated system is ensured.
OAuth is an open network standard for authorization (authorization) that allows users to authorize third party applications to access information they store on another service provider without the need to provide a user name and password to the third party mobile application or to share all of their data. The OAuth protocol has the characteristics of simplicity, safety and openness: whether an OAuth service provider or an application developer, is easy to understand and use; the information such as the user key is not related, so that the method is safer and more flexible; OAuth can be implemented by any service provider and used by any software developer. Therefore, the embodiment uses the OAuth protocol for unified authentication, and ensures the safety of information data while reducing the system configuration threshold, namely the deployment complexity.
The manner of unified authentication using OAuth protocol is well known to those skilled in the art, and this embodiment provides a logic diagram of the unified authentication that can be implemented, as shown in fig. 7.
In this embodiment, the flow of unified authentication of the master application is approximately as follows: the user accesses the main application through the browser to acquire the resources of the main application; the main application back end judges whether the current user has a login state, if so, the current user state and the resource data are cached, and if not, the sub-application back end redirects to a unified identity authentication center, and inputs authentication information such as an account number, an ID, a password and the like for login; after logging in, the unified identity authentication center returns an effective authorization code once, the browser carries out code to obtain token, an application identifier or a secret key on the back end of the main application goes to the unified identity authentication center to obtain a token, the unified identity authentication center generates short-time access-token and refresh-token according to the application and the authorization code, the back end of the main application judges whether a user exists, and if the user exists, the access-token and the refresh-token are utilized to silence and log in; the browser caches the access-token and the refresh-token and stores user information; the browser acquires data with the access-token, the back end of the main application searches whether the user token exists and is valid, if so, the data is returned, so that the browser successfully acquires the data, otherwise, the browser redirects to a login page, and if the login page is out of date, a new access-token is acquired by using the refresh-token.
And, the flow of the unified authentication of the sub-applications is approximately as follows: the browser accesses the sub-application with the access-token, and the back end of the sub-application acquires the token and checks the token; the unified identity authentication center checks the token, and returns the user information to the back end of the sub-application if the token passes the check; the back end of the sub-application searches whether a corresponding user exists, if so, the user login information is stored, and otherwise, the login abnormality is prompted. The browser acquires data, the back end of the sub-application searches whether the user token exists and is valid, if the user token exists and is valid, the data is returned, the browser successfully acquires the data, otherwise, the browser redirects to a login page, and if the login page is out of date, a new access-token is acquired by using a refresh-token.
The embodiment also provides a system integration system based on the micro front end, and referring to fig. 2, the system integration system based on the micro front end includes a main application and a sub application which are in communication connection; the main application comprises an initialization module, an application management module and a main communication module; the initialization module is used for initializing the main application; the application management module is used for searching the application and loading the application; the main communication module is used for communicating with the sub-application; the sub-application comprises a single-page application module and a sub-communication module; the single-page application module is used for loading the sub-application; the sub-communication module is used for communicating with the main application.
Specifically, the application management module comprises a registration sub-application unit, a route distribution unit, a management service unit and an application loading unit. The registration sub-application unit is used for registering the sub-application; the route distribution unit is used for searching the sub-application from the management service unit through URL change; the application loading unit is used for loading the corresponding sub-application according to the sub-application searched from the management service unit.
The system integration and method based on the micro front end provided by the embodiment provides a full-process integration technology from system transformation to system construction deployment and the like, is suitable for integration of spa single-page application systems of various different technical stacks, solves the problem that the current mainstream integration technology shares a user system, provides two application inlets based on conventions, and solves the problem of pollution of main application and sub application patterns in the current mainstream integration technology.
In this specification, each embodiment is described in a progressive manner, and each embodiment focuses on the difference from other embodiments, so that the same similar parts of each embodiment are referred to each other. And, various computer technologies adopted in the embodiment, although the principles thereof are well known to those skilled in the art, the combination, construction, setting and flow logic thereof are creatively labor by the inventor, and the application of the scheme of the application shall also belong to the protection scope of the application under other scenes without departing from the gist of the application.
The system integration method and system based on the micro front end provided by the embodiment comprise the following steps: building an integrated system based on the micro front end framework, wherein the integrated system comprises a main application and a sub application which are in communication connection; modifying the integrated system; technical convention is carried out on the integrated system after modification, and based on the convention, the sub-application inlets comprise a micro-application inlet and a sub-application inlet; and constructing deployment and configuration settings for the integrated system. By modifying the integrated system, adopting technical convention and constructing deployment and configuration setting, the sub-application inlet comprises a micro-application inlet and a sub-application inlet, the problem that the current mainstream integrated technology shares a user system is solved, and the problem of pollution of main application and sub-application modes is further avoided.
The above description is only illustrative of the preferred embodiments of the present invention and is not intended to limit the scope of the present invention, and any alterations and modifications made by those skilled in the art based on the above disclosure shall fall within the scope of the appended claims.
Claims (5)
1. A system integration method based on micro front end, comprising:
building an integrated system based on the micro front end framework, wherein the integrated system comprises a main application and a sub application which are in communication connection;
retrofitting the integrated system, comprising: modifying the main application and the sub-application to use a Hash routing mode; packaging the page route of the main application and the page route of the sub-application in a routers array; the routers array is placed in a main.js entry file; setting a mount hook function, constructing a page route when the mount hook function is called, and initializing a page of the sub-application;
technical convention is carried out on the integrated system after modification, and based on convention, the sub-application inlets comprise a micro-application inlet and a sub-application inlet, and the method comprises the following steps: establishing a convention technique to divide the sub-application entry into a micro-application entry and a sub-application entry; setting up a micro-application registration rule in the micro-application portal so as to load the micro-application through a micro-front-end framework of the main application; building a sub-application menu in the sub-application portal so as to load sub-applications through the sub-application menu;
constructing deployment and configuration settings for the integrated system, including:
continuously integrating and automatically constructing deployment to the main application and the sub application based on jenkins respectively, wherein the deployment comprises the following steps: constructing a mirror image and storing the mirror image into a tar file; uploading the mirror image in the tar file to a target server; decompressing the mirror image and running the mirror image;
configuring the running environments of the main application and the sub-application based on a dock, and compiling a front-end application, wherein the method comprises the following steps: creating an intermediate container to compile a front-end application and obtain a front-end file; copying the front-end file to a working directory, and installing a dependent package; constructing a production environment code to run and generate a static resource command; using the nginx image as a base image to create a final container; copying the production environment code to a static resource position of an nginx default service; copying the custom nginx configuration file into the final container, and covering a default configuration file;
and carrying out configuration setting on the server reverse proxy server of the integrated system based on the nginx.
2. The micro front end based system integration method according to claim 1, wherein the micro front end framework based method for building an integrated system comprises:
constructing a main application and a sub application based on the micro front end frame;
initializing the main application and registering sub-applications;
setting an application management module in the main application, and realizing the communication between the main application and the sub-application through the application management module.
3. The micro front end based system integration method of claim 1, wherein the micro application portal is a Kebab case named micro application portal; the sub-application portal is named as a sub-application portal of a Pascal case.
4. The micro front-end based system integration method of claim 1, further comprising, after constructing deployment and configuration settings for the integrated system: unified authentication of the integrated system includes:
when a user accesses the integrated system, acquiring an authorization code from an authentication center based on oauth 2.0;
the rear end of the integrated system acquires a token through the authorization code and stores the token;
and the main application and the sub application acquire authorized resources according to the token.
5. A micro front end based system integration system integrated by the micro front end based system integration method according to any one of claims 1 to 4, comprising a main application and a sub application in communication connection;
the main application comprises an initialization module, an application management module and a main communication module; the initialization module is used for initializing the main application; the application management module is used for searching the application and loading the application; the main communication module is used for communicating with the sub-application;
the sub-application comprises a single-page application module and a sub-communication module; the single-page application module is used for loading the sub-application; the sub-communication module is used for communicating with the main application.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311196855.1A CN116932251B (en) | 2023-09-18 | 2023-09-18 | System integration method and system based on micro front end |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311196855.1A CN116932251B (en) | 2023-09-18 | 2023-09-18 | System integration method and system based on micro front end |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116932251A CN116932251A (en) | 2023-10-24 |
| CN116932251B true CN116932251B (en) | 2024-01-30 |
Family
ID=88384718
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311196855.1A Active CN116932251B (en) | 2023-09-18 | 2023-09-18 | System integration method and system based on micro front end |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116932251B (en) |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111224873A (en) * | 2020-01-20 | 2020-06-02 | 厦门靠谱云股份有限公司 | Nginx route distribution type-based micro front-end system and development and deployment methods thereof |
| CN114327688A (en) * | 2022-03-15 | 2022-04-12 | Tcl通讯科技（成都）有限公司 | Data processing method, frame, storage medium and terminal equipment based on micro front end |
| CN115981642A (en) * | 2022-11-28 | 2023-04-18 | 北京智慧星光信息技术有限公司 | Micro front end configurable page generation method, device, equipment and medium |
-
2023
- 2023-09-18 CN CN202311196855.1A patent/CN116932251B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111224873A (en) * | 2020-01-20 | 2020-06-02 | 厦门靠谱云股份有限公司 | Nginx route distribution type-based micro front-end system and development and deployment methods thereof |
| CN114327688A (en) * | 2022-03-15 | 2022-04-12 | Tcl通讯科技（成都）有限公司 | Data processing method, frame, storage medium and terminal equipment based on micro front end |
| CN115981642A (en) * | 2022-11-28 | 2023-04-18 | 北京智慧星光信息技术有限公司 | Micro front end configurable page generation method, device, equipment and medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116932251A (en) | 2023-10-24 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106575305B (en) | Services within a reverse proxy server | |
| US9170800B2 (en) | Application wrapping for application management framework | |
| US20190319885A1 (en) | Policy based service routing | |
| US8099472B2 (en) | System and method for a mobile cross-platform software system | |
| AU2019332913B2 (en) | Accessing resources in a remote access or cloud-based network environment | |
| US20100027552A1 (en) | Cloud computing gateway, cloud computing hypervisor, and methods for implementing same | |
| CN113748685A (en) | Network-based media processing control | |
| CN106878385A (en) | Private clound dispositions method and device | |
| JP2014514659A (en) | Multi-node application deployment system | |
| US9577916B1 (en) | Gateway flow plugin containers | |
| CN112350978A (en) | Service processing method, system, device and storage medium | |
| KR20220038740A (en) | Network-Based Media Processing (NBMP) Workflow Management with Framework (FLUS) Control for 5G Live Uplink Streaming | |
| CN114070618A (en) | Data processing method and system based on micro front end | |
| CN116932251B (en) | System integration method and system based on micro front end | |
| US20230388180A1 (en) | Techniques for provisioning workspaces in cloud-based computing platforms | |
| AU2021244987B2 (en) | Reducing attack surface by selectively collocating applications on host computers | |
| US11368459B2 (en) | Providing isolated containers for user request processing | |
| US11206195B2 (en) | Cloud computing environment with split connectivity and application interfaces that enable support of separate cloud services | |
| CN116601941A (en) | Requester authenticity assessment based on communication request | |
| US10284563B2 (en) | Transparent asynchronous network flow information exchange | |
| KR20220045005A (en) | 3rd Generation Partnership Project (3GPP) Framework for Live Uplink Streaming (FLUS) Sync Capability Determination | |
| CN113826075A (en) | Desktop virtualization with dedicated cellular network connection for client devices | |
| Lambert et al. | Securing CHEESEHub: A Cloud-based, Containerized Cybersecurity Education Platform | |
| US20190069121A1 (en) | Direct update of mobile applications based on features used | |
| Al-Surmi et al. | Next generation mobile core resource orchestration: Comprehensive survey, challenges and perspectives |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |