Front-end debugging method and device based on reverse proxy and storage medium

Abstract

The invention discloses a front-end debugging method and device based on reverse proxy and a storage medium, and the method comprises the following steps: reversely proxy a preset lightweight server to a preset proxy port of a preset local server to form a proxy server; sending an HTTP request to the preset proxy port through a front end to be debugged, and respectively obtaining a static file and a CGI file from the preset local server and the proxy server through the HTTP request; wherein the HTTP request comprises a static file request message and a CGI file request message; and sending the static file and the CGI file to the front end to be debugged, so that the front end to be debugged completes front end debugging according to the static file and the CGI file. According to the invention, the debugging efficiency of the front-end webpage can be improved.

Description

Technical Field

[0001] The present invention relates to the field of web page front-end debugging, and in particular to a front-end debugging method, device and storage medium based on reverse proxy. Background Art

[0002] In the past, in the JQuery Web native development and testing process, for some objects that are not easy to construct or obtain, a virtual mock object is usually used to create a test method for testing, such as a front-end debugging method that simulates real requests disclosed in patent CN115292156A. However, when this method encounters internal problems such as gateways and servers, this method cannot restore the real environment.

[0003] In response to this phenomenon, the existing mainstream Web development has proposed a mechanism that uses a proxy server as a middleware to simulate the backend environment and perform front-end and back-end joint debugging. However, although this mechanism can improve browsing speed and efficiency and improve performance through a cache mechanism, the framework itself is too large and consumes too much memory, making it unsuitable for deployment on lightweight servers. Therefore, this method is not feasible in front-end debugging of JQuery Web native development. Summary of the invention

[0004] In order to overcome the defects of the above-mentioned prior art, the present invention provides a front-end debugging method, device and storage medium based on reverse proxy, which can complete the front-end debugging without changing the original server volume, thereby improving the efficiency of front-end debugging.

[0005] An embodiment of the present invention provides a front-end debugging method based on a reverse proxy, comprising the following steps:

[0006] Reverse proxy the preset lightweight server to the preset proxy port of the preset local server to form a proxy server;

[0007] Sending an HTTP request to the preset proxy port through the front end to be debugged, and obtaining static files and CGI files from the preset local server and the proxy server respectively through the HTTP request; wherein the HTTP request includes a static file request message and a CGI file request message;

[0008] The static file and the CGI file are sent to the front end to be debugged, so that the front end to be debugged completes the front end debugging according to the static file and the CGI file.

[0009] Further, the reverse proxying of the preset lightweight server to the preset proxy port of the preset local server to form a proxy server specifically includes:

[0010] Build the Nginx environment on the preset local server and complete the cross-domain configuration;

[0011] By presetting the Nginx reverse proxy server, the preset lightweight server is reversely proxied to the port of the preset local server to obtain the proxy server.

[0012] Furthermore, sending an HTTP request to the preset proxy port through the front end to be debugged specifically includes:

[0013] The HTTP request is sent to the preset Nginx reverse proxy server through the front end to be debugged, and then the HTTP request is sent to the preset proxy port through the preset Nginx reverse proxy server.

[0014] Preferably, before sending the HTTP request, the method further includes: establishing a TCP connection with the preset local server.

[0015] Further, the obtaining of static files and CGI files from the preset local server and the proxy server respectively through the HTTP request specifically includes:

[0016] By sending the static file request message to the preset local server, so that the preset local server parses and responds to the HTTP request, the static file is obtained;

[0017] The CGI file is obtained by sending the CGI file request message to the proxy server so that the proxy server executes a preset CGI program.

[0018] Preferably, the static files include HTML files, CSS files and JS files, and the CGI files include XML files.

[0019] Another embodiment of the present invention provides a front-end debugging device based on a reverse proxy, comprising: a proxy module, an acquisition module and an output module;

[0020] The proxy module is used to reverse proxy the preset lightweight server to the preset proxy port of the preset local server to form a proxy server;

[0021] The acquisition module is used to send an HTTP request to the preset proxy port through the front end to be debugged, and obtain static files and CGI files from the preset local server and the proxy server respectively through the HTTP request; wherein the HTTP request includes a static file request message and a CGI file request message;

[0022] The output module is used to send the static file and the CGI file to the front end to be debugged, so that the front end to be debugged completes the front end debugging according to the static file and the CGI file.

[0023] Further, the proxy module is used to reverse proxy the preset lightweight server to the preset proxy port of the preset local server to form a proxy server, which specifically includes:

