Front-end publishing method, electronic equipment and storage medium

Abstract

The invention relates to the technical field of software, and provides a front-end publishing method, electronic equipment and a storage medium. The method comprises the following steps of: setting an independent access domain name for an HTML (Hypertext Markup Language) of an engineering static file, and setting a material static resource and other engineering static resources as a unified access domain name; continuous integration / continuous deployment access transformation of the project is carried out; and accessing an automatic publishing platform, and carrying out visual configuration and publishing on required functions. According to the technical scheme, the publishing and packaging product at the front end is transformed, a core HTML for WEB version management is independently managed, resource sharing of other static resource files is achieved, and an incremental publishing and configurable efficient caching strategy scheme is achieved; and through a CICD deployment platform, rapid version rollback is supported while the difference of the packaging environment is flattened. The operation and maintenance cost is greatly reduced, and meanwhile high efficiency is guaranteed.

Description

Technical Field

[0001] The present application relates to the technical field of software front-end publishing, and in particular to a front-end publishing method, electronic equipment and storage medium. Background Art

[0002] For web pages displayed to users on browsers such as PCs and mobile terminals, operating companies often need to update the front-end pages, and at this time, they need to publish the front-end. The existing conventional front-end publishing process generally involves compiling the front-end project files locally, uploading them to the publishing warehouse, and pulling the packaged files from the publishing warehouse to complete the image building. For international businesses, the current practices are generally: first, deploy a complete set of front-end packaged files on servers in different regions; second, configure a main site, map multi-language domain names, and provide them to users in different regions for access.

[0003] However, the first deployment method requires the deployment of multiple sets of front-end services because they are used in multiple countries or regions. The front-end resource package of each service will become larger and larger with the version iteration, which will have higher operation and maintenance costs, and the static resource files in the front-end project cannot be reused. The second deployment method is highly dependent on the network status, and the speed at which users in different regions access the application cannot be guaranteed. The access speed is highly dependent on the network transmission speed between the main site and the mapped site. In addition, both solutions are full-volume releases. During the release process, users may be unable to access the website, and the engineering static files and material static files of the front-end project are not split, so it is impossible to set an efficient cache strategy. Summary of the invention

[0004] In order to help improve the existing problems of low front-end cache efficiency, long rollback cycle, and inability to quickly stop losses, the present application provides a front-end publishing method, electronic device, and storage medium.

[0005] In a first aspect, the present application provides a front-end publishing method, the method comprising:

[0006] S10: Set an independent access domain name for the HTML of the project static files, and set the material static resources and other project static resources to a unified access domain name;

[0007] S20: Perform continuous integration / continuous deployment access transformation of the project;

[0008] S30: Connect to the automated publishing platform to visually configure and publish the required functions.

[0009] By adopting the above technical solution, page resources can be version managed separately, realizing the reuse of the same resources in different versions, greatly reducing operation and maintenance costs while ensuring high efficiency.

[0010] In a second aspect, the present application provides an electronic device, which adopts the following technical solution:

[0011] An electronic device, comprising:

[0012] at least one processor;

[0013] Memory;

[0014] At least one application, wherein the at least one application is stored in a memory and configured to be executed by at least one processor, and the at least one application is configured to: execute a front-end publishing method.

[0015] In a third aspect, the present application provides a computer-readable storage medium, which adopts the following technical solution:

[0016] A computer-readable storage medium stores a computer program, which, when executed in a computer, causes the computer to execute any one of the front-end publishing methods provided in the first aspect.

[0017] In summary, the technical solution of this application independently manages the core HTML of WEB version management by transforming the front-end release packaging product, and realizes resource sharing for other static resource files, realizing incremental release and configurable efficient cache strategy solutions; through the CICD deployment platform, it smoothes out the differences in packaging environments and supports rapid version rollback, greatly reducing operation and maintenance costs while ensuring high efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] Figure 1 It is a flowchart of a front-end publishing method provided in an embodiment of the present application;

[0019] Figure 2 yes Figure 1 Schematic diagram of the expansion process of step S20;

[0020] Figure 3 This is a schematic diagram of the CDN configuration principle of a front-end publishing method provided in an embodiment of the present application;

