Reverse proxy-based multi-terminal spa url distribution method and system and medium

Abstract

The application discloses a kind of based on reverse proxy's multi-terminal SPA same URL distribution method, system and medium, the present application proposes in reverse proxy server level, through detecting User-Agent field in HTTP request header identification access device type, and using variable setting and file search instruction dynamic return corresponding device HTML entry file. Including: mobile terminal and PC end SPA is respectively constructed and deployed in same static resource directory, in Nginx Configuration based on regular matching device detection rule and entry file selection logic, request specific static resource is matched preferentially, when not matching, the entry HTML file of corresponding device is returned, while supporting through URL parameter forcedly specified device type.The present application does not need to merge front-end code library or client redirection, realizes the transparent distribution of multi-terminal SPA under same URL, with the beneficial effects of low modification cost, fast first-screen loading and good user experience.

Description

Technical Field

[0001] This invention relates to the field of Internet information processing and distribution technology, and in particular to a method, system and medium for multi-terminal SPA same URL distribution based on reverse proxy. Background Technology

[0002] In the development of internet applications with a front-end and back-end separation, enterprises often develop separate single-page applications (SPAs) for mobile and PC due to differences in historical technology stacks and the interactive characteristics of different devices. While this multi-platform independent development model can achieve targeted optimization, it also brings challenges in URL management: business users generally require that when users access the same URL, the system can automatically distribute and load the corresponding SPA page for the device, such as displaying the mobile page when accessing on a mobile phone and the PC page when accessing on a computer.

[0003] In a server-side rendering (SSR) architecture, the server can naturally and dynamically generate different pages based on request header information, making this requirement relatively easy to meet. However, in a front-end / back-end separated SPA architecture, the application returns a fixed HTML entry file, and the page content is dynamically generated by client-side JavaScript. The server itself lacks the ability to identify devices and distribute content on demand, making automatic adaptation across multiple devices under the same URL a complex technical problem.

[0004] Currently, there are three main solutions for distributing SPAs across multiple platforms under the same URL, but all of them have obvious drawbacks:

[0005] (1) Responsive web design: Using CSS media queries to adapt the same page to different screens. However, for projects that already have independent mobile and PC code libraries, it is necessary to merge and refactor the two sets of code, which is extremely costly; at the same time, it is necessary to maintain the logic and styles of all devices in a single code library, resulting in bloated code and difficult maintenance; in addition, the mobile version needs to load the PC version code, and vice versa, which causes unnecessary waste of resources and makes it impossible to perform in-depth optimization for different devices.

[0006] (2) Separate domain name solution: Configure different subdomains for mobile and PC (e.g., m.example.com and www.example.com). This solution does not meet the core requirement of "same URL" for business users; it requires the additional maintenance of multiple domain names and corresponding DNS and reverse proxy configurations, resulting in high operation and maintenance costs; when users share links between devices, the mobile link still displays the mobile page when opened on the PC, and vice versa, resulting in a fragmented user experience.

[0007] (3) Client-side redirection scheme: First, an intermediate page is loaded, and the device type is detected by JavaScript before redirecting to the corresponding page. This scheme adds extra network requests, which seriously affects the first screen loading speed; the redirection process causes page flickering, resulting in a poor user experience; at the same time, it increases the computational burden on the client, which is especially noticeable on low-performance devices.

[0008] In summary, under a multi-terminal SPA architecture with front-end and back-end separation, automatically loading the corresponding page based on the accessing device using the same URL is a business necessity. However, the existing responsive design, separate domain names, and client redirection solutions all have drawbacks such as high transformation costs, inability to achieve a truly unified URL, and poor user experience. They are difficult to balance the requirements of low transformation costs, good user experience, and a truly unified URL. Therefore, a new technical solution is urgently needed to solve these core pain points. Summary of the Invention

[0009] The purpose of this invention is to provide a method, system, and medium for multi-terminal SPA same URL distribution based on reverse proxy, thereby solving all or one of the aforementioned problems in the prior art.

[0010] To solve the above-mentioned technical problems, the specific technical solution of the present invention is as follows:

