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

以你之姓@ 2024-04-06 09:20 98阅读 0赞

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

*  一、三种情况下的不同部署
 *   *  1、单个Nginx部署单个项目（大多数情况）
     *  2、单个Nginx调用多个后端接口服务地址
     *  3、单个Nginx 如何实现部署多个不同的项目
     *  4、nginx.conf内容过多，可以使用外挂的方式来引用外部文件，标签为：include，演示如下：

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

### 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 {
        
    	}
    }

### 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 {
        
    	}
    }

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

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

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/;
    		}		
    	}

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

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

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;
    }

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

-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#