A method and system for realizing dynamic compilation of front-end projects under containers in multiple environments

Abstract

The present invention proposes a method and system for dynamically performing front-end compilation and operation and maintenance in multiple environments in a compilation container. The method is implemented by deploying middleware in a target container. The middleware includes a front-end engineering component module installed in a front-end engineering and a front-end operation and maintenance server component module installed in an operation and maintenance server. The front-end engineering component module and the front-end operation and maintenance server component module have a linkage relationship. During the compilation process, the engineering component module is used to respond to the compilation deployment task, identify the current container environment of the compilation deployment task, dynamically generate the configuration information required for compiling the front-end engineering, and provide the front-end engineering with a registration component initialization function, and inject configuration information into the front-end engineering; the front-end operation and maintenance server component module is used to link and respond to the triggering of the engineering component module, and execute the front-end compilation function according to the configuration information. The present invention can identify the configuration required for the front-end engineering compilation and deployment to be dynamically configured in different environments in the container during compilation. Compared with the need to obtain environmental information according to the configuration template before compilation, the configuration information is generated and stored in the database, which not only saves the overall compilation efficiency but also does not require the storage space of the database, thereby improving the overall front-end operation and maintenance efficiency.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and particularly to a method and system for front-end compilation and operation and maintenance in multiple environments in a container. Background Art

[0002] The current front-end project compilation and deployment system is mainly developed based on the Jenkins system. The deployment process includes steps of inspection, installation of dependency packages, compilation, and uploading of the compiled files to the servers for external access and CDN servers. Usually, in order to meet the needs of operation and maintenance deployment, front-end staff must add configurations or scripts for each operation and maintenance deployment environment, installation of dependencies, code inspection, etc. in each front-end project in advance, so that the corresponding operation and maintenance service configuration parameters can be recognized when deployed to containers in different environments, and then the subsequent compilation in different environments and uploading to servers in different environments can be carried out smoothly. Or, identify the environment information according to the configuration template during compilation in advance, and then generate the configuration information and store it in the database. The inventive method does not require a configuration template, a database, etc. This has increased the workload of front-end staff significantly. Summary of the Invention

[0003] Object of the Invention: To overcome the above technical problems, the present invention proposes a method for realizing dynamic compilation of front-end projects in containers with multiple environments, which can identify the environment corresponding to the container and dynamically configure configuration parameters required for front-end project compilation and deployment, check configuration parameters, etc., and solves the problem of configuration-free operation and maintenance such as compilation and inspection of front-end projects, and improves the efficiency of front-end development.

[0004] Summary of the Invention: To achieve the above object, the embodiments of the present disclosure propose the following technical solutions:

[0005] According to a first aspect, the embodiments of the present disclosure propose a method for front-end compilation and operation and maintenance in multiple environments in a container, including the steps of:

[0006] Deploy an intermediate component for a target container; the intermediate component includes a front-end project component module installed in the front-end project of the target container and a front-end operation and maintenance server component module installed in the operation and maintenance server of the target container, and the front-end project component module and the front-end operation and maintenance server component module have a linkage relationship;

[0007] Receive and execute the compilation and deployment tasks released by the operation and maintenance release system through the intermediate component; wherein, the engineering component module is used to respond to the compilation and deployment tasks, identify the target environment of the compilation and deployment tasks, dynamically generate the configuration information required for the target environment during compilation, and perform registration component initialization in the front-end project according to the configuration information, and inject the dynamically generated environment configuration script information into the front-end project.

[0008] Further, the compilation and deployment tasks include: inspection, installation of dependent packages, compilation, and upload of compilation products; correspondingly, the environment configuration script information includes an inspection configuration script, an installation of dependent packages configuration script, a compilation configuration script, and an upload configuration script.

[0009] Further, the front-end project uses the yarn tool to install dependent packages, and locks the dependent packages through the yarn.lock file and the identification parameters provided by the yarn tool.

[0010] Further, during the execution of the compilation and deployment tasks, if an error occurs, error information is generated through the intermediate component and sent to a preset target person.

[0011] According to the second aspect, an embodiment of the disclosure proposes a front-end compilation operation and maintenance system in a multi-environment in a container, including a front-end project, an operation and maintenance server, and an intermediate component;