[0024] Build the Nginx environment on the preset local server and complete the cross-domain configuration;

[0025] By presetting the Nginx reverse proxy server, the preset lightweight server is reversely proxied to the port of the preset local server to obtain the proxy server.

[0026] Furthermore, sending an HTTP request to the preset proxy port through the front end to be debugged specifically includes:

[0027] The HTTP request is sent to the preset Nginx reverse proxy server through the front end to be debugged, and then the HTTP request is sent to the preset proxy port through the preset Nginx reverse proxy server.

[0028] Another embodiment of the present invention provides a computer storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the reverse proxy-based front-end debugging method as described in any one of the above embodiments are implemented.

[0029] Compared with the prior art, the beneficial effects of the present invention are:

[0030] By reverse proxying a lightweight server with a smaller memory size to a local server with a larger memory size, so that the local server can obtain the resources of the lightweight server, the problem of excessive memory consumption due to large Web file size under a lightweight server is solved, thereby improving the debugging efficiency of the front-end of the web page and reducing the development cycle of the front-end web page. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] Figure 1 A flowchart of a front-end debugging method based on a reverse proxy is provided in accordance with an embodiment of the present invention.

[0032] Figure 2 The present invention provides a flow chart of a preferred embodiment of a front-end debugging method based on a reverse proxy according to an embodiment of the present invention.

[0033] Figure 3 A schematic diagram of a communication connection between a client and a server provided in one embodiment of the present invention.

[0034] Figure 4 A schematic diagram of a flow chart of a CGI program executed in a lightweight server according to an embodiment of the present invention.

[0035] Figure 5 A schematic structural diagram of a front-end debugging device based on a reverse proxy is provided in another embodiment of the present invention. DETAILED DESCRIPTION

[0036] The drawings are for illustrative purposes only and should not be construed as limiting the present patent;

[0037] It is understandable to those skilled in the art that some well-known structures and their descriptions may be omitted in the drawings.

[0038] The technical solution of the present invention is further described below in conjunction with the accompanying drawings and embodiments.

[0039] Reference Figure 1 , is a flow chart of a front-end debugging method based on a reverse proxy provided by an embodiment of the present invention, comprising the following steps:

[0040] S1: Reverse proxy the preset lightweight server to the preset proxy port of the preset local server to form a proxy server;

[0041] S2: Sending an HTTP request to the preset proxy port through the front end to be debugged, and obtaining static files and CGI files from the preset local server and the proxy server respectively through the HTTP request; wherein the HTTP request includes a static file request message and a CGI file request message;

[0042] S3: Sending the static file and the CGI file to the front-end to be debugged, so that the front-end to be debugged completes front-end debugging according to the static file and the CGI file.

[0043] For step S1, specifically, the reverse proxying of the preset lightweight server to the preset proxy port of the preset local server to form a proxy server specifically includes:

[0044] Build the Nginx environment on the preset local server and complete the cross-domain configuration;

[0045] By presetting the Nginx reverse proxy server, the preset lightweight server is reversely proxied to the port of the preset local server to obtain the proxy server.

[0046] In a preferred embodiment, referring to Figure 2 , which is a flow chart of a preferred embodiment of a front-end debugging method based on a reverse proxy provided by an embodiment of the present invention. Figure 2 It can be seen that after setting up the Nginx environment on the local server and making cross-domain configuration, the Lighttpd server (192.168.0.1) can be reverse-proxyed to the specified port (127.0.0.1:8888) on the local server (127.0.0.1) to form a proxy server.

