CN111224873A - Nginx route distribution type-based micro front-end system and development and deployment methods thereof - Google Patents
Nginx route distribution type-based micro front-end system and development and deployment methods thereof Download PDFInfo
- Publication number
- CN111224873A CN111224873A CN202010064015.XA CN202010064015A CN111224873A CN 111224873 A CN111224873 A CN 111224873A CN 202010064015 A CN202010064015 A CN 202010064015A CN 111224873 A CN111224873 A CN 111224873A
- Authority
- CN
- China
- Prior art keywords
- nginx
- project
- route
- routing
- routing mode
- 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.)
- Granted
Links
Images
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L45/00—Routing or path finding of packets in data switching networks
- H04L45/14—Routing performance; Theoretical aspects
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L45/00—Routing or path finding of packets in data switching networks
- H04L45/74—Address processing for routing
- H04L45/745—Address table lookup; Address filtering
- H04L45/7453—Address table lookup; Address filtering using hashing
Abstract
The invention provides a Nginx route distribution type micro front-end system and a method thereof, which mainly distribute different services to different and independent front-end applications through a route and are realized through a Nginx reverse proxy. The invention realizes the combined access of the front-end frameworks of different types or the same type, solves the problems of old system updating, technology updating and high code coupling degree, can be independently deployed and developed, ensures that codes are concise and decoupled, is easier to maintain, and improves the development efficiency and the user experience.
Description
Technical Field
The invention belongs to the technical field of micro front ends, and particularly relates to a Nginx route distribution type micro front end system and a development and deployment method thereof.
Background
With the popularity of micro-service architecture, IT resources and business applications in enterprises become gradually abundant, which improves enterprise business efficiency to a great extent, and with the introduction of new technologies and new frameworks, how to improve development efficiency, quality and user experience on the premise of maintaining a legacy system becomes a problem that each team needs to take care of seriously.
Disclosure of Invention
In view of this, the present invention provides a micro front-end system based on a nginnx routing distribution and a development and deployment method thereof, which solve the problems of old system update, technology update and high code coupling degree.
In order to achieve the purpose, the invention adopts the following technical scheme:
a Nginx route distribution type-based micro front-end system comprises a plurality of mutually independent front-end framework projects which are the same or different, and application skip is carried out between the projects through Nginx based on a route.
Further, the front end frame engineering comprises front end angular frame engineering and front end exact frame engineering.
Further, the front-end regular frame engineering uses a regular frame as a main body, a history routing mode, nodejs as an operating environment, gulp as a construction tool, gitlab as a storage environment and jenkins as a publishing tool.
Furthermore, the front-end exact frame engineering takes an exact frame as a main body, uses a hash routing mode, takes nodejs as an operation environment, uses webpack as a construction tool, takes gitlab as a storage environment and uses jenkins as a release tool.
Further, different front-end projects use the history routing mode or the hash routing mode simultaneously, or use the history routing mode and the hash routing mode respectively.
A development method of a Nginx route distribution type-based micro front-end system comprises the following steps:
step A1: establishing an angular project for providing an angular operating environment, defaulting to use a history routing mode, and adding a hash routing mode address of a act project;
step A2, establishing a react project for providing a react operation environment, using a hash routing mode, adding a history routing mode address of an regular project and adding a hash routing mode address of the react project;
step A3, using nginx reverse agent tool to add first-stage path name of angular engineering route and exact engineering route for forwarding under domain name development;
step A4, using history or hash route mode, if the first-level path names are all unique, the position between projects has no order requirement, if the names have the same, the position of project used preferentially needs to be in front of other projects;
and step A5, nginx judges the url route accessed currently, and then jumps to the corresponding project.
A deployment method of a Nginx route distribution type-based micro front-end system comprises the following steps:
step B1, in the angular project, using a gulp construction tool to pack static resources into a product folder, using git to submit the product folder to gitlab, using a jenkins publishing tool to pull corresponding branch codes of gitlab, and updating and pushing the packed file into the project routing folder corresponding to the server domain name;
step B2, in the act project, submitting git to gitlab, using jenkins to issue tools to draw corresponding branch codes of gitlab, packing static resources into build folders through configuration commands, updating and pushing the build folders to the project routing folders corresponding to the server domain name after successful packing, and stopping and outputting error codes on jenkins if the packing fails;
and step B3, setting routing forwarding of different projects by using nginx on a server for accessing the domain name, wherein the routing forwarding is used for accessing different front-end applications by the portal.
Compared with the prior art, the invention has the following characteristics:
the invention realizes that each independent engineering application can be loaded according to the requirement without occupying additional resources; the automatic packing deployment reduces the related labor cost as much as possible; local and incremental upgrading can better expand new functions; independent deployment can be achieved, and front-end application can be quickly aggregated under any project, so that the development period is shortened, and the development efficiency is improved.
Drawings
FIG. 1 is a schematic diagram of a micro-front end scheme in an embodiment of the present invention;
FIG. 2 is a schematic diagram of a micro front end architecture in accordance with an embodiment of the present invention;
FIG. 3 is a schematic diagram of a method for developing a micro front end solution according to an embodiment of the invention;
fig. 4 is a schematic diagram of a deployment method of the micro front-end scheme in an embodiment of the present invention.
Detailed Description
The invention is further explained below with reference to the drawings and the embodiments.
Referring to fig. 1, the present invention provides a microgront system based on a Nginx routing distribution, which includes several independent front end framework projects that are the same or different; and accessing a portal address, judging that the url route skips corresponding engineering through nginx, reading menu configuration in a router route manager of the corresponding engineering, generating a menu route, skips a corresponding module, and generating a page to be displayed in the portal.
In this embodiment, as shown in fig. 2, in the Nginx routing distribution based micro front end architecture, a front end framework is used as a main body, different routing modes are applied, a melp or webpack construction tool is used based on a nodejs operating environment, a jenkins publishing tool is used, and the front end framework is displayed in a browser under a Nginx proxy server.
In this embodiment, as shown in fig. 3, a method for developing a micro front-end system based on an nginnx routing distribution formula includes the following steps:
step A1: establishing an angular project for providing an angular operating environment, defaulting to use a history routing mode, and adding a hash routing mode address of a act project;
step A2, establishing a react project for providing a react operation environment, using a hash routing mode, adding a history routing mode address of an regular project and adding a hash routing mode address of the react project;
step A3, using nginx reverse agent tool to add first-stage path name of angular engineering route and exact engineering route for forwarding under domain name development;
step A4, using history or hash route mode, if the first-level path names are all unique, the position between projects has no order requirement, if the names have the same, the position of project used preferentially needs to be in front of other projects;
and step A5, nginx judges the url route accessed currently, and then jumps to the corresponding project.
In this embodiment, as shown in fig. 4, a method for deploying a micro-front-end system based on an nginnx routing distribution type includes the following steps:
step B1, in the angular project, using a gulp construction tool to pack static resources into a product folder, using git to submit the product folder to gitlab, using a jenkins publishing tool to pull corresponding branch codes of gitlab, and updating and pushing the packed file into the project routing folder corresponding to the server domain name;
step B2, in the act project, submitting git to gitlab, using jenkins to issue tools to draw corresponding branch codes of gitlab, packing static resources into build folders through configuration commands, updating and pushing the build folders to the project routing folders corresponding to the server domain name after successful packing, and stopping and outputting error codes on jenkins if the packing fails;
and step B3, setting routing forwarding of different projects by using nginx on a server for accessing the domain name, wherein the routing forwarding is used for accessing different front-end applications by the portal.
The above description is only a preferred embodiment of the present invention, and all equivalent changes and modifications made in accordance with the claims of the present invention should be covered by the present invention.
Claims (7)
1. A micro-front-end system based on Nginx route distribution, characterized in that: the method comprises a plurality of mutually independent same or different front end frame projects, and application skip is carried out between the projects through nginx on the basis of routing.
2. The Nginx route-distribution based micro-headend system as recited in claim 1, wherein: the front end frame engineering comprises front end angular frame engineering and front end exact frame engineering.
3. The Nginx route-distribution based micro-headend system as recited in claim 2, wherein: the front-end regular frame engineering takes an regular frame as a main body, a history routing mode, nodejs as an operation environment, gulp as a construction tool, gitlab as a storage environment and jenkins as a publishing tool.
4. The Nginx route-distribution based micro-headend system as recited in claim 2, wherein: the front-end exact frame engineering takes an exact frame as a main body, uses a hash routing mode, takes nodejs as an operation environment, uses webpack as a construction tool, takes gitlab as a storage environment and uses jenkins as a release tool.
5. The Nginx route distribution based micro-headend system as claimed in any of claims 1 to 4 wherein: different front-end projects simultaneously use the history routing mode or the hash routing mode, or respectively use the history routing mode and the hash routing mode.
6. A development method of a Nginx route distribution type-based micro front-end system is characterized by comprising the following steps:
step A1: establishing an angular project for providing an angular operating environment, defaulting to use a history routing mode, and adding a hash routing mode address of a act project;
step A2, establishing a react project for providing a react operation environment, using a hash routing mode, adding a history routing mode address of an regular project and adding a hash routing mode address of the react project;
step A3, using nginx reverse agent tool to add first-stage path name of angular engineering route and exact engineering route for forwarding under domain name development;
step A4, using history or hash route mode, if the first-level path names are all unique, the position between projects has no order requirement, if the names have the same, the position of project used preferentially needs to be in front of other projects;
and step A5, nginx judges the url route accessed currently, and then jumps to the corresponding project.
7. A deployment method of a Nginx route distribution type micro-front-end system is characterized by comprising the following steps:
step B1, in the angular project, using a gulp construction tool to pack static resources into a product folder, using git to submit the product folder to gitlab, using a jenkins publishing tool to pull corresponding branch codes of gitlab, and updating and pushing the packed file into the project routing folder corresponding to the server domain name;
step B2, in the act project, submitting git to gitlab, using jenkins to issue tools to draw corresponding branch codes of gitlab, packing static resources into build folders through configuration commands, updating and pushing the build folders to the project routing folders corresponding to the server domain name after successful packing, and stopping and outputting error codes on jenkins if the packing fails;
and step B3, setting routing forwarding of different projects by using nginx on a server for accessing the domain name, wherein the routing forwarding is used for accessing different front-end applications by the portal.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010064015.XA CN111224873B (en) | 2020-01-20 | 2020-01-20 | Nginx route distribution type-based micro front-end system and development and deployment methods thereof |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010064015.XA CN111224873B (en) | 2020-01-20 | 2020-01-20 | Nginx route distribution type-based micro front-end system and development and deployment methods thereof |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111224873A true CN111224873A (en) | 2020-06-02 |
| CN111224873B CN111224873B (en) | 2021-01-01 |
Family
ID=70827194
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010064015.XA Active CN111224873B (en) | 2020-01-20 | 2020-01-20 | Nginx route distribution type-based micro front-end system and development and deployment methods thereof |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111224873B (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112988705A (en) * | 2021-03-08 | 2021-06-18 | 北京靠谱云科技有限公司 | Data middlebox construction method for enterprise-level production |
| CN113157274A (en) * | 2021-05-20 | 2021-07-23 | 北京字节跳动网络技术有限公司 | Software development method and device based on micro front end, electronic equipment and storage medium |
| CN113986226A (en) * | 2021-12-28 | 2022-01-28 | 中国电子科技网络信息安全有限公司 | Micro front end architecture based on qiankun and Web Component and construction method thereof |
| CN116633812A (en) * | 2023-05-15 | 2023-08-22 | 之江实验室 | Multi-version synchronous test method and system based on nginx intelligent fault-tolerant routing |
| CN116932251A (en) * | 2023-09-18 | 2023-10-24 | 联通(广东)产业互联网有限公司 | System integration method and system based on micro front end |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108052615A (en) * | 2017-12-15 | 2018-05-18 | 泰康保险集团股份有限公司 | Processing method, device, medium and the electronic equipment of access request |
| CN109656617A (en) * | 2018-11-30 | 2019-04-19 | 武汉烽火信息集成技术有限公司 | A kind of front end Web Service dispositions method, storage medium, electronic equipment and system |
| US10419469B1 (en) * | 2017-11-27 | 2019-09-17 | Lacework Inc. | Graph-based user tracking and threat detection |
| CN110377274A (en) * | 2019-07-08 | 2019-10-25 | 紫光云技术有限公司 | Micro- front end structure system and exploitation, dispositions method based on Single-Spa |
| CN110708368A (en) * | 2019-09-25 | 2020-01-17 | 北京计算机技术及应用研究所 | Micro front-end system and method based on routing distribution |
-
2020
- 2020-01-20 CN CN202010064015.XA patent/CN111224873B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10419469B1 (en) * | 2017-11-27 | 2019-09-17 | Lacework Inc. | Graph-based user tracking and threat detection |
| CN108052615A (en) * | 2017-12-15 | 2018-05-18 | 泰康保险集团股份有限公司 | Processing method, device, medium and the electronic equipment of access request |
| CN109656617A (en) * | 2018-11-30 | 2019-04-19 | 武汉烽火信息集成技术有限公司 | A kind of front end Web Service dispositions method, storage medium, electronic equipment and system |
| CN110377274A (en) * | 2019-07-08 | 2019-10-25 | 紫光云技术有限公司 | Micro- front end structure system and exploitation, dispositions method based on Single-Spa |
| CN110708368A (en) * | 2019-09-25 | 2020-01-17 | 北京计算机技术及应用研究所 | Micro front-end system and method based on routing distribution |
Non-Patent Citations (3)
| Title |
|---|
| HELLO、ALILI: ""前端微服务化解决方案"", 《简书》 * |
| WORKTILE: ""使用 Angular 打造微前端架构的 ToB 企业级应用"", 《博客园》 * |
| 杨彩芳: ""基于微前端的旅行社业务支撑系统"", 《中国优秀硕士学位论文全文数据库信息科技辑》 * |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112988705A (en) * | 2021-03-08 | 2021-06-18 | 北京靠谱云科技有限公司 | Data middlebox construction method for enterprise-level production |
| CN113157274A (en) * | 2021-05-20 | 2021-07-23 | 北京字节跳动网络技术有限公司 | Software development method and device based on micro front end, electronic equipment and storage medium |
| CN113157274B (en) * | 2021-05-20 | 2023-11-24 | 抖音视界有限公司 | Software development method and device based on micro front end, electronic equipment and storage medium |
| CN113986226A (en) * | 2021-12-28 | 2022-01-28 | 中国电子科技网络信息安全有限公司 | Micro front end architecture based on qiankun and Web Component and construction method thereof |
| CN113986226B (en) * | 2021-12-28 | 2022-04-22 | 中国电子科技网络信息安全有限公司 | Micro front end architecture based on qiankun and Web Component and construction method thereof |
| CN116633812A (en) * | 2023-05-15 | 2023-08-22 | 之江实验室 | Multi-version synchronous test method and system based on nginx intelligent fault-tolerant routing |
| CN116633812B (en) * | 2023-05-15 | 2023-12-22 | 之江实验室 | Multi-version synchronous test method and system based on nginx intelligent fault-tolerant routing |
| CN116932251A (en) * | 2023-09-18 | 2023-10-24 | 联通(广东)产业互联网有限公司 | System integration method and system based on micro front end |
| CN116932251B (en) * | 2023-09-18 | 2024-01-30 | 联通(广东)产业互联网有限公司 | System integration method and system based on micro front end |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111224873B (en) | 2021-01-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111224873B (en) | Nginx route distribution type-based micro front-end system and development and deployment methods thereof | |
| US11720350B1 (en) | Systems and methods of a metadata orchestrator augmenting application development | |
| AU2001293254B2 (en) | Accessing data stored at an intermediary from a service | |
| AU2012238127B2 (en) | Recovery of tenant data across tenant moves | |
| CN101546260B (en) | Method and device thereof for reconstructing service-oriented applications | |
| US20060236307A1 (en) | System and method for transformation of wireless application definition to simplified form | |
| US20080282223A1 (en) | Xml push and remote execution of a wireless applications | |
| US8756407B2 (en) | Configuration rule prototyping tool | |
| US20200174917A1 (en) | Rapid Automation First-pass Testing Framework | |
| US20060235928A1 (en) | System and method for creating a mapping document for binding messages between an application and an associated backend server | |
| CN102495735A (en) | Web end UI (user interface) component application frame system | |
| US10817284B2 (en) | Melding of mediation flow service component architecture (SCA) components | |
| CN101727490A (en) | Method for realizing page insertion in WEB application and WEB server | |
| US7849392B2 (en) | Systems and methods for generating technical documentation from enterprise service-oriented architecture content | |
| CN102141991A (en) | Method and system for web server | |
| CN102404149A (en) | Management system and method of service characteristics | |
| CN103473034A (en) | Method and device for dynamically publishing Web service | |
| CN106528108A (en) | WEB development method and device based on code file route | |
| CN101876998B (en) | Method and system for editing data | |
| WO2019043462A1 (en) | Systems and methods for creating automated interface transmission between heterogeneous systems in an enterprise ecosystem | |
| Leitner et al. | Lessons learned from tool integration with oslc | |
| US8626720B2 (en) | System and method of reconstructing complex custom objects | |
| CN102215252A (en) | Four tier architecture for implementing thin clients | |
| KR102397494B1 (en) | Low code web development and operating system, and service method using of it | |
| AU2006203580B2 (en) | Enterprise application based multi-billing integration system |
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 | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right |
Denomination of invention: Micro front end system based on nginx distributed routing and its development and deployment Effective date of registration: 20210316 Granted publication date: 20210101 Pledgee: Xiamen finance Company limited by guarantee Pledgor: Xiamen Biebeyun Co.,Ltd. Registration number: Y2021980001726 |
|
| PC01 | Cancellation of the registration of the contract for pledge of patent right | ||
| PC01 | Cancellation of the registration of the contract for pledge of patent right |
Date of cancellation: 20220325 Granted publication date: 20210101 Pledgee: Xiamen finance Company limited by guarantee Pledgor: Xiamen Biebeyun Co.,Ltd. Registration number: Y2021980001726 |
|
| PE01 | Entry into force of the registration of the contract for pledge of patent right | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right |
Denomination of invention: Micro front end system based on nginx routing distribution and its development and deployment method Effective date of registration: 20220328 Granted publication date: 20210101 Pledgee: Xiamen SME Financing Guarantee Co.,Ltd. Pledgor: Xiamen Biebeyun Co.,Ltd. Registration number: Y2022980003345 |