Preface

Recently, I was developing a project that used both Java’s Spring Boot and Python’s Flask. To ensure access under the same domain name, I used Nginx as a reverse proxy. It was relatively easy to configure when only one application was proxied, but with multiple applications, various interfaces started reporting errors. To prevent future pitfalls, I wrote this blog to document the most correct configuration.

The First Proxy

Main Application Interface

For applications developed with SpringBoot, pointing to the root directory of the domain name, proxy address http://127.0.0.1:9000。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
location /
{
    proxy_pass http://127.0.0.1:9000;;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    
    add_header X-Cache $upstream_cache_status;
    
    #Set Nginx Cache
    
    	add_header Cache-Control no-cache;
}

Static Files

If there is only one application, you can write it like this, it will only proxy files of the following formats.

1
2
3
4
5
6
7
8
9
location ~* \.(gif|png|jpg|css|js|woff|woff2)$
{
	proxy_pass http://127.0.0.1:9000;;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    expires 12h;
}

The Second Proxy

Backend Interface

This is an application developed with Flask, pointing to the /query directory, proxy address http://127.0.0.1:9099。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
location ^~ /query
{
    proxy_pass http://127.0.0.1:9099;;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    
    add_header X-Cache $upstream_cache_status;
    
    #Set Nginx Cache
    
    	add_header Cache-Control no-cache;
}

The preceding ^~ must be written, otherwise it can only point to the first level path of the proxy address, and the rest will not work at all.

Frontend Directory

There’s nothing much to say here, after setting the directory, it will automatically point to the index file.

1
2
3
4
location /app
{
    alias /www/your-path/app;
}

If you have to say there’s a pitfall, see Difference between alias and root.

Frontend Static Files

Although it has been referenced to the root directory before, the static directory has not been referenced. If accessed, it will directly point to the first proxy program, so we also need to reference it again.

1
2
3
4
location ^~ /app/static/
{
    alias /www/your-path/app/assets/;
}

The preceding ^~ must be written, otherwise accessing files will result in crazy 404s.

The Third Method

The first two methods work, but writing two feels a bit redundant. The frontend static files and static files are actually together, so we can merge them into one.

1
2
3
4
location ^~ /app/
{
    alias /www/your-path/app/;
}

Adding / after specifying the directory can directly guide to the entire folder.

Load Balancing

Load Address

If you’re afraid that a service will go down and want to have a more stable service, you can deploy the application on two servers simultaneously and use Nginx for load balancing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
upstream fzjh 
{
	server 127.0.0.1:5000 weight=2;
	server 127.0.0.1:5000 weight=1;
}
location /
{
    proxy_pass http://fzjh;;
    proxy_set_header Host zxwS;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    
    add_header X-Cache $upstream_cache_status;
    
    #Set Nginx Cache
    
    	add_header Cache-Control no-cache;
}

weight represents the weight, theoretically, the higher the weight, the greater the chance of being assigned to that server.

Static Files

Store a static resource on the Nginx server and use the following line of code to guide it.

1
2
3
4
location  ~* \.(gif|png|jpg|css|js|woff|woff2)$
{
    root /www/your-path/static;
}

Difference between alias and root

alias

1
2
3
4
location /static/
{
    alias /www/your-path/static/;
}

In this case, Nginx will automatically go to the /www/your-path/static/ directory to find files.

root

1
2
3
4
location /static/
{
    root /www/your-path/static/;
}

In this case, Nginx will automatically go to the /www/your-path/static/static/ directory to find files, meaning it adds an extra layer.