[0011] On one hand, the present invention provides a method for distributing multi-terminal SPAs with the same URL based on a reverse proxy, comprising the following steps:

[0012] Deployment steps: Build the mobile SPA and PC SPA separately, generating their respective static resources and entry HTML files; name the mobile entry HTML file the first entry file name, and the PC entry HTML file the second entry file name, and deploy the two entry HTML files and their respective static resources in the same static resource service directory;

[0013] Server-side configuration steps: In the server-side request distribution module, configure device detection rules, entry file selection logic, and parameter enforcement rules;

[0014] The device detection rules include: for each received HTTP request, obtaining the user agent field in its request header, and using regular expression matching to determine whether the user agent field contains a preset mobile device identifier; if so, it is determined to be a mobile device, otherwise it is determined to be a PC device.

[0015] The entry file selection logic includes: setting an entry file variable according to the determination result; when it is a mobile device, the entry file variable points to the first entry file name; when it is a PC device, it points to the second entry file name.

[0016] The parameter enforcement rule includes: when the URL of the HTTP request contains a specific enforcement parameter, the entry file variable is overridden according to the value of the enforcement parameter, wherein when the value of the enforcement parameter is not empty, the entry file variable is forcibly set to point to the first entry file name;

[0017] Request Reception and Variable Determination Steps: The server-side request distribution module receives the HTTP request sent by the client, and performs device type judgment and parameter detection on the current request according to the device detection rules, entry file selection logic and parameter enforcement rules configured in the server-side configuration steps, and determines the current value of the entry file variable accordingly for use in subsequent steps;

[0018] Request distribution processing steps: For the HTTP request, first search for the specific file corresponding to the request URI in the static resource service directory. If it exists, return the specific file directly; if it does not exist, return the entry HTML file specified by the current value of the entry file variable, thereby enabling the loading of corresponding SPA pages for different devices under the same URL.

[0019] As an improved solution, the preset mobile device identifiers include Android, iPhone, and iPad, and the regular expression matching is case-insensitive.

[0020] As an improved solution, the first entry file is named index-mobile.html, and the second entry file is named index-pc.html.

[0021] As an improved solution, the request distribution module on the server side is deployed on an Nginx server; in the server configuration step, the operation of determining whether the user agent field contains a mobile device identifier by matching regular expressions is implemented using the if directive and regular expression matching, and the setting of the entry file variable is implemented using the set directive; in the request distribution processing step, the search for the specific file corresponding to the request URI, if it exists, directly returns the specific file; if it does not exist, the entry HTML file specified by the current value of the entry file variable is returned, which is implemented using the try_files directive.

[0022] As an improved approach, the specific forced parameter is isMobile; when the value of the isMobile parameter in the request URL is 1, the entry file variable is forced to point to the first entry file name; when the value of the isMobile parameter is 0, the entry file variable is forced to point to the second entry file name.

[0023] As an improved solution, the deployment step of the build artifact further includes: in the build configuration, setting the output subdirectory / mobile / for mobile static resources and setting the output subdirectory / pc / for PC static resources, and setting the static resource reference path in the corresponding entry HTML file to the corresponding subdirectory to avoid resource conflicts.

[0024] As an improved approach, in the server configuration step, the static resource service directory is configured as the root directory or alias directory of the server's request distribution module to ensure that static resource requests can be correctly parsed.

[0025] On the other hand, the present invention also provides a multi-terminal SPA same URL distribution system based on reverse proxy, comprising:

[0026] A static resource storage module is used to provide a static resource service directory, which contains the build artifacts of mobile single-page applications (SPAs) and PC single-page applications (SPAs), including a mobile entry HTML file named the first entry file name, a PC entry HTML file named the second entry file name, and their respective static resource files.

[0027] The configuration management module is used to define and store device detection rules and entry file selection logic. The device detection rules include regular expressions used to match the preset mobile device identifier in the user agent field to determine whether the device type is a mobile device or a PC device. The entry file selection logic includes: a rule to point the entry file variable to the first entry file name or the second entry file name according to the determined device type; and a rule to override the entry file variable according to the value of the parameter when the URL of the HTTP request contains a specific mandatory parameter.