[0012] The intermediate component includes a front-end engineering component module installed in the front-end project of the target container and a front-end operation and maintenance server component module installed in the operation and maintenance server of the target container, and the front-end engineering component module and the front-end operation and maintenance server component module have a linkage relationship;

[0013] Wherein, the engineering component module is used to respond to the compilation and deployment tasks, identify the target environment of the compilation and deployment tasks, generate the configuration information required for the target environment, and provide the registration component initialization function to the front-end project, and inject the environment configuration script information into the front-end project;

[0014] The front-end operation and maintenance server component module is used to respond to the trigger of the engineering component module in a linked manner and execute the functions of each configuration script injected into the front-end project.

[0015] Further, the front-end project is specifically used to install dependent packages using the yarn tool, and lock the dependent packages through the yarn.lock file and the identification parameters provided by the yarn tool.

[0016] Further, the intermediate component is also configured to generate an error message when an error occurs during the execution of the compilation and deployment task, and send the error message to a preset target person.

[0017] According to a third aspect, an embodiment of the present disclosure provides a computer-readable storage medium, in which a computer program is stored, and the computer program can be read and executed by a processor to complete the method for front-end compilation and operation and maintenance in multiple environments in a container.

[0018] Beneficial effects: Compared with the prior art, the present invention has the following advantages:

[0019] The present invention can realize that there is no need to configure operation and maintenance deployment-related configuration information in the front-end project. The front-end project automatically identifies the current environment during deployment, thereby dynamically generating the configuration information required for the environment, and automatically executing dependency installation, compilation, etc. Moreover, when the operation and maintenance deployment environment changes, or the inspection tools are added or decreased, or even when a process is added to the operation and maintenance deployment process, the front-end project development is insensitive and does not require any changes to each front-end project, achieving the self-consistency of front-end project operation and maintenance deployment. Description of the Drawings

[0020] Figure 1 It is a structural diagram of the operation and maintenance system involved in the embodiment;

[0021] Figure 2 It is a schematic diagram of the prior art involved in the embodiment;

[0022] Figure 3 It is a flowchart of the execution of the compilation and deployment task involved in the embodiment. Embodiment

[0023] The compilation and deployment system for the front-end project is developed based on the Jenkins system (refer to Figure 2 ). The deployment process includes inspection, installation of dependency packages, compilation, and uploading the compiled files to the servers for external access and the CDN server. The usual approach is that, in order to meet the needs of operation and maintenance deployment, we must add the configuration or scripts for each operation and maintenance deployment environment, installation of dependencies, code inspection, etc. to each front-end project in advance, so that the corresponding operation and maintenance service configuration parameters can be recognized when deploying to containers in different environments, and then the subsequent compilation in different environments and uploading to servers in different environments can be carried out smoothly.

[0024] However, during the front-end operation and maintenance deployment process, the following problems will be encountered:

[0025] 1. During the deployment of the front-end project, various checks are also required, such as code basic syntax checks (based on eslint and sonar), minimum version checks for dependent packages, and duplicate version checks for components. In the front-end project, it is also necessary to configure the configuration files used for checks in advance, and this part of the configuration is also irrelevant to the functions of the front-end business pages and needs to be coupled. If the checking tools need to be changed or new checking tools are added, corresponding configuration information also needs to be changed or added to each front-end project, resulting in huge costs.

[0026] 2. In the front-end project, these operation and maintenance deployment-related configurations according to different environments in advance are irrelevant to the front-end business functions. Therefore, the coupling of this part of the configuration and the front-end project is an extra "burden" for front-end developers. And if the operation and maintenance deployment environment changes, such as the change of the server address, then each front-end project needs to make corresponding changes to the configuration information. Currently, the number of front-end projects in the company has reached hundreds, and each project needs to make changes, resulting in extremely high costs and affecting the overall development efficiency of the business.

[0027] 3. When uploading the compiled products, it is also necessary to upload them to the servers and CDN servers in the corresponding environments according to different environment information for use in different scenarios. The uploading scripts and configurations also need to be configured in the front-end project. Similar to the problem in item 2 above, they are all configurations irrelevant to front-end business development, and both the cost of change and addition or deletion are extremely high.

