Nginx reverse proxy for wechat development perfect online testing environment

Written time: 2018-11-29 11:18:10

Environment Description Ubuntu 16.04 LTS Nginx Version: Nginx /1.10.3 (Ubuntu) PHP 7.1.18 Laravel 5.5

specifications

Wechat development projects need to debug wechat interface. Local development can use wechat developer tools and wechat test public account to simulate the running environment and interface. However, some interfaces of wechat merchant numbers, such as wechat Payment, need to be developed by sandbox simulation, which is not convenient enough. Therefore, we want to build an online testing environment that can be used for wechat development projects, and the interface that can be accessed to the real wechat public account is convenient for online testing.

Train of thought

The most straightforward idea to build an online test environment is to buy an additional server that has exactly the same hardware parameters and environment configuration as the production server. Docking wechat platform, but also need to register an additional wechat public account opened wechat authentication. This can solve the problem, but it adds extra cost and extra maintenance of servers, wechat accounts and so on, which is not the best solution for our start-up technology team.

Is there a lower cost and easier system maintenance iteration solution? After some torturing, we find out the following scheme, share out welcome exchange.

Solution sharing

The key to the problem is how to solve the problem of wechat access

Friends who have done wechat development know that to access wechat, you need to fill in a binding server record domain name in the background of wechat public number

www.project.com/login points to the production environment dev.project.com/login points to the online test environment So the wechat public account can only be connected to one domain name.

We use the Nginx reverse proxy function to solve this problem, that is, when a request to visit the domain name www.project.com, the Nginx server through the path rules matching, realize the request to redirect to a different project directory. Such as:

At production environment www.project.com/dev/login at www.project.com/login online test environment

We configure the Nginx server to match requests to /dev/and then forward the requests to the project in the test environment

The following is the code implementation of the Nginx configuration

Agent management configuration file/etc/nginx/sites – the available/project. Proxy. Conf

server {
    listen 80;
    
    server_name 127.0.0.1 www.project.com;

    index index.html index.php;

    charset utf-8;
    access_log /var/log/nginx/project.proxy.access.log;
    error_log /var/log/nginx/project.proxy.error.log;

    # Production environmentLocation / {proxy_pass http://127.0.0.1:9001; proxy_set_header Host$host:$server_port;
    }

    # Online test environmentLocation ^~ /dev/ {proxy_pass http://127.0.0.1:9002; proxy_set_header Host$host:$server_port; }}Copy the code

In addition to configuring the Nginx server, you also need to set up the configuration environment for your project. In Laravel, the variable PREFIX is added to the.env configuration environment

PREFIX=/dev  // Add/to solve the problem of static resource processing
Copy the code

And then modify the app/will/RouterServiceProvider mapWebRouters in the PHP file () :

protected function mapWebRoutes() {// Get the prefix from the configuration file$prefix = env("PREFIX") = = ="" ? "" : explode('/',env("PREFIX"[1])); Route::prefix($prefix) // Add a uniform prefix to the route ->middleware('web')
             ->namespace($this->namespace)
             ->group(base_path('routes/web.php'));
    }
Copy the code

In the production environment and online test environment, set PREFIX to “/dev” in the. Env file.

When I got here, I thought I had everything. A visit found the static file 404. After checking, we found that the problem is the static file reference path, for example:

<script src="/dev/test/test.js"></script>
Copy the code

When the actual page is visited, the resource request path will be spliced with the domain name, which will eventually become:

www.project.com/dev/test/te…

Laravel’s static resources are all placed in the public directory. Because of the uniform route prefix, the URL above does not point to the resource directory where the public directory is located, but is treated as a routing request.

My final solution was to modify the Nginx configuration, check the URI path of the request, match requests ending in.js or.css, and remove the /dev/ string from the URL.

The modified/etc/nginx/sites – the available/project. The proxy, the conf configuration code is as follows:

server {
    listen 80;
    
    server_name 127.0.0.1 www.project.com;

    index index.html index.php;

    charset utf-8;
    access_log /var/log/nginx/project.proxy.access.log;
    error_log /var/log/nginx/project.proxy.error.log;

    # Production environmentLocation / {proxy_pass http://127.0.0.1:9001; proxy_set_header Host$host:$server_port;
    }

    # Online test environmentLocation ^~ /dev/ {proxy_pass http://127.0.0.1:9002;# static resource filtering /dev/
        if ($request_uri~ *. (? :js|css)$) { rewrite /dev/(.+)$ /The $1 break;
        }
        proxy_set_header Host $host:$server_port; }}Copy the code

Now when visiting

www.project.com/dev/test/te…

After the request is forwarded, it will be processed as

www.project.com/test/test.j…

Therefore, the public resource directory in the Laravel project can be accessed normally

Record the pit

I stepped on a lot of holes in the process:

1. Nginx server proxy configuration

proxy_set_header Host $host:$server_port;
Copy the code

This line of code is necessary, otherwise the first visit www.project.com/dev/login can go to the correct directory, but subsequent project all requests will be set to http://127.0.0.1:9002 in the beginning…

2. Static resource reference paths in the project are also changed, such as:

<script src="/dev/test/test.js"></script>
Copy the code

Here is the compiled runtime code, which should look like this (Laravel framework blade template syntax) :

<script src="{{ env('PREFIX') }}/test/test.js"></script>
Copy the code

3. Static resources also have a downside. If resources are referenced asynchronously, that’s cool. This situation appears in the reference tool library, in addition, the reference picture and other static resources will be more troublesome…

Problem to be optimized

The hidden dangers of static resource references necessitated a better solution. The current optimization solution is as follows:

1. Static resources are referenced in CDN mode to avoid path problems.
2. The style icon adopts font-icon mode to avoid the path problem of icon elements.

conclusion

This paper mainly shares the way of constructing the online test environment of wechat project by a single server (the same public account), mainly including the following points:

1. Request distribution is realized through Nginx reverse proxy mechanism
2. Through the configuration of the project environment, the unified route prefix can be added to the project
3. Project static resource path problems caused by the pit, this treatment method and optimization ideas

References:

Proxy_pass for nginx configuration! Proxy_pass Indicates whether to add/to the URL in reverse proxy configuration. Laravel Obtains the current URL and the current base domain name