[0028] The device detection module is used to receive HTTP requests from clients, extract the user agent field from the request header, identify the access device type according to the device detection rules of the configuration management module, and determine the device as a mobile device when the user agent field contains a preset mobile device identifier; otherwise, it is determined as a PC device.

[0029] An entry file selection module is used to receive the URL parameters of the HTTP request and the device type output by the device detection module, and determine the current value of the entry file variable based on the entry file selection logic; wherein, when the URL contains a specific mandatory parameter, the entry file variable is determined first based on the value of the mandatory parameter; when the URL does not contain the specific mandatory parameter, the entry file variable is determined based on the device type;

[0030] The resource processing module is used to process static resource requests: based on the static resource service directory provided by the static resource storage module, when the request URI corresponds to an actual existing static resource file, the file is returned directly; when the request does not correspond to an actual file, the client is responded with the entry HTML file specified by the current value of the entry file variable finally determined by the entry file selection module.

[0031] As an improved solution, the URL parameter in the configuration management module is configured with a forced specification rule, which specifically includes: setting a specific parameter name, and when the URL of the HTTP request contains the parameter and its value is not empty, forcing the entry file variable to point to the first entry file name.

[0032] On the other hand, the present invention also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the steps of the multi-terminal SPA same URL distribution method based on a reverse proxy.

[0033] The beneficial effects of the technical solution of this invention are:

[0034] 1. The multi-terminal SPA same URL distribution method based on reverse proxy described in this invention achieves on-demand transparent distribution of mobile SPA and PC SPA under the same URL address by identifying the device type in the HTTP request header and dynamically selecting the entry HTML file in the request distribution module on the server side. This completely eliminates the additional network requests and page flickering problems in traditional client redirection schemes, significantly improving the first screen loading speed. At the same time, it does not require merging multi-terminal code libraries or refactoring existing front-end applications, resulting in low transformation costs and simple deployment. It effectively makes up for the shortcomings of existing technologies in terms of user experience, transformation costs, and truly achieving access to the same URL, and has high application value.

[0035] 2. The multi-terminal SPA same URL distribution system based on reverse proxy described in this invention can achieve the multi-terminal SPA same URL distribution method based on reverse proxy described in this invention through the cooperation of static resource storage module, configuration management module, device detection module, entry file selection module and resource processing module.

[0036] 3. The computer-readable storage medium of the present invention, when the computer program stored thereon is executed by the processor, can guide the various modules of the above system to work together, thereby realizing the multi-terminal SPA same URL distribution method based on reverse proxy of the present invention. The computer-readable storage medium of the present invention effectively improves the operability and portability of the multi-terminal SPA same URL distribution method based on reverse proxy. Attached Figure Description

[0037] To more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0038] Figure 1 This is a flowchart of the method of the present invention;

[0039] Figure 2 This is a schematic diagram of the Nginx reverse proxy configuration of the present invention;

[0040] Figure 3 This is a schematic diagram illustrating the PC browser access effect of the present invention;

[0041] Figure 4 This is a schematic diagram illustrating the mobile browser access effect of the present invention;

[0042] Figure 5 This is a schematic diagram illustrating the effect of the URL parameter of the present invention in forcibly specifying the device type;

[0043] Figure 6 This is a flowchart illustrating the overall architecture of the technical solution of this invention. Detailed Implementation

[0044] The preferred embodiments of the present invention will now be described in detail with reference to the accompanying drawings, so that the advantages and features of the present invention can be more easily understood by those skilled in the art, thereby providing a clearer and more explicit definition of the scope of protection of the present invention.

[0045] In the description of this invention, it should be noted that the embodiments described in this invention are only some embodiments of this invention, not all embodiments; based on the embodiments of this invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this invention.

[0046] The terms "first," "second," etc., used in this specification, claims, and accompanying drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, apparatus, product, or device that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or devices.

[0047] In the description of this invention, it should be noted that:

[0048] A URL stands for Uniform Resource Locator. In this invention, it refers to a complete webpage address, which typically includes the protocol, domain name, port, path, and query parameters, such as http: / / example.com / path / to / page?isMobile=1;

