A cloud-based front-end dynamic loading resource file method

Abstract

The present invention provides a cloud-based method for dynamically loading resource files on a front-end. This method belongs to the field of front-end project development in a cloud computing environment. Environment variables are read in the project. When the environment variables are modified, the project dynamically loads the new environment variables and applies them to the project without restarting the project. When a user uses the service, the variables are modified in the environment, and the project dynamically loads the changed environment variables in the project and provides them to the client. The client is unaware of the system changes, and the service is guaranteed to be always available. This method meets the requirement of dynamically loading resource files on the cloud front-end.

Description

Technical Field

[0001] The present invention relates to the fields of front-end project development and deployment, Angular front-end framework, scheduled tasks, config-service environment variable reading, front-end monitoring, etc. in a cloud computing environment, and in particular to a cloud-based front-end dynamic loading resource file method. Background Art

[0002] In the context of cloud computing and big data, the Angular framework is increasingly used in front-end development, and the use of Kubernetes for application deployment in public cloud environments is also growing. Environment variables used in a project are deployed to a configmap. Each variable used in the project reads the corresponding variable in the configmap. However, in existing technologies, to facilitate the management of environment variables used in a project without affecting project usage, environment variables are typically written to the project's application file or deployed to a configmap. If a variable used in a project needs to be modified, simply modifying the environment variable file is not sufficient; the project or container must be restarted. During this restart, cloud service products become unavailable, significantly inconvenient for users. Summary of the Invention

[0003] To address the above technical issues, the present invention provides a cloud-based front-end method for dynamically loading resource files. This method effectively reduces the time required to restart a project during development, which is often caused by modifying environment variables. In a public cloud environment, this method facilitates R&D personnel to modify constants used in their projects and operations personnel to maintain project environment variables.

[0004] The technical solution of the present invention is:

[0005] A cloud-based front-end method for dynamically loading resource files. It dynamically loads environment variables in resource files, that is, reads environment variables in the project. When the environment variables are modified, the project will dynamically load the new environment variables and apply them to the project. The project does not need to be restarted, ensuring the normal operation of the service and achieving non-perceived update operations.

[0006] When users use the service, they modify the variables in the environment, which are dynamically loaded by the project, causing the environment variables in the project to change and be provided to customers for use. The customers are unaware that the system has changed, and the service is guaranteed to be always available.

[0007] Further,

[0008] Use monitoring scripts to monitor all resource files in the project. If there are any changes, automatically re-read the environment variables in the file into the project, or reload the enumeration objects into the project. Use scheduled tasks to create scheduled tasks to load resource files according to the set time.

[0009] Going further,

[0010] Create a resource file in the chart, write the environment variables to be used in the resource file, and write the constants or enumeration values ​​used by the project in files in the corresponding directory; create an environment variable class file in the project, whose variables correspond to the environment variable resource file; create an enumeration class file in the project; introduce the loading resource file ts file into the project, introduce the file in the project initialization app-init.ts file, read the variables in the resource file into the project in the initialization method, create a listener to detect whether the resource file has changed, and if so, reload the resource file;

[0011] Use the pipeline to make the front-end project into a Docker image; use the prepared chart to deploy the front-end Docker image on K8s. The project automatically loads the resource files in the chart into the project. If you need to modify the variables in the file, you can modify them directly. The project will detect the changes in the resource file and reload it.

[0012] Going further,

[0013] The specific process of project modification is as follows:

[0014] (1) Create an environment.ts file in the project and create the environment variables you need to use in the environment.ts file;

[0015] (2) Create an enumeration object file used in the project and create objects used in the project in the file;

[0016] (3) Create an application.json file in the project and write environment variables and values ​​in the file for local debugging of the project;

[0017] (4) Create a config-service.ts file in the project. Write a method to read the resource file in the file to read the variables in the above file. Add a judgment branch to the method: if it is a local debugging project, read the value of the variable in the application.json file created in the same project; if it is a project running on the public cloud, read the value of the environment variable created in configmap;

[0018] (5) In the project initialization file app-init.ts, add the method of reading the resource file in step (4) to read the environment variables in the chart into the project, assign the variable values ​​​​in it to the environment object, and assign the enumeration object or other objects used in the project to the enumeration object; if it cannot be read, use the default value of the variable in the file;

[0019] (6) Create a monitoring file in the project and write a method to monitor changes in resource files to continuously monitor changes in variables in the resource file configmap in the environment;

[0020] (7) Introduce the monitoring ts file into the project initialization file app-init.ts, and use the monitoring method in the init method to continuously monitor the resource file; if the resource file changes, reload the variables in the file into the project object and record the update in the session;

[0021] (8) Create a timed task ts file in the project to automatically obtain the environment variables in the resource file once according to the set time period;

[0022] (9) In the init method of the project initialization file app-init.ts, start the scheduled task and set the scheduled task execution cycle time to prevent the resource file from being updated to the project after being modified, and record the update time for use during debugging or maintenance.

