Nginx配置同域名下多个Vue项目

Nginx配置同域名下多个Vue项目

开始捣鼓nginx配置，我采用的是分文件的方式捣鼓的:

首先nginx.conf文件中include所有的配置进来：

http {
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
    ssl_prefer_server_ciphers on;
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;
    gzip on;
    gzip_disable "msie6";
    
  
    include /etc/nginx/conf.d/*.conf; #这一句将conf.d目录下的所有conf配置文件引入
}

然后在conf.d目录下创建每个项目对应的nginx配置文件

1、通过多端口实现

这个其实很简单，通个域名不同端口进入不同项目，只需要nginx监听对应的端口然后指定对应的目录就好，代码如下

对于项目一我们希望通过默认域名进入，即绑定80端口:

####项目一nginx配置文件    

server {

        #访问端口(页面访问端口)
        listen 80;
        server_name xxx;

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

        location / {
            # 前端工程根目录
            root /x/x/x/x/dist;
            index index.html;
        }
        
        location /** {
            # 前端工程根目录
            root /x/x/x/x/dist;
            index index.html;
        }

        #没有跨域需求可以不配
        #代理路径 地址是以spi开头的 ‘/api开头的都走这个代理’
        # 将前端访问的后台端口变更为‘前台id:前台端口/api/xxx/xxx’
        
        location /api {

            #正则表达式匹配路径

            rewrite  ^/api/(.*)$ /$1 break;

            include  uwsgi_params;

            #后端端口(后端最终访问的端口)

            proxy_pass   http://x.x.x.x:8081 ;

        }
        location @router {
        rewrite ^.*$ /index.html last;
        }
    }

项目二，希望通过8081进入，即域名.com:8081这样的方式访问，代码如下

server {

        #访问端口(页面访问端口)
        listen 8081;
        server_name localhost;

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

        location / {
            # 前端工程根目录
            root /x/x/x/x/dist;
            index index.html;
        }
        
        location /** {
            # 前端工程根目录
            root /x/x/x/x/dist;
            index index.html;
        }

        #没有跨域需求可以不配
        #代理路径 地址是以spi开头的 ‘/api开头的都走这个代理’
        # 将前端访问的后台端口变更为‘前台id:前台端口/api/xxx/xxx’
        location /api {

            #正则表达式匹配路径

            rewrite  ^/api/(.*)$ /$1 break;

            include  uwsgi_params;

            #后端端口(后端最终访问的端口)

            proxy_pass   http://x.x.x.x:8081 ;

        }
        location @router {
        rewrite ^.*$ /index.html last;
        }
    }

二、同端口同域名不同目录方式访问不同项目
因为公众号的授权回调是验证域名的，端口号不起作用，所以现在一个校园商城有三个vue项目，分别是:公众号前台、后台管理系统网页端、配送员配送系统。

首先对于一个域名默认路径访问的是公众号前台项目，通过二级目录定位到配送系统，我们如下配置，:

server {

        #访问端口(页面访问端口)
        listen 80;
        server_name senfancollege.com;
        #root /usr/local/www/;
        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
            root html;
        }
    ##项目一，同过域名直接访问
        location / {
            #前端工程根目录
            alias /x/x/x/x/dist/;
            index index.html;
        }
    ##项目二，同过域名.com/YYY访问
        location /YYY {
            # 前端工程根目录
            alias  /x/x/x/x/dist/;
            try_files $uri $uri/ @router;
            index index.html;
        }
        # 没有跨域需求可以不配
        #代理路径 地址是以spi开头的 ‘/api开头的都走这个代理’
        # 将前端访问的后台端口变更为‘前台id:前台端口/api/xxx/xxx’
        location /api {

            #正则表达式匹配路径

            rewrite  ^/api/(.*)$ /$1 break;

            include  uwsgi_params;

            #后端端口(后端最终访问的端口)

            proxy_pass   http://x.x.x.x:8081 ;

        }
        location @router {
        rewrite ^.*$ /index.html last;
        }
    }

这里我没有分配置文件，感兴趣的同学可以试试

附上nignx重新加载配置文件命令

nginx -s reload