[0049] URI stands for Uniform Resource Identifier. In this invention, it specifically refers to the path portion of an HTTP request used to identify the requested resource, that is, the content after the domain name and before the query parameters in the request URL, such as / path / to / page in the example URL above.

[0050] HTML stands for HyperText Markup Language, a standard markup language used to build web pages. In this patent, it specifically refers to the entry page file of a SPA application.

[0051] The entry HTML file refers to the initial HTML page returned by the server in a SPA application, which is used to load subsequent static resources such as JS and CSS.

[0052] HTTP, or HyperText Transfer Protocol, is an application-layer protocol for data transmission between clients and servers in web applications. The HTTP request header contains fields such as User-Agent, which can be used to transmit client device information.

[0053] SPA stands for Single Page Application, which refers to a web application with content dynamically generated by client-side JavaScript in a front-end and back-end separation architecture.

[0054] Multi-platform SPA refers to two SPAs that are developed and built independently for mobile and PC platforms respectively.

[0055] PC refers to the browser environment that runs on desktop devices such as personal computers. Its typical characteristics include a large screen size and the presence of precise input devices such as keyboards and mice, which are different from mobile devices that are mainly touch-based.

[0056] Mobile devices refer to browser environments that run on portable devices such as smartphones and tablets. Their typical characteristics include smaller screen size, touch as the primary interaction method, and usually contain specific identifiers (such as Android, iPhone, iPad, etc.) in the User-Agent field of the HTTP request header.

[0057] A reverse proxy server is an intermediate server located between the client and the origin server. It can be used for request forwarding, load balancing, and request content rewriting. A typical implementation is Nginx.

[0058] In this invention, for ease of distinction, the request URL refers to the complete address entered by the client, while the request URI specifically refers to the path portion of that address used to locate server resources (excluding query parameters).

[0059] Furthermore, it should be noted that although the embodiments of the present invention are described using Nginx as a specific example of a reverse proxy server, the core idea of ​​the present invention is to utilize the server-side nodes in the network architecture to preprocess and intelligently distribute client requests, and is not limited to Nginx as a specific software.

[0060] Those skilled in the art will understand that any module or device deployed on the server side that can intercept and process HTTP requests and distribute content can serve as the subject of this invention. For example, common API gateways (such as Kong, Spring Cloud Gateway), CDN (Content Delivery Network) edge computing platforms (such as Cloudflare Workers, AWS Lambda@Edge, Alibaba Cloud EdgeRoutine), proxy components in service meshes (such as Envoy, Istio IngressGateway), and even self-developed application server middleware can all be regarded as the "server-side request distribution module" described in this invention, and their applications should all fall within the protection scope of this invention.

[0061] Example 1: This example provides a method for distributing multi-terminal SPAs with the same URL based on a reverse proxy. This method is used in a front-end / back-end separation architecture to automatically load the corresponding single-page application page for different access devices based on the same URL address. Figures 1-6 As shown, it includes:

[0062] S1. Deployment steps for building artifacts:

[0063] S11. Install and configure the server-side request distribution module on the server. In this embodiment, Nginx is used as the implementation platform.

[0064] S12. Build the mobile SPA and PC SPA independently, and generate their respective static resources and entry HTML files;

[0065] S13. Deploy the build artifacts of the two SPAs to the same static resource service directory, name the mobile entry HTML file index-mobile.html, and the PC entry HTML file index-pc.html;

[0066] S14. Optionally, in the build configuration, an output subdirectory (such as / mobile / ) can be set for static resources on the mobile end and an output subdirectory (such as / pc / ) can be set for static resources on the PC end to avoid naming conflicts of static resources.

[0067] S2, Server-side configuration steps:

[0068] S21. Edit the configuration file of the request distribution module on the server side. In this embodiment, it is the Nginx configuration file. Configure the device detection logic in the server block.

[0069] S22. Use the Nginx built-in variable $http_user_agent to retrieve the User-Agent field in the client request header;

[0070] S23. Use regular expressions to match whether the field contains a preset mobile device identifier, including but not limited to "android", "iphone", "ipad", etc.