[0023] Chart modification steps:

[0024] (1) Modify the configmap file of the chart project, create environment variables in the file and add values;

[0025] (2) Create variables used in the project in configmap, or enumerate objects, and add the required values ​​to the file.

[0026] The operation process is as follows:

[0027] (1) Check whether the public cloud environment is normal;

[0028] (2) Use pipeline to make the project into Docker image;

[0029] (3) Use chart to deploy the front-end project to the environment;

[0030] (4) Check whether the environment variables and enumeration objects read in the project are correct, and whether the variable values ​​in the resource file are read;

[0031] (5) Modify the environment variables in the project's configmap and check in the project whether the environment variables are the modified values;

[0032] (6) Modify the value corresponding to the used key in the enumeration object in the project's configmap, and check the front-end page to see if the modified enumeration value is updated;

[0033] (7) Set the scheduled task period (it can be set to less than 60 minutes during testing and more than 60 minutes in a formal environment). After the scheduled task is triggered, check the log or the time of the latest resource file loaded in the session to see if it is a scheduled task triggering event.

[0034] This method uses centralized management of resource files, and the project loads resource files centrally, so as to facilitate the maintenance of environment variables and enumeration objects used in the project.

[0035] This method uses a monitoring script to monitor all resource files in the project. If there are changes, it automatically re-reads the environment variables in the file into the project, or reloads the enumeration object into the project; this achieves the purpose of dynamically loading environment variable resource files.

[0036] Use scheduled tasks to create scheduled tasks to load resource files once at a certain time to prevent resource files from being updated in time.

[0037] The beneficial effects of the present invention are

[0038] Dynamically load environment variables in resource files in a public cloud environment to ensure that after resource files are modified, the environment variables in the project will be reloaded, and ensure that loading is scheduled to prevent files from not being updated in the project after modification. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] Figure 1 It is a schematic diagram of the project modification steps of the present invention;

[0040] Figure 2 It is a schematic diagram of the use steps of the present invention. DETAILED DESCRIPTION

[0041] In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0042] The present invention is aimed at front-end projects deployed in a public cloud environment and provides a method for dynamically loading resource files based on the Angular framework.

[0043] Prerequisites:

[0044] (1) The front-end projects that need to be deployed in the public cloud environment are running normally.

[0045] (2) Prepare the chart package for the project to be deployed in the public cloud environment.

[0046] (3) The public cloud environment where the front-end project is deployed is normal.

[0047] Specific steps:

[0048] (1) Project modification steps: see the specific process Figure 1 :

[0049] (1) Create an environment.ts file in the project and create the environment variables you need to use in the environment.ts file.

[0050] (2) Create an enumeration object file used in the project, such as status.ts, and create objects used in the project in the file.

[0051] (3) Create an application.json file in the project and write environment variables and values ​​in the file for local debugging of the project.

[0052] (4) Create a config-service.ts file in the project. Write a method for reading resource files in the file to read the variables in the above file. Add a judgment branch to the method: if it is a local debugging project, read the value of the variable in the application.json file created in the same project; if it is a project running on the public cloud, read the value of the environment variable created in configmap.

[0053] (5) In the project initialization file app-init.ts, add the method of reading resource files in (4) to read the environment variables in the chart into the project, assign the variable values ​​​​in it to the environment object, and assign the enumeration object or other objects used in the project to the enumeration object (such as status.ts); if it cannot be read, use the default value of the variable in the file.

[0054] (6) Create a monitoring file in the project and write a method to monitor changes in resource files to continuously monitor changes in variables in the resource file configmap in the environment.

[0055] (7) Introduce the monitoring ts file into the project initialization file app-init.ts and use the monitoring method in the init method to continuously monitor the resource file. If the resource file changes, reload the variables in the file into the project object and record the update in the session.

[0056] (8) Create a timed task ts file in the project to automatically obtain the environment variables in the resource file once according to a certain time period.

[0057] (9) In the init method of the project initialization file app-init.ts, start the scheduled task and set the scheduled task execution cycle time to prevent the resource file from being updated to the project after being modified, and record the update time for use during debugging or maintenance.

[0058] (2)Chart modification steps:

[0059] (1) Modify the configmap file of the chart project, create environment variables in the file and add values.

[0060] (2) Create variables used in the project in configmap, or enumerate objects, and add the required values ​​to the file.

[0061] (3) Usage steps: see the specific process Figure 2

[0062] (1) Check whether the public cloud environment is normal.

[0063] (2) Use the pipeline to make the project into a docker image.

[0064] (3) Use the chart to deploy the front-end project to the environment.

[0065] (4) Check whether the environment variables and enumeration objects read in the project are correct, and whether the variable values ​​in the resource file are read.

[0066] (5) Modify the environment variables in the project's configmap and check whether the environment variables are the modified values ​​in the project.

