[nginx] Front and back end proxy configuration

File directory

test
│
├ ─ test0
│      index.html
├ ─ test1
│      index.html
└ ─ test2
    │  index.html
    ├ ─ test2-1
    │      index.html
    └ ─ test2-2
            index.html
Copy the code

Agent for the front-end

Eg1 and EG2 represent the same file and do not use the URL

• localhost:8080/
• localhost:8080/test0

server {
	listen 8080;
	server_name  localhost;

  # eg1
	location / {
		root   /root/test/test0;
		index  index.html index.htm;
	}

  # eg2
	location /test0 {
		root   /root/test;
		index  index.html index.htm;
	}
	
  # eg3
	location /test1 {
		alias  /root/test/test1/;
		indexindex.html index.htm; }}Copy the code

A careful reader will notice that there is a third proxy, EG3, which is different in line 19, the proxy that begins with alias. Test1 is the same as test0. Eg1 is the same as eg3.

Root: root + location is the actual file path alias: alias is the actual file path (ps: must end with /, because the proxy things in this directory)

Proxy multiple front ends

404 problems tend to occur when you proxy multiple static files. If you don’t have a problem configuring a single location /, then you need to refer to the following configuration. Ps: Generally, the root path is root, and other paths are alias proxies.

server {
	listen 8080;
	server_name  localhost;

	location / {
		root  /root/test/test0;
		index  index.html index.htm;
	}

	location /test1 {
		alias  /root/test/test1/;
		index  index.html index.htm;
	}
	
	location /test2 {
		alias  /root/test/test2/;
		index  index.html index.htm;
	}

	location /test2-1 {
		alias  /root/test/test2/test2-1/;
		index  index.html index.htm;
	}

	location /test2-2 {
		alias  /root/test/test2/test2-2/;
		indexindex.html index.htm; }}Copy the code

Proxy front end and back end

For ^~ see/API/at the end of line 12 of FAQ; For the/questions before the semicolon, see the FAQ

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html; # fix page refresh 404
}

location^ ~ /api {  # ^~/ API/matches requests prefixed with API
  	# Cross-domain problems
  	add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    proxy_pass  http://www.test.com:5000/api/;  Proxy_pass will concatenate the path after/API /* directly on request
}
Copy the code

Proxy HTTPS request & forward

Because the callback of wechat public account can only call HTTPS, sometimes it may be used. Here you need to learn about HTTPS for yourself. In short, you need a certificate. For a url, here is an example of a proxy

server {
    listen      443  ssl;
    server_name  xxx.somliy.top; # the HTTPS url

  	# Request HTTPS certificate will be given to these two files
    ssl on;
    ssl_certificate      /etc/nginx/test/xxx.somliy.top_bundle.crt;
    ssl_certificate_key  /etc/nginx/test/xxx.somliy.top.key;

    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;

    ssl_ciphersECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:! NULL:! aNULL:! MD5:! ADH:! RC4;ssl_prefer_server_ciphers  on;
    ssl_protocols   TLSv1 TLSv1.1 TLSv1.2;


    location / {
        proxy_http_version 1.1; The HTTP protocol used by the proxy
        proxy_set_header Host $host; #header Adds request host information
        proxy_set_header X-Real-IP $remote_addr; # header Adds information about the source OF the request
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; Add proxy records
        proxy_pass http://x.x.x.x:8080; The real address of the proxy}}Copy the code

FAQ

The 404 problem was updated after the front-end deployment

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html; # fix page refresh 404
}
Copy the code

In the proxy configuration, at the end of the URL for location/Need not to need

Simple test, if only the front-end proxy, there is no impact, whether root or alias that difference is, when the proxy content is the address, test.com/dir

• test.com/dir stands for file dir
• test.com/dir/ indicates directory dir

The/at the end of the URL indicates a directory. If no/is displayed, it indicates a file

The proxy flag is not recognized when the proxy goes to the back end

Using ^~ as a prefix, the re matches and then proxies

location^ ~ /api/ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    proxy_pass http://localhost:82/;
}
Copy the code