[0028] 4. When installing dependent packages in the front-end project, they are installed according to the versions of the dependent packages recorded in the package.json in the project. However, the versions of the dependent packages are usually not written as fixed versions. For example, "@commitlint / cli": ">= 9.1.2" means that the installation version rule is to install the latest dependent package greater than 9.1.2, and the specific version will be the latest version at the time of installation. This will result in the possibility that if installed after a period of time, the versions of the dependent packages installed in different environments may be different because the functions of different versions of the dependent packages may be different (new versions may add or change functions compared to old versions), ultimately leading to inconsistent functional performances in different environments, unable to achieve the consistency of front-end compiled products, and production accidents have occurred due to this. Although the npm command tool for installing dependent packages has a corresponding package-lock.json file to lock the versions of the dependent packages to a certain extent, we found that if the package.json and package-lock.json are different, the dependent packages are still installed according to the version rule in the package.json.

[0029] To at least partially overcome the above technical problems, embodiments of the present disclosure propose a front-end compilation operation and maintenance method and system in multiple environments in a container.

[0030] The present invention will be further described below in conjunction with the accompanying drawings and specific embodiments. However, it should be understood that the present invention can be implemented in various forms, and some exemplary and non-limiting embodiments shown in the accompanying drawings and described below are not intended to limit the present invention to the specific embodiments described.

[0031] It should be understood that, where technically feasible, the technical features listed above for different embodiments can be combined with each other to form other embodiments within the scope of the present invention. In addition, the specific examples and embodiments described in the present invention are non-limiting, and the structures, steps, and sequences described above can be modified accordingly without departing from the scope of protection of the present invention.

[0032] The present disclosure provides a method for implementing dynamic compilation of front-end engineering in a container of multiple environments, including the following steps:

[0033] For the target container, deploy an intermediate component; the intermediate component includes a front-end engineering component module installed in the front-end engineering of the target container and a front-end operation and maintenance server component module installed in the operation and maintenance server of the target container, and the front-end engineering component module and the front-end operation and maintenance server component module have a linkage relationship;

[0034] The compilation and deployment tasks released by the operation and maintenance release system are received and executed through the intermediate component; wherein the engineering component module is used to respond to the compilation and deployment tasks, identify the target environment of the compilation and deployment tasks, generate the configuration information required for the target environment, and provide the front-end engineering with a registration component initialization function, as well as inject environment configuration script information into the front-end engineering; the front-end operation and maintenance server component module is used to respond to the triggering of the engineering component module in a linked manner, and execute the functions of each configuration script injected into the front-end engineering.

[0035] Accordingly, please refer to Figure 1 ,This embodiment proposes a method for implementing dynamic compilation of front-end engineering in a container of multiple environments, including front-end engineering, operation and maintenance servers, and intermediate components;

[0036] The intermediate component includes a front-end engineering component module installed in the front-end engineering of the target container and a front-end operation and maintenance server component module installed in the operation and maintenance server of the target container, and the front-end engineering component module and the front-end operation and maintenance server component module have a linkage relationship;

[0037] Among them, the engineering component module is used to respond to the compilation and deployment task, identify the target environment of the compilation and deployment task, generate the configuration information required for the target environment, provide the registration component initialization function to the front-end project, and inject the environment configuration script information into the front-end project;

[0038] The front-end operation and maintenance server component module is used to respond to the trigger of the engineering component module in a linked manner and execute the functions of each configuration script injected into the front-end project.

[0039] Specifically, the compilation and deployment task includes: inspection, installation of dependency packages, compilation, and upload of compilation products; the environment configuration script information includes inspection configuration scripts, installation of dependency package configuration scripts, compilation configuration scripts, and upload configuration scripts.

[0040] Regarding the issue of dependency package versions, we use the yarn tool to install the dependency packages, and cooperate with the yarn.lock file and the yarn tool to provide the --frozen-lockfile flag parameter (when this parameter is passed, yarn will force the installation of the dependency packages according to the versions recorded in the yarn.lock), so as to achieve the purpose of locking the dependency package versions, so that the products after compilation in each environment will also be consistent.

[0041] Optionally, during the execution of the compilation and deployment task, if an error occurs, an error message is generated through the intermediate component and sent to a preset target person.

[0042] Please refer to Figure 3 , Figure 3 which gives the process of executing the front-end project release.