[0021] Figure 4 It is a schematic diagram of the pre-linking principle of a front-end publishing method provided in an embodiment of the present application;

[0022] Figure 5 This is a schematic diagram of the principle of an electronic device module provided in an embodiment of the present application. DETAILED DESCRIPTION

[0023] In order to make the purpose, technical solutions and advantages of this application more clear, the following Figure 1-5It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0024] An embodiment of the present application provides a front-end publishing method for use in a front-end publishing system.

[0025] This embodiment uses multi-region APP release as an application example to specifically illustrate the above method. In actual implementation, the above method can also be used in other situations, which is not limited in this embodiment.

[0026] Specific reference Figure 1 , a front-end publishing method, comprising the steps of:

[0027] S10: Setting an independent access domain name for the HTML (Hyper Text Markup Language) of the project static files, and setting the material static resources and other project static resources to a unified access domain name;

[0028] S20: Perform continuous integration / continuous deployment access transformation of the project;

[0029] S30: Connect to the automated publishing platform to visually configure and publish the required functions.

[0030] The technical solution of this application, by transforming the front-end release packaging product, independently manages the core HTML of WEB version management, and realizes resource sharing for other static resource files, realizing incremental release and configurable efficient cache strategy solutions; through the CI / CD (continuous integration / continuous deployment) deployment platform, it smoothes out the differences in packaging environments and supports rapid version rollback, greatly reducing operation and maintenance costs while ensuring high efficiency.

[0031] In this embodiment, the static resources used by the front-end are mainly divided into two categories: engineering static resources and material static resources. Among them, engineering static resources include html files (as entry files, they are the general commanders, determine the version numbers of referenced scripts and style files, and are the key to controlling version changes and caching), JavaScript files, css files, image files, font files, etc. Material static resources include operation position pictures, covers, shopping malls, etc.

[0032] On the basis of the embodiment of the present invention, further, in step S10, the resources stored in all data centers are full files, which are synchronized through bucket replication, and object storage back to the source is set to achieve disaster recovery. In the present invention, different data centers are set for different regions, one region is used as the main storage bucket, the full resources are synchronized to the storage buckets of other regions, and the region is used as the source station for object storage in other regions.

[0033] In the embodiment of the present invention, in step S30, the application programming interface of the object storage service provider is accessed to perform uniform resource identifier rule configuration, resource access refresh, version rollback and / or offline.

[0034] See attached Figure 2 As shown, based on this embodiment, step S20 includes:

[0035] S21: Perform object storage configuration: divide the primary storage bucket and set the bucket replication rules;

[0036] S22: Perform content distribution network configuration: set back-to-source rules and configure cache policies;

[0037] The content distribution network dynamically sets the data center back to the source based on the primary path of the link;

[0038] When setting up a content distribution network back to the source, set up a backup source station for disaster recovery;

[0039] Among them, the backup source station of the content distribution network takes effect asynchronously. When the resources of the primary source station do not exist, a web page error status code is returned, and a resource synchronization task is initiated to the backup source station. After the back-to-source policy is set, the page resource cache time and static resource cache time are set.

[0040] S23: Build the project: Build the front-end packaging command script, set the base prefix for the hypertext markup language, and configure the pre-link and environment variables; it includes:

[0041] Build command transformation: Inject domain name, project type, environment, and language variables during packaging to obtain a resource deployment package that can be used in multiple languages;

[0042] Resource prefix: add the Base tag in the HTML file (the base tag specifies the default URL or default target for all relative links on the page);

[0043] Pre-link: Set pre-link through the link tag (the link tag defines the relationship between the current document and external resources) to improve the access speed of the web page.

[0044] S24: Upload resources: upload HTML and other static resource files to different storage buckets respectively; resource uploading includes:

[0045] Under the release directory of the build project, the domain name subdirectory is uploaded to the domain name storage bucket according to the intranet or the Internet; under the release directory of the build project, the static resources are uploaded to the static resource storage bucket according to the intranet or the Internet.

[0046] S25: Set code branch: code branch is used in various production and research links, among which production release is fixed as the main version;

[0047] S26: Install dependencies: Package management is unified through high-performance package management tools, and all projects share the global repository.