[0071] S24. Using the set command, dynamically set the value of the variable index_file based on the matching result: if User-Agent matches the mobile device identifier, set $index_file to "index-mobile.html"; otherwise, set it to "index-pc.html".

[0072] S25. Add URL parameter forced specification logic: Detect whether the request URL contains a specific parameter (such as isMobile). If the parameter value is 1, force the index_file to be set to "index-mobile.html". If the parameter value is 0, force the index_file to be set to "index-pc.html" to meet debugging and special access requirements.

[0073] S3, Request dispatch processing steps:

[0074] S31. Configure request processing rules using the try_files directive: For each received HTTP request, the server's request distribution module first attempts to find the specific file in the static resource directory according to the request URI;

[0075] S32. If the corresponding file is found, the static resource (such as JS, CSS, or image) will be returned directly, and the entry HTML file will not be returned.

[0076] S33. If the corresponding file is not found, the entry HTML file specified by the $index_file variable is returned, i.e., mobile devices get index-mobile.html, and PC devices get index-pc.html;

[0077] S34. When the request URL contains mandatory device parameters, the corresponding entry file is returned according to the parameter indication, and is not affected by the User-Agent judgment result.

[0078] S4. Operation and Verification Steps:

[0079] S41. Save the configuration file of the request distribution module on the server side and reload the service to make the configuration take effect;

[0080] S42. When accessing the same URL using a PC browser, the server's request distribution module identifies the PC device, returns index-pc.html, and loads the PC-side SPA.

[0081] S43. When accessing the same URL using a mobile browser (or a PC simulating a mobile device), the server's request distribution module identifies the mobile device, returns index-mobile.html, and the page loads the mobile SPA.

[0082] S44. Accessing the URL with the forced parameter "?isMobile=1" will return index-mobile.html to the server's request distribution module, regardless of the current device type, verifying that the forced specification function is effective.

[0083] S45. Check static resource requests to ensure that the specific JS, CSS, and other file paths can be correctly parsed and returned, and that no errors occur due to the distribution logic.

[0084] S46. Verification in other implementation methods:

[0085] The core configuration logic described above (device detection, dynamic selection of entry files, and priority matching of static resources) can be migrated to other server-side request distribution modules, for example, by writing Cloudflare Workers scripts or defining route filters in Spring CloudGateway. Verification results show that as long as the User-Agent and URL parameters can be obtained on the server side, and request rewriting or response body replacement capabilities are available, the same invention effect can be achieved, enabling transparent distribution of multi-terminal SPAs under the same URL.

[0086] In this embodiment, device identification and entry file selection are completed on the server side. The client does not need to execute redirection or device detection scripts, and there are no additional network requests when loading the first screen, thus realizing true multi-terminal distribution of the same URL.

[0087] Example 2: This example provides a multi-terminal SPA same URL distribution system based on a reverse proxy, including:

[0088] The configuration management module is used to define and store device detection rules, including User-Agent regular expression matching patterns, URL parameter forced specification rules, and the mapping relationship between device type and entry HTML file;

[0089] The device detection module is used to receive HTTP requests from clients, extract the User-Agent field and URL parameters from the request header, and identify the type of accessing device based on the rules provided by the configuration management module.

[0090] The entry file selection module dynamically determines the target HTML entry file name (such as index-mobile.html or index-pc.html) based on the device type output by the device detection module and the mapping relationship.

[0091] The resource processing module handles static resource requests. When the requested URI corresponds to an actual file that exists on the server, it directly returns the resource file. When the request does not correspond to an actual file, the request is handed over to the entry file selection module, which responds to the client with the selected entry HTML file.

[0092] The various modules of this system work together and can be deployed in the request distribution module on the server side. A typical example of this module is a reverse proxy server. Through the combination of the try_files and set directives provided by this module, resource priority matching and dynamic selection of entry files are achieved, and transparent distribution of multiple SPAs under the same URL is completed.