[0043] Trigger the release: Users (development and operation and maintenance personnel) execute the compilation and deployment tasks for different environments through the operation and maintenance release system. This task will follow the command of the stage tasks of "inspection", "installation of dependency packages", "compilation", and "upload" of the compilation products to the server and CDN server.

[0044] Start the inspection command encapsulated by the component module: A new component module is also installed in the operation and maintenance server, and the inspection command executed is the command encapsulated by this component module. For example, if the current environment is test environment 1, we have previously configured the identifier of the current environment as test1 in the server, and we will execute "gaialinttest1". (gaia is a bash command encapsulated by the component module, lint refers to the parameter for executing the inspection, and test1 is the identifier of the current environment).

[0045] Execute the configuration script for the inspection encapsulated by component modules in the front-end project: The command "gaialinttest1" executed in step 1 above will trigger the corresponding inspection configuration script tasks for installing new component module encapsulations in the front-end project (such as the script tasks of yarnlint (code specification eslint inspection), yarnsonar (code specification sonar inspection), and yarnpackage-check (dependency package definition specification inspection) configured in the front-end project, and these script tasks are all custom scripts), thereby completing the corresponding inspection tasks for the entire front-end project.

[0046] Return the inspection results: The inspection results executed in step 2 above will be returned to the operation and maintenance server through the front-end project and displayed to users through the operation and maintenance system. If all inspections pass, continue to execute step 5 below; if any one inspection fails, do not continue, and notify the relevant person in charge through a "DingTalk" message with the error information.

[0047] Start the command for installing dependency packages encapsulated by component modules: Similar to step 1 above, the new component module in the operation and maintenance server executes its encapsulation command: "gaiainstalltest1".

[0048] Execute the configuration script for installing dependency packages encapsulated by component modules in the front-end project: The command "gaiainstalltest1" executed in step 4 above will trigger the corresponding installation script task (yarninstall --frozen-lockfile) for installing new component module encapsulations in the front-end project to install the dependency packages.

[0049] Return the results of installing dependency packages: The results of installing dependencies executed in step 5 above will be returned to the operation and maintenance server through the front-end project and displayed to users through the operation and maintenance system. If there are no problems during the installation process, continue to execute step 7 below; if an error occurs during the installation process, do not continue, and notify the relevant person in charge through a "DingTalk" message with the error information.

[0050] Start the compilation command encapsulated by component modules: Similar to step 1 above, the new component module in the operation and maintenance server executes its encapsulation command: "gaiabuildtest1".

[0051] Execute the configuration script for compilation encapsulated by component modules in the front-end project: The command "gaiabuildtest1" executed in step 7 above will trigger the corresponding installation script tasks (rm -rf dist (clear the previous build artifacts), yarnbuild (execute the compilation of the current project)) for installing new component module encapsulations in the front-end project to perform the compilation job.

[0052] Return the result of compilation: The result of the compilation executed in the above 8 steps will be returned to the operation and maintenance server through the front-end project and displayed to the user through the operation and maintenance system. If there is no problem with the compilation process, continue to execute the following 10 steps; if an error occurs during the compilation process, stop and notify the relevant person in charge through a "DingTalk" message with the error information.

[0053] Upload the compilation product to the externally accessible server / CDN server: The compilation product of the above 9 steps is directly uploaded to the externally accessible server and the CDN server by the compilation and deployment server, so that users can access the latest front-end page content through the url.

[0054] Return the result of the upload: The result of the upload executed in the above 10 steps will be returned to the operation and maintenance server and displayed to the user through the operation and maintenance system. If there is no problem with the upload process, continue to execute the following 12 steps; if an error occurs during the upload process, stop and notify the relevant person in charge through a "DingTalk" message with the error information.

[0055] Return the result of this deployment: When all the above steps are completed, the result (success or failure) of this deployment and release will be seen in the operation and maintenance system.

[0056] This embodiment also proposes a computer-readable storage medium, such as a memory including program code, and the above program code can be executed by a processor to complete the method in the above embodiment. For example, the computer-readable storage medium can be a Read-Only Memory (ROM), a Random Access Memory (RAM), a Compact Disc Read-Only Memory (CDROM), magnetic tape, floppy disk, and optical data storage device, etc.

