nginx配置部署多个单页应用踩坑

想要让不同的url访问不同的单页应用, 踩了两天坑特记录如下

目的:

host:port/a 访问a项目的index.html

host:port/b 访问b项目的index.html

https://segmentfault.com/a/1190000015428921?tdsourcetag=s_pcqq_aiomsg

用alias可以轻松配置

location ^~/A {
            alias /XX/A/;//此处为A的路径
            index index.html;
            try_files $uri $uri/ /A/index.html;
    }
    location ^~/B {
            alias /XX/B/;//此处为B的路径
            index index.html;
            try_files $uri $uri/ /B/index.html;
    }

如果用root的话

先上结论

nginx的root配置只有在location / {} 下面才生效在之后的location里面都不生效

location / {

    root /var/www/dist;  # 这样的配置是生效的

}

location /a {

    root /var/www/dist;  # 这样的配置是不生效的

}

所以要么将root配置在location外面, 要么配置在location / 里面

对于用react和vue打包之后的项目, 访问的都是index.html

因此把单个应用部署到服务器上的话用的配置参数为

location / {
            root   /var/www/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

这行代码的意思是设定root文件夹为打包好的dist文件夹如果访问根节点, 就返回index.html

如果/后面带有参数, 那么就把参数和root进行拼接之后去找资源

对于这行代码如果请求是 /static/js/1.js

那么服务器就会去/var/www/dist/static/js/1.js 找这个文件

如果找不到这个文件, 就会返回try_files的内容. 在这里为/index/html

这个是普通的单页应用.

那么如果要实现不同的url访问不同的应用该怎么办呢

首先.root是不能设置为两个了. 因为前文已经提过, 要么在server中设置root 要么在location / 中设置. 及全文只能有一个root

那么就用代理的方法来了.

在nginx上启动两个本机服务(端口不开启防火墙的话是访问不到的

在/etc/nginx/con.d/文件夹下面有一个default.conf, 新建两个

vim server1.conf

内容

server {

    listen 9090;

    location / {

        root /var/www/dist1;

        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

}

在创建一个server2.conf

vim server2.conf

server {

    listen 9091;

    location / {

        root /var/www/dist2;

        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

}

这两我们就在本机开了两个服务.分别访问两个不同的应用

然后在default里面设置

server {
        listen       80;
        server_name  localhost;
        location /a {
        proxy_pass http://127.0.0.1:9090;
        }

        location /b {
        proxy_pass http://127.0.0.1:9091;
        }
}

这样虽然可以初步实现了, 但是会发现静态资源根本访问不了.

因为静态资源请求的是/static/ 而这个url到了nginx这里是没有任何匹配项的. 所以要在配置文件里面做设置

在vue工程里面的 config/index.js里面的build下面有个assetsPublicPath 修改

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/a/',
......
}

另一个改成/b/

这样访问静态资源的时候第一个就会访问/a/static/ 这样就能找到了.

这样的首页已经可以显示了. 但是如果进行路由跳转的话会发现 /a的主页跳转的时候/a就会不见了. 所以在vue-router里面加上

export default new Router({
  mode: 'history',
  base: '/a/',
  routes: [...]
})

这样每次跳转的时候都会带上/a了

至此就可以在同一个服务器上通过nginx实现不同的url访问不同的应用了并且互不干扰.

nginx配置部署多个单页应用 踩坑

nginx配置部署多个单页应用踩坑