部署

Nginx部署方案有三种，如果没有特殊需求，个人推荐第三种

多个应用多个端口，主应用配置多个子应用路径转发到相对应的子应用端口上。

优点：子应用能单独访问
缺点：每有新增子应用时，则每次都要新增一个子应用端口和转发

http{
    # main
    server {
        listen       80;
        location / {
            try_files $uri $uri/ /index.html;
            root   /usr/share/nginx/main;
            index  index.html index.htm;
        }
        location /module/pms {
           try_files $uri $uri/ /index.html;
           proxy_pass http://127.0.0.1:8081;
        }
        location /module/oms {
            try_files $uri $uri/ /index.html;
            proxy_pass http://127.0.0.1:8082;
         }
    }
    
    # pms
    server {
        listen       8081;
        location / {
            try_files $uri $uri/ /index.html;
            root   /usr/share/nginx/pms;
            index  index.html index.htm;
        }
    }
    
    # oms
    server {
        listen       8082;
        location / {
            try_files $uri $uri/ /index.html;
            root   /usr/share/nginx/oms;
            index  index.html index.htm;
        }
    }
}

多个应用一个端口，子应用需要一个二级目录装着，子应用只配置一个location即可，但是目录名必须跟主应用的Layout路由的path属性一样，并且应用名必须跟是部署的目录一致，比如有主应用(main)，子应用有pms、oms，那么该目录结构如下：

| -- main
     | -- index.html
| -- module
     | -- pms
          | -- index.html
     | -- oms
          | -- index.html

优点：一个端口即可，location只需两个，一个主应用，一个子应用
缺点：子应用都得在一个指定的目录下，打包后完需要用sh命令，改变dist目录名和位置，增加复杂度；对于部分运维部署软件，可能无法回滚；无法单独访问子应用

server {
    listen       80;
    location / { # 主应用
        root   /data/web/qiankun/main;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    
    # ^~ 匹配任何以/module/开头的任何查询并且停止搜索。任何正则表达式将不会被测试。
    # module 必须与 主应用的Layout路由的path 一直
    location ^~ /module/ { # 所有子应用
        alias /data/web/qiankun/module;
        try_files $uri $uri/ /index.html;
    }
}

多个应用一个端口，通过正则表达式匹配后缀名，用alias或者rewrite重写请求，要求应用名必须跟是部署的目录一致，可以设置vue.config.js的outputDir属性，改变dist目录名。

先分析请求规则

请求 -> /module/ // 主应用的启动页
请求 -> /module/pms/A // pms应用 A页面
请求 -> /module/pms/B // pms应用 B页面
请求 -> /module/oms/C // oms应用 C页面
请求 -> /module/oms/D // oms应用 D页面

根据如上规则，可以知道第一个/后面的module是固定的，第二个/后面就是应用名，第三个/后面是具体的路由地址。所以根据如上规则可以用正则表达式匹配，并改写请求。

优点：一个端口，location只需两个，一个主应用，一个子应用；子应用的location用正则表达式动态匹配，并用rewrite动态重写url；在服务器打包完后的路径就是最终路径，不用改写目录。
缺点：Nginx的location正则匹配性能消耗性能大一点？

server {
    listen       80;
    location / { # 主应用
        root   /data/web/qiankun/main;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    
    location ^~ /module/(.*) { # 所有子应用
        try_files $uri $uri/ /index.html;
        if ($1 != "") { # 有值时，则跳到对应的子应用
            alias /data/web/qiankun/$1
            # rewrite "/module/(.*)" "/data/web/qiankun/$1" last;
        } else { # 没有值时，则跳到主应用
            alias /data/web/qiankun/main
            #rewrite "/module/(.*)" "/data/web/qiankun/main" last;
        }
    }
}

部署 ​

部署