[0093] It is understood that the aforementioned "Configuration Management Module," "Device Detection Module," "Entry File Selection Module," and "Resource Processing Module" are modules divided based on functional logic. In a specific physical deployment, these functional modules can be integrated within the same software instance (such as Nginx) or distributed across different service nodes to collaboratively complete the task. For example, the device detection function can be performed by an API gateway, while static resource processing can be performed by object storage or static site hosting services backing up the gateway. The specific implementation of these modules does not constitute a limitation on the scope of protection of this invention.

[0094] Example 3 provides a computer-readable storage medium storing computer program instructions. When executed by a processor, these instructions implement the multi-terminal SPA same URL distribution method based on reverse proxy as described in Example 1. This executable program can be embedded in the server-side request distribution module, enabling the server to perform operations such as User-Agent detection, dynamic entry file selection, and priority return of static resources for client requests, thereby achieving on-demand distribution of mobile SPAs and PC SPAs under the same URL.

[0095] The computer-readable storage medium can be a hard drive on a server where Nginx service is deployed, the operating environment of a CDN edge node, or a deployment package of a cloud function computing platform, etc., and is not limited here.

[0096] Unlike existing technologies, this invention does not require merging multiple codebases or modifying the front-end application. It completes device adaptation on the server side, ensuring access via the same URL and eliminating network latency and page flickering caused by client redirection. It has the advantages of low modification cost, good user experience, and strong compatibility.

[0097] It should be understood that in the various embodiments of this document, the sequence number of each process does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this document.

[0098] It should also be understood that, in the embodiments herein, the term "and / or" is merely a description of the relationship between associated objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. Additionally, the character " / " in this document generally indicates that the preceding and following associated objects have an "or" relationship.

[0099] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this document.

[0100] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0101] In the embodiments provided herein, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the couplings or direct couplings or communication connections shown or discussed may be indirect couplings or communication connections through some interfaces, devices, or units, or they may be electrical, mechanical, or other forms of connection.

[0102] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of the embodiments described herein, depending on actual needs.

[0103] Furthermore, the functional units in the various embodiments of this document can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0104] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this paper, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this paper. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0105] The above description is merely an embodiment of the present invention and does not limit the patent scope of the present invention. Any equivalent structural or procedural transformations made based on the content of the present invention's specification and drawings, or direct or indirect applications in other related technical fields, are similarly included within the patent protection scope of the present invention.

Claims

1. A method for distributing multi-terminal SPAs with the same URL based on a reverse proxy, characterized in that, Includes the following steps: Deployment steps: Build the mobile SPA and PC SPA separately, generating their respective static resources and entry HTML files; name the mobile entry HTML file the first entry file name, and the PC entry HTML file the second entry file name, and deploy the two entry HTML files and their respective static resources in the same static resource service directory; Server-side configuration steps: In the server-side request distribution module, configure device detection rules, entry file selection logic, and parameter enforcement rules; The device detection rules include: for each received HTTP request, obtaining the user agent field in its request header, and using regular expression matching to determine whether the user agent field contains a preset mobile device identifier; if so, it is determined to be a mobile device, otherwise it is determined to be a PC device. The entry file selection logic includes: setting an entry file variable according to the determination result; when it is a mobile device, the entry file variable points to the first entry file name; when it is a PC device, it points to the second entry file name. The parameter enforcement rule includes: when the URL of the HTTP request contains a specific enforcement parameter, the entry file variable is overridden according to the value of the enforcement parameter, wherein when the value of the enforcement parameter is not empty, the entry file variable is forcibly set to point to the first entry file name; Request Reception and Variable Determination Steps: The server-side request distribution module receives the HTTP request sent by the client, and performs device type judgment and parameter detection on the current request according to the device detection rules, entry file selection logic and parameter enforcement rules configured in the server-side configuration steps, and determines the current value of the entry file variable accordingly for use in subsequent steps; Request distribution processing steps: For the HTTP request, first search for the specific file corresponding to the request URI in the static resource service directory. If it exists, return the specific file directly; if it does not exist, return the entry HTML file specified by the current value of the entry file variable, thereby enabling the loading of corresponding SPA pages for different devices under the same URL.