[0057] This embodiment of the present disclosure also provides a computer program product, which includes one or more pieces of program code, and the program code is stored in a computer-readable storage medium. The processor of the electronic device reads the program code from the computer-readable storage medium, and the processor executes the program code to complete the implementation steps of the method provided in the above embodiment.

[0058] Specifically, as a non-transitory computer-readable storage medium, the memory can be used to store non-transitory software programs, non-transitory computer-executable programs, and modules. By running the non-transitory software programs, instructions, and modules stored in the memory, the processor can implement the methods in the embodiments of the present disclosure. The memory may include high-speed random access memory and may also include non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, or other non-volatile solid-state storage devices. In some embodiments, the memory optionally includes a memory remotely disposed relative to the processor, and these remote memories can be connected to the processor through a network. Examples of the above networks include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0059] The processor can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), a hardware chip, or any combination thereof; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a programmable logic device (PLD), or a combination thereof. The above PLD can be a complex programmable logic device (CPLD), a field-programmable gate array (FPGA), a generic array logic (GAL), or any combination thereof.

[0060] The technical features of the above-described embodiments can be combined arbitrarily. For the sake of brevity of description, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, it should be considered as the scope recorded in this specification.

[0061] The above-described embodiments merely represent several implementation manners of the present invention, and the description thereof is relatively specific and detailed, but it should not be construed as a limitation on the scope of the invention patent. It should be noted that for those of ordinary skill in the art, without departing from the concept of the present invention, several modifications and improvements can still be made, and these all belong to the protection scope of the present invention. Therefore, the protection scope of the invention patent shall be subject to the appended claims.

Claims

1. A method and system for realizing dynamic compilation of a front-end project under containers in multiple environments, characterized in that, include: For the target container, deploy an intermediate component; the intermediate component includes a front-end engineering component module installed in the front-end engineering of the target container and a front-end operation and maintenance server component module installed in the operation and maintenance server of the target container, and the front-end engineering component module and the front-end operation and maintenance server component module have a linkage relationship; During compilation, the compilation and deployment tasks released by the operation and maintenance release system are received and executed in real time through the intermediate component; wherein the front-end engineering component module is used to respond to the compilation and deployment tasks, identify the target environment of the compilation and deployment tasks, dynamically generate the configuration information required for the target environment during compilation, and perform registration component initialization in the front-end engineering according to the configuration information, and inject the dynamically generated environment configuration script information into the front-end engineering; the front-end operation and maintenance server component module is used to respond to the triggering of the engineering component module in a linked manner, and execute the functions of each configuration script injected in the front-end engineering; The compilation and deployment tasks include: checking, installing dependent packages, compiling, and uploading compilation products; corresponding to the compilation and deployment tasks, the environment configuration script information includes checking configuration scripts, installing dependent package configuration scripts, compiling configuration scripts, and uploading configuration scripts.

2. According to the method of claim 1, the front-end project uses the yarn tool to install the dependent package, and locks the dependent package through the yarn.lock file and the identification parameters provided by the yarn tool.

3. According to the method of claim 1, if an error occurs during the execution of the compilation and deployment task, an error message is generated by the intermediate component and the error message is sent to a preset target person.

4. A front-end compilation and operation and maintenance system in a multi-environment in a container, characterized in that, Including front-end engineering, operation and maintenance servers and intermediate components; The intermediate component includes a front-end engineering component module installed in the front-end engineering of the target container and a front-end operation and maintenance server component module installed in the operation and maintenance server of the target container, and the front-end engineering component module and the front-end operation and maintenance server component module have a linkage relationship; The engineering component module is used to respond to the compilation and deployment task, identify the target environment of the compilation and deployment task, generate the configuration information required by the target environment, provide the front-end engineering with a registration component initialization function, and inject environment configuration script information into the front-end engineering; The front-end operation and maintenance server component module is used to respond to the triggering of the engineering component module in a linked manner and execute the functions of each configuration script injected into the front-end engineering.

5. The system according to claim 4, wherein The front-end project is specifically used to install dependent packages using the yarn tool, and lock the dependent packages through the yarn.lock file and identification parameters provided by the yarn tool.

6. The system according to claim 4, wherein The intermediate component is also used to generate error information when an error occurs during the execution of the compilation and deployment task, and send the error information to a preset target person.

7. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, which can be read and executed by a processor to implement the method described in any one of claims 1 to 3.

Images