[0047] After the reverse proxy is completed, Nginx can be used as a reverse proxy server to receive messages from the client (i.e. Figure 2 The browser in the server receives the request and forwards the request to one of the real servers in the back-end cluster, that is, the proxy server.

[0048] For step S2, specifically, sending an HTTP request to the preset proxy port through the front end to be debugged specifically includes:

[0049] The HTTP request is sent to the preset Nginx reverse proxy server through the front end to be debugged, and then the HTTP request is sent to the preset proxy port through the preset Nginx reverse proxy server.

[0050] Preferably, before sending the HTTP request, the method further includes: establishing a TCP connection with the preset local server.

[0051] In a preferred embodiment, referring to Figure 3 , is a schematic diagram of a communication connection between a client and a server provided by an embodiment of the present invention. Figure 3 It can be seen that the HTTP request is initiated by the client (i.e. the front end to be debugged, usually a browser) to request a specific resource, and then the server responds to the request and sends the resource back to the client. This process usually includes the following steps:

[0052] Establish a connection: The client establishes a connection with the server through the TCP / IP protocol, which is the basis of HTTP.

[0053] Send a request: The client sends an HTTP request to the server, which contains the request method (such as GET or POST) and the URL of the resource to be accessed.

[0054] Processing the request: Once the server receives the request, it parses the request, looks up the requested resource, and prepares a response to send back to the client.

[0055] Send response: The server sends a response back to the client, which usually includes a status code, response header, and response body.

[0056] Closing the connection: The connection is usually closed after a request and response, but HTTP / 1.1 introduced persistent connections to improve performance.

[0057] Therefore, in this preferred embodiment, the front end to be debugged initiates an HTTP request message and sends the request message to the preset Nginx reverse proxy server, which is then forwarded by the preset Nginx reverse proxy server to the preset proxy port 127.0.0.1:8888 of the local server.

[0058] For step S2, further, obtaining the static file and the CGI file from the preset local server and the proxy server respectively through the HTTP request specifically includes:

[0059] By sending the static file request message to the preset local server, so that the preset local server parses and responds to the HTTP request, the static file is obtained;

[0060] The CGI file is obtained by sending the CGI file request message to the proxy server so that the proxy server executes a preset CGI program.

[0061] Preferably, the static files include HTML files, CSS files and JS files, and the CGI files include XML files.

[0062] In a preferred embodiment, in order to realize front-end and back-end joint debugging to improve debugging efficiency, it is necessary to obtain the static files of the local server and the CGI files of the preset lightweight server. Since the lightweight server has been reverse proxied to the preset proxy port of the local server in the aforementioned steps, the CGI files also need to be obtained from the proxy server.

[0063] Therefore, the HTTP request output by the front end to be debugged is divided into two parts, one part is the static file request message for requesting static files, and the other part is the CGI file request message for requesting CGI files.

[0064] The static file request message is input to the preset local server 127.0.0.1:6235, and then the preset local server outputs the static files required by the front end to be debugged according to the request message, and the static files include HTML, CSS, JS and other files.

[0065] At the same time, the CGI file request message is input into the preset proxy port 127.0.0.1:8888 of the local server, that is, the proxy server, via the reverse proxy server, so that the proxy server executes the preset CGI program, generates and outputs the CGI file, and the CGI file contains the XML file.

[0066] Reference Figure 4 , a CGI program provided by an embodiment of the present invention is used on a lightweight server (i.e. Figure 4 Schematic diagram of the process executed in the Lighttpd server in . Figure 4 It can be seen that after receiving the HTTP request, the Lighttpd server starts to execute the preset CGI program, and finally generates a CGI file and returns it to the browser, that is, the front end to be debugged in this preferred embodiment.

[0067] In this preferred embodiment, since the lightweight server has formed a proxy server through a reverse proxy, the execution steps of the CGI program are executed by the proxy server, and the overall process principle does not change.

[0068] At this point, the front end to be debugged has obtained the static files and CGI files required for debugging, and debugging can be completed based on these two files. Compared with the prior art, this application solves the problem of excessive memory consumption due to large Web file size under a lightweight server by reverse proxying a lightweight server with a smaller memory volume to a local server with a larger memory volume, so that the local server obtains the resources of the lightweight server, thereby improving the debugging efficiency of the web page front end and reducing the development cycle of the front-end web page.

[0069] Reference Figure 5 , is a structural diagram of a front-end debugging device based on a reverse proxy provided by another embodiment of the present invention, comprising: a proxy module 101, an acquisition module 102 and an output module 103;

[0070] The proxy module 101 is used to reverse proxy the preset lightweight server to the preset proxy port of the preset local server to form a proxy server;

[0071] The acquisition module 102 is used to send an HTTP request to the preset proxy port through the front end to be debugged, and obtain static files and CGI files from the preset local server and the proxy server respectively through the HTTP request; wherein the HTTP request includes a static file request message and a CGI file request message;

[0072] The output module 103 is used to send the static file and the CGI file to the front end to be debugged, so that the front end to be debugged completes the front end debugging according to the static file and the CGI file.

[0073] Furthermore, the proxy module 101 is used to reverse proxy the preset lightweight server to the preset proxy port of the preset local server to form a proxy server, which specifically includes:

[0074] Build the Nginx environment on the preset local server and complete the cross-domain configuration;

[0075] By presetting the Nginx reverse proxy server, the preset lightweight server is reversely proxied to the port of the preset local server to obtain the proxy server.

[0076] Furthermore, sending an HTTP request to the preset proxy port through the front end to be debugged specifically includes:

[0077] The HTTP request is sent to the preset Nginx reverse proxy server through the front end to be debugged, and then the HTTP request is sent to the preset proxy port through the preset Nginx reverse proxy server.

[0078] Another embodiment of the present invention further provides a computer storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the reverse proxy-based front-end debugging method as described in any one of the above embodiments are implemented.

[0079] Obviously, the above embodiments of the present invention are merely examples for clearly illustrating the present invention, and are not intended to limit the embodiments of the present invention. For those skilled in the art, other different forms of changes or modifications can be made based on the above description. It is not necessary and impossible to list all the embodiments here. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the protection scope of the claims of the present invention.

Claims

1. A front-end debugging method based on reverse proxy, characterized in that: The steps include: Reverse proxy the preset lightweight server to the preset proxy port of the preset local server to form a proxy server; Sending an HTTP request to the preset proxy port through the front end to be debugged, and obtaining static files and CGI files from the preset local server and the proxy server respectively through the HTTP request; wherein the HTTP request includes a static file request message and a CGI file request message; The static file and the CGI file are sent to the front end to be debugged, so that the front end to be debugged completes the front end debugging according to the static file and the CGI file.

2. The front-end debugging method based on reverse proxy according to claim 1, characterized in that: The reverse proxying of the preset lightweight server to the preset proxy port of the preset local server to form a proxy server specifically includes: Build the Nginx environment on the preset local server and complete the cross-domain configuration; By presetting the Nginx reverse proxy server, the preset lightweight server is reversely proxied to the port of the preset local server to obtain the proxy server.

3. The front-end debugging method based on reverse proxy according to claim 1, characterized in that: The sending of the HTTP request to the preset proxy port through the front end to be debugged specifically includes: The HTTP request is sent to the preset Nginx reverse proxy server through the front end to be debugged, and then the HTTP request is sent to the preset proxy port through the preset Nginx reverse proxy server.

4. The front-end debugging method based on reverse proxy according to claim 3, characterized in that: Before sending the HTTP request, the method further includes: establishing a TCP connection with the preset local server.

5. The front-end debugging method based on reverse proxy according to claim 1, characterized in that: The obtaining of the static file and the CGI file from the preset local server and the proxy server respectively through the HTTP request specifically includes: By sending the static file request message to the preset local server, so that the preset local server parses and responds to the HTTP request, the static file is obtained; The CGI file is obtained by sending the CGI file request message to the proxy server so that the proxy server executes a preset CGI program.

6. The front-end debugging method based on reverse proxy according to claim 5, characterized in that: The static files include HTML files, CSS files and JS files, and the CGI files include XML files.

7. A front-end debugging device based on reverse proxy, characterized in that: include: Proxy module, acquisition module and output module; The proxy module is used to reverse proxy the preset lightweight server to the preset proxy port of the preset local server to form a proxy server; The acquisition module is used to send an HTTP request to the preset proxy port through the front end to be debugged, and obtain static files and CGI files from the preset local server and the proxy server respectively through the HTTP request; wherein the HTTP request includes a static file request message and a CGI file request message; The output module is used to send the static file and the CGI file to the front end to be debugged, so that the front end to be debugged completes the front end debugging according to the static file and the CGI file.

8. The front-end debugging device based on reverse proxy according to claim 7, characterized in that: The proxy module is used to reverse proxy the preset lightweight server to the preset proxy port of the preset local server to form a proxy server, which specifically includes: Build the Nginx environment on the preset local server and complete the cross-domain configuration; By presetting the Nginx reverse proxy server, the preset lightweight server is reversely proxied to the port of the preset local server to obtain the proxy server.

9. The front-end debugging device based on reverse proxy according to claim 8, characterized in that: The sending of the HTTP request to the preset proxy port through the front end to be debugged specifically includes: The HTTP request is sent to the preset Nginx reverse proxy server through the front end to be debugged, and then the HTTP request is sent to the preset proxy port through the preset Nginx reverse proxy server.

10. A computer storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the reverse proxy-based front-end debugging method according to any one of claims 1 to 6 are implemented.

Images