[0067] (6) Modify the value corresponding to the used key in the enumeration object in the project's configmap, and check the front-end page to see if the modified enumeration value is updated.

[0068] (7) Set the scheduled task cycle, for example, 60 minutes (you can set it to a shorter time during testing, but it is recommended to set it to at least 60 minutes in the official environment). After the scheduled task is triggered, check the log or the time of the latest loaded resource file in the session to see if it is a scheduled task triggering event.

[0069] The present invention dynamically loads environment variables from resource files; the project reads the environment variables, and when the environment variables are modified, the project dynamically loads the new environment variables and applies them to the project without having to restart the project, ensuring normal service operation and achieving unaware update operation. When using the service, users modify the variables in the environment, which are dynamically loaded by the project, causing the changed environment variables in the project to be provided to the client without the client noticing any system changes, ensuring that the service remains available and unaware of the update operation.

[0070] The above description is only a preferred embodiment of the present invention and is only used to illustrate the technical solution of the present invention, and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present invention are included in the scope of protection of the present invention.

Claims

1. A cloud-based front-end dynamic resource file loading method, characterized in that: Read environment variables in the project. When the environment variables are modified, the project will dynamically load the new environment variables and apply them to the project without restarting the project. The specific process of project modification is as follows: (1) Create an environment.ts file in the project and create the environment variables you need to use in the environment.ts file; (2) Create an enumeration object file used in the project and create objects used in the project in the file; (3) Create an application.json file in the project and write environment variables and values ​​in the file for local debugging of the project; (4) Create a config-service.ts file in the project. Write a method to read the resource file in the file to read the variables in the above file. Add a judgment branch in the method: if it is a local debugging project, read the value of the variable in the application.json file created in the same project; If the project is running on a public cloud, read the values ​​of the environment variables created in configmap; (5) In the project initialization file app-init.ts, add the method of reading the resource file in step (4) to read the environment variables in the chart into the project, assign the variable values ​​​​in it to the environment object, and assign the enumeration object or other objects used in the project to the enumeration object; if it cannot be read, use the default value of the variable in the file; (6) Create a monitoring file in the project and write a method to monitor changes in resource files to continuously monitor changes in variables in the resource file configmap in the environment; (7) Introduce the monitoring ts file into the project initialization file app-init.ts, and use the monitoring method in the init method to continuously monitor the resource file; if the resource file changes, reload the variables in the file into the project object and record the update in the session; (8) Create a timed task ts file in the project, and automatically obtain the environment variables in the resource file once according to the set time period; (9) In the init method of the project initialization file app-init.ts, start the scheduled task and set the scheduled task execution cycle time to prevent the resource file from being updated to the project after being modified, and record the update time for use during debugging or maintenance.

2. The method according to claim 1, characterized in that Use the monitoring script to monitor all resource files in the project. If there are changes, the environment variables in the file are automatically re-read into the project, or the enumeration objects are reloaded into the project.

3. The method according to claim 2, characterized in that Use scheduled tasks to create scheduled tasks to load resource files according to the set time.

4. The method according to claim 3, characterized in that Create a resource file in the chart, write the environment variables to be used in the resource file, and write the constants or enumeration values ​​used by the project in files in the corresponding directory; create an environment variable class file in the project, whose variables correspond to the environment variable resource file; create an enumeration class file in the project; introduce the loading resource file ts file into the project, introduce the file in the project initialization app-init.ts file, read the variables in the resource file into the project in the initialization method, create a listener to detect whether the resource file has changed, and if so, reload the resource file; Use the pipeline to make the front-end project into a docker image; use the prepared chart to deploy the front-end docker image. The project automatically loads the resource files in the chart into the project. If you need to modify the variables in the file, you can modify them directly. The project will detect the changes in the resource file and reload it.

5. The method according to claim 4, characterized in that Chart modification steps: (1) Modify the configmap file of the chart project, create environment variables in the file and add values; (2) Create variables used in the project in configmap, or enumerate objects, and add the required values ​​to the file.

6. The method according to claim 5, characterized in that The operation process is as follows: (1) Check whether the public cloud environment is normal; (2) Use the pipeline to make the project into a docker image; (3) Use chart to deploy the front-end project to the environment; (4) Check whether the environment variables and enumeration objects read in the project are correct, and whether the variable values ​​in the resource file are read; (5) Modify the environment variables in the project's configmap and check whether the environment variables are the modified values ​​in the project; (6) Modify the value corresponding to the used key in the enumeration object in the project's configmap, and check the front-end page to see if the modified enumeration value is updated; (7) Set the scheduled task cycle. After the scheduled task is triggered, check the log or the time of the latest loaded resource file in the session to see if it is a scheduled task triggering event.

7. The method according to claim 6, characterized in that Set the scheduled task period. It can be set to less than 60 minutes during testing, and more than 60 minutes in a formal environment.

Images