[0048] This embodiment converts the front-end version management into HTML file management. Since HTML naturally supports the Base tag, the base address for accessing referenced file scripts and style files can be set, and the front-end publishing product can be split into HTML + other projects and material static resources, where HTML files are set to access with independent domain names, and other static resources are set to access with unified domain names. Combined with the automated publishing platform, efficient front-end project deployment and incremental front-end publishing can be completed.

[0049] See attached Figure 3 And attached Figure 4 As shown, in another embodiment of the present invention, taking the front-end release in multiple regions as an example, the release target is achieved through the following steps.

[0050] Step 1: Prepare front-end deployment resources in different regions for international business access needs. First, set an independent access domain name for HTML (called page resources in this embodiment), and set an independent access domain name for resource files other than HTML (called static resources in this embodiment). In this embodiment, the active page domain name web.cdabc is used as an example.

[0051] a. Static resources uniformly use the domain name g.cdabc.com, and each data center creates a g-{lang}-cdabcBucket;

[0052] b. Page resources uniformly use the web.cdabc.com domain name, and each data center creates a web-{lang}-cdabcBucket;

[0053] c. The resources stored in each data center are full files, which are replicated and synchronized through storage buckets, and disaster recovery is achieved by setting up cos back to the source.

[0054] Static resources:

[0055] g-cdabc in Hong Kong, China serves as the main bucket, synchronizes all resources to buckets in other regions, and serves as the source site for COS in other regions.

[0056] a. Static resource links need to carry / lang} to identify the origin site;

[0057] b. Static resources in different languages ​​and in the same data center are isolated based on the file names generated by contentHash.

[0058] Dynamic resources:

[0059] a. web-cdabc in Hong Kong, China serves as the main bucket, synchronizes all resources to buckets in other regions, and serves as the origin site for COS in other regions;

[0060] b. The activity page link needs to carry / lang} to identify the origin site of the back-to-source. The domain name access page is mapped to the corresponding language origin site through parsing;

[0061] c. Different domain names use the domain name as the first-level directory to achieve isolation of the same page resources.

[0062] It should be noted that COS (Cloud Object Storage) is a distributed storage service for storing massive files, with the advantages of high scalability, low cost, reliability and security. Through a variety of methods such as console, API, SDK and tools, users can simply and quickly access COS to upload, download and manage multi-format files, and realize massive data storage and management.

[0063] Bucket is the carrier of objects, which can be understood as a "container" for storing objects, and there is no upper limit on the capacity of this "container". Objects are stored in buckets in a flat structure, without the concept of folders and directories. Users can choose to store objects in a single or multiple buckets.

[0064] ContenHash: Maps [binary data of arbitrary length] into [shorter fixed-length] binary values, which can be configured through the front-end packaging tool webpack.

[0065] Webpack: A static module bundler for modern JavaScript applications.

[0066] The basic idea of ​​CDN (Content Delivery Network) is to avoid bottlenecks and links on the Internet that may affect data transmission speed and stability as much as possible, so as to make content transmission faster and more stable.

[0067] Preconnect: It allows the browser to perform some operations in advance before an HTTP request is officially sent to the server, including DNS resolution, TLS negotiation, and TCP handshake, which eliminates round-trip delays and saves time for users.

[0068] Pnpm: The full name is performant npm, which means high-performance npm. pnpm is derived from npm / yarn, which solves the potential bugs in npm / yarn, greatly optimizes the performance, and expands the usage scenarios. It is known as the most advanced package management tool.

[0069] Step 2: After completing the planning and design of the project deployment environment through step 1, you need to complete the CICD access transformation of the project:

[0070] a. COS configuration: Use the Hong Kong environment as the primary site through COS configuration and set up bucket replication. The bucket replication function will synchronously replicate the resources in the Hong Kong environment to other language environments.

[0071] b. CDN configuration: COS service providers provide corresponding CDN services, through which resource files on COS can be efficiently accessed. The specific back-to-source configuration is as follows:

[0072] 1) CDN dynamically sets the data center back to the source based on the primary path of the link (e.g. " / en");

[0073] 2) When CDN is set up for back-to-source, Hong Kong COS is set as the backup source station for disaster recovery;

[0074] 3) Note: The CDN backup source station takes effect asynchronously, that is, when the resources of the primary source station do not exist, a 404 error is returned and a resource synchronization task is initiated to the backup source station.

