前后端分离项目中nginx部署的相关配置

一、三种情况下的不同部署

1、单个Nginx部署单个项目（大多数情况）

server {
	listen       80 default_server;
	listen       [::]:80 default_server;
	server_name  _;

        location / {
            root   /opt/srvhub/dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        location /srvhub/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:9999/srvhub/;
        }

        # To allow POST on static pages 允许静态页使用POST方法
        error_page  405 =200 $uri;

	error_page 404 /404.html;
	    location = /40x.html {
	}

	error_page 500 502 503 504 /50x.html;
	    location = /50x.html {
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2、单个Nginx调用多个后端接口服务地址

server {
	listen       8000 default_server;
	listen       [::]:8000 default_server;
	server_name  _;

        location / {
            root   /opt/srvhub/dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

	location /magic/web/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:9999/magic/workspace/;
        }

        location /srvhub/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:9999/srvhub/;
        }

        # To allow POST on static pages 允许静态页使用POST方法
        error_page  405 =200 $uri;

	error_page 404 /404.html;
	    location = /40x.html {
	}

	error_page 500 502 503 504 /50x.html;
	    location = /50x.html {
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

3、单个Nginx 如何实现部署多个不同的项目

标重点：
root 对应的文件目录不一样
server的监听端口配置为不一样
1
2
3

server {
        listen       8000;
        server_name  localhost;
        location / {
            root   /opt/srvhub/html;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		location /prod-api{
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8880/;
		}
    }
	
	server {
		listen       9000;
        server_name  localhost;
        location / {
            root   /opt/srvhub/dist;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		location /prod-api{
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8880/;
		}		
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

4、nginx.conf内容过多，可以使用外挂的方式来引用外部文件，标签为：include，演示如下：

主文件配置，大部分内容已省略
1

http {
    server {
        listen       80;
        server_name  localhost;
        client_max_body_size 10M;

	location / {
            root   /opt/hidata/hidbm-vue/ui;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        
	location /jsrccb {
            alias   /opt/hidata/hidbm-vue/login;
            index  index.html;
        }	

	location /stage-api/{
	    proxy_set_header Host $http_host;
	    proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header REMOTE-HOST $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	    proxy_pass http://localhost:8080/;
	}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    include /etc/nginx/conf.d/*.conf;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

通过include 标签，来引用外挂文件
1

-bash-4.1# pwd
/etc/nginx/conf.d
-bash-4.1# ls
amis.conf  mysql-repo.conf  srvhub.conf
-bash-4.1# cat amis.conf 
server {
	listen       9090 default_server;
	listen       [::]:9090 default_server;
	server_name  _;

        location / {
            root   /opt/hidata/amis/ui;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

	error_page 404 /404.html;
	    location = /40x.html {
	}

	error_page 500 502 503 504 /50x.html;
	    location = /50x.html {
	}
}

-bash-4.1# 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27