2. The method for distributing multi-terminal SPAs with the same URL based on a reverse proxy according to claim 1, characterized in that: The preset mobile device identifiers include Android, iPhone, and iPad, and the regular expression matching is case-insensitive.

3. The method for distributing multi-terminal SPAs with the same URL based on a reverse proxy according to claim 1, characterized in that: The first entry file is named index-mobile.html, and the second entry file is named index-pc.html.

4. The method for distributing multi-terminal SPAs with the same URL based on a reverse proxy according to claim 1, characterized in that: The request distribution module of the server is deployed on an Nginx server. In the server configuration step, the operation of determining whether the user agent field contains a mobile device identifier by matching regular expressions is implemented using the if directive and regular expression matching, and the setting of the entry file variable is implemented using the set directive. In the request distribution processing step, the search for the specific file corresponding to the request URI, if it exists, directly returns the specific file; if it does not exist, the entry HTML file specified by the current value of the entry file variable is returned, which is implemented using the try_files directive.

5. The method for distributing multi-terminal SPAs with the same URL based on a reverse proxy according to claim 1, characterized in that: The specific forced parameter is isMobile; when the value of the isMobile parameter in the request URL is 1, the entry file variable is forced to point to the first entry file name; when the value of the isMobile parameter is 0, the entry file variable is forced to point to the second entry file name.

6. The method for distributing multi-terminal SPAs with the same URL based on a reverse proxy according to claim 1, characterized in that: The deployment step of the build artifacts also includes: in the build configuration, setting the output subdirectory / mobile / for static resources on the mobile terminal and setting the output subdirectory / pc / for static resources on the PC terminal, and setting the static resource reference path in the corresponding entry HTML file to the corresponding subdirectory to avoid resource conflicts.

7. The method for distributing multi-terminal SPAs with the same URL based on reverse proxy according to claim 1, characterized in that: In the server configuration step, the static resource service directory is configured as the root directory or alias directory of the server's request distribution module to ensure that static resource requests can be correctly parsed.

8. A multi-terminal SPA same URL distribution system based on reverse proxy, used to implement the multi-terminal SPA same URL distribution method based on reverse proxy as described in any one of claims 1 to 7, characterized in that, include: A static resource storage module is used to provide a static resource service directory, which contains the build artifacts of mobile single-page applications (SPAs) and PC single-page applications (SPAs), including a mobile entry HTML file named the first entry file name, a PC entry HTML file named the second entry file name, and their respective static resource files. The configuration management module is used to define and store device detection rules and entry file selection logic; the device detection rules include regular expressions used to match the preset mobile device identifier in the user agent field to determine the device type as a mobile device or a PC device; The entry file selection logic includes: a rule that points the entry file variable to the first entry file name or the second entry file name based on the determined device type; and a rule that overrides the entry file variable according to the value of the parameter when the URL of the HTTP request contains a specific mandatory parameter. The device detection module is used to receive HTTP requests from clients, extract the user agent field from the request header, identify the access device type according to the device detection rules of the configuration management module, and determine the device as a mobile device when the user agent field contains a preset mobile device identifier; otherwise, it is determined as a PC device. An entry file selection module is used to receive the URL parameters of the HTTP request and the device type output by the device detection module, and determine the current value of the entry file variable based on the entry file selection logic; wherein, when the URL contains a specific mandatory parameter, the entry file variable is determined first based on the value of the mandatory parameter; when the URL does not contain the specific mandatory parameter, the entry file variable is determined based on the device type; The resource processing module is used to process static resource requests: based on the static resource service directory provided by the static resource storage module, when the request URI corresponds to an actual existing static resource file, the file is returned directly; when the request does not correspond to an actual file, the client is responded with the entry HTML file specified by the current value of the entry file variable finally determined by the entry file selection module.

9. The multi-terminal SPA same URL distribution system based on reverse proxy according to claim 8, characterized in that, The URL parameter forced specification rule configured in the configuration management module specifically includes: setting a specific parameter name, and when the URL of the HTTP request contains the parameter and its value is not empty, forcing the entry file variable to point to the first entry file name.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the steps of the multi-terminal SPA same URL distribution method based on a reverse proxy as described in any one of claims 1 to 7.

Images