[0075] After setting the back-to-origin strategy, configure CDN cache: page resource cache duration is 300 seconds, and static resource cache duration is 30 days.

[0076] c. Project construction. Since the solution disassembles the packaged files of the original project, a new project construction configuration is required accordingly.

[0077] 1) Build command transformation, inject domain name, project type, environment, and language variables during packaging, and package to obtain a resource deployment package that can be used in multiple languages;

[0078] 2) Resource prefix. You need to add a Base tag in the HTML file. The format of the Base setting is 'static resource domain name / {publishing language} / '. Taking English as an example, the path of the Base tag needs to be set to " / / g.cdabc.com / en / ";

[0079] 3) Pre-link, set preconnect through the link tag to improve the access speed of the web page

[0080] d. Resource upload

[0081] 1) In the dist directory of the build project, the domain name subdirectory is uploaded to the web-ef-ltd or web-cdabc Bucket according to the intranet or extranet;

[0082] 2) In the dist directory of the build project, the static resources are uploaded to g-ef-ltd or g-cdabcBucket according to the intranet or extranet;

[0083] e. Code branch agreement: the production environment uses the master branch, the pre-release environment uses the release branch, the test environment uses the test branch, and the development environment allows custom features / functions and branches;

[0084] f. Dependency installation: Dependencies are installed through pnpm. All projects share the global repository, and only one version of the same dependency is saved. Dependencies are installed in real time for each build. The initial installation is slow, but gradually becomes faster, and the disk space is small.

[0085] g. Multi-language: When building, multiple HTML files are built according to the selected multi-language. Each HTML file is injected with two variables, lang and env, according to the publishing environment selected in the publishing order, and the environment.js file is removed. Only one static resource file is built under multi-language.

[0086] Step 3: Release the order. Through steps 1 and 2, the solution can be released in multiple languages, but it is not flexible and efficient enough, so it needs to be released automatically. Visually configure and release the functions in steps 1 and 2. By accessing the development API provided by the COS service provider, you can implement URL rule configuration, resource access refresh, version rollback and offline functions.

[0087] The technical solution of the present invention utilizes the Base tag natively supported by the web page to split the access address of the page resource and the access address of the static resource; the page resource can be versioned separately, and the static resource referenced by the page resource realizes the reuse of the same resource of different versions. Since the language path is set for the resource access path, it is more convenient to configure the back-to-source strategy, and the access efficiency of the web page is improved; since the static resources (static resources change less, most of the files are unchanged, the unchanged parts can be reused, and are suitable for incremental release) are incrementally released, there will be no large fluctuations with the version iteration, which greatly reduces the operation and maintenance costs while ensuring high efficiency.

[0088] The present application also provides an electronic device, such as Figure 5 As shown, Figure 5The electronic device 700 shown includes: a processor 701 and a memory 703. The processor 701 and the memory 703 are connected, such as through a bus 702. Optionally, the electronic device 700 may also include a transceiver 704. It should be noted that in actual applications, the transceiver 704 is not limited to one, and the structure of the electronic device 700 does not constitute a limitation on the embodiments of the present application.

[0089] Processor 701 may be a CPU (Central Processing Unit), a general purpose processor, a DSP (Digital Signal Processor), an ASIC (Application Specific Integrated Circuit) or other programmable logic devices, transistor logic devices, hardware components or any combination thereof. It may implement or execute various exemplary logic blocks, modules and circuits described in conjunction with the disclosure of this application. Processor 701 may also be a combination that implements computing functions, such as a combination of one or more microprocessors, a combination of a DSP and a microprocessor, etc.

[0090] The bus 702 may include a path to transmit information between the above components. The bus 702 may be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus. The bus 702 may be divided into an address bus, a data bus, etc. For ease of representation, Figure 5 Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0091] The memory 703 can be a ROM (Read Only Memory) or other types of static storage devices that can store static information and instructions, a RAM (Random Access Memory) or other types of dynamic storage devices that can store information and instructions, or an EEPROM (Electrically Erasable Programmable Read Only Memory), a disk storage medium or other magnetic storage device, or any other medium that can be used to carry or store the desired program code in the form of instructions or data structures and can be accessed by a computer, but is not limited to these.

[0092] The memory 703 is used to store the application code for executing the solution of the present application, and the execution is controlled by the processor 701. The processor 701 is used to execute the application code stored in the memory 703 to implement the contents shown in the above method embodiment.

[0093] The electronic devices include, but are not limited to, mobile terminals such as mobile phones, notebook computers, PDAs (personal digital assistants), PADs (tablet computers), etc., and fixed terminals such as digital TVs, desktop computers, etc. It can also be a server, etc. Figure 5 The electronic device shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0094] An embodiment of the present application also provides a computer-readable storage medium on which a computer program is stored. When the computer program is executed in a computer, the computer is caused to execute the front-end publishing method provided in the above embodiment.

[0095] It should be understood that although the steps in the flowchart of the accompanying drawings are shown in sequence according to the instructions of the arrows, these steps are not necessarily performed in the order indicated by the arrows. Unless otherwise clearly stated in this document, the execution of these steps is not strictly limited in order and can be performed in other orders.

[0096] The above are only some implementation methods of the present application. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present application. These improvements and modifications should also be regarded as the scope of protection of the present application.

Claims

1. A front-end publishing method, characterized in that: Includes steps: S10: Set an independent access domain name for the HTML of the project static files, and set the material static resources and other project static resources to a unified access domain name; S20: Perform continuous integration / continuous deployment access transformation of the project; S30: Connect to the automated publishing platform to visually configure and publish the required functions.

2. The front-end publishing method according to claim 1, characterized in that: In step S10, the resources stored in all data centers are full files, which are synchronized through bucket replication, and object storage back to the source is set to achieve disaster recovery.

3. The front-end publishing method according to claim 2, characterized in that: In step S10, different data centers are set up for different regions, one of the regions is used as the main storage bucket, all resources are synchronized to the storage buckets in other regions, and the region is used as the source station for object storage in other regions.

4. The front-end publishing method according to claim 1, characterized in that: In step S30, the application programming interface of the object storage service provider is accessed to perform uniform resource identifier rule configuration, resource access refresh, version rollback and / or offline.

5. The front-end publishing method according to claim 1, characterized in that: Step S20 includes, S21: Perform object storage configuration: divide the primary storage bucket and set the bucket replication rules; S22: Perform content distribution network configuration: set back-to-origin rules and configure cache policies; S23: Build the project: build the front-end packaging command script, set the base prefix for the hypertext markup language, configure the pre-link and environment variables; S24: Upload resources: upload the hypertext markup language and other static resource files to different storage buckets respectively; S25: Set up code branches: Code branches are applied to each link, among which production release is fixed as the main version; S26: Install dependencies: Package management is unified through high-performance package management tools, and all projects share the global repository.

6. The front-end publishing method according to claim 5, characterized in that: S22 content delivery network configuration includes: The content distribution network dynamically sets the data center back to the source based on the primary path of the link; When setting up a content distribution network back to the source, set up a backup source station for disaster recovery; Among them, the backup source station of the content distribution network takes effect asynchronously. When the resources of the primary source station do not exist, a web page error status code is returned, and a resource synchronization task is initiated to the backup source station. After the back-to-source policy is set, the page resource cache time and static resource cache time are set.

7. The front-end publishing method according to claim 5, characterized in that: S23 project build includes: Build command transformation: Inject domain name, project type, environment, and language variables during packaging to obtain a resource deployment package that can be used in multiple languages; Resource prefix: add Base tag in HTML file; Pre-link: Set pre-link through the link tag to increase the access speed of the web page.

8. The front-end publishing method according to claim 5, characterized in that: S24 resource upload includes: Under the release directory of the build project, the domain name subdirectory is uploaded to the domain name storage bucket based on the intranet or the Internet; In the release directory of the build project, static resources are uploaded to the static resource storage bucket based on the intranet or the Internet.

9. An electronic device, characterized in that: The electronic device includes: at least one processor; Memory; At least one application, wherein the at least one application is stored in a memory and configured to be executed by at least one processor, and the at least one application is configured to: execute the front-end publishing method described in any one of claims 1 to 8.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed in a computer, the computer is caused to execute the front-end publishing method described in any one of claims 1 to 8.

Images