Nginx03 root、alias与try_files

发表于 分类于 阅读次数：

root、alias与try_files的配置与应用。

root与alias的区别

root与alias的区别主要在于Nginx如何解释location后面的路径的URI，这会使两者分别以不同的方式将请求映射到服务器文件上。具体来看：

  • root的处理结果是：root路径+location路径
  • alias的处理结果是：使用alias路径替换location路径

例如，如下的Nginx配置：

1
2
3
4
5
6
7
server {
    listen              9001;
    server_name         localhost;
    location /hello {
        root            /usr/local/var/www/;
    }
}

在请求http://localhost:9001/hello/时，服务器返回的路径地址应该是/usr/local/var/www/hello/index.html

当使用alias时：

1
2
3
4
5
6
7
server {
    listen              9001;
    server_name         localhost;
    location /hello {
        alias           /usr/local/var/www/;
    }
}

在请求http://localhost:9001/hello/时，服务器返回的路径地址应该是/usr/local/var/www/index.html（用alias后面的路径将请求的location的地址hello替换掉）

另外，要注意的是，alias路径后面必须使用/结束，否则无法匹配正确的路径，而root后则可有可无。所以建议都加上/，反之出错

try_files

接触到try_files，是在对vue-router进行History模式进行配置时，官网给出的例子中使用到了try_files：

1
2
3
location / {
    try_files $uri $uri/ /index.html;
}

try_files的作用就是在匹配location的路径时，如果没有匹配到对应的路径的话，提供一个回退的方案，在上面的例子中：$uri就代表匹配到的路径。例如我们访问/demo时，$uri就是demo

try_files的最后一个参数是回退方案，前两个参数的意思是，保证如果能够匹配到路径的话访问匹配到的路径，例如访问/demo时，如果根路径下没有demo目录，就会访问index.html

要注意到的是，/index.html的服务器路径，会到root路径下去寻找，上面的例子中，没有root选项，那么就会到Nginx的默认根路径下去寻找index.html，如果设置了root: a，那么就会到服务器的/a/index.html路径下去匹配

在非根路径下使用try_files

当我们希望在/test路径下部署一个路由使用History的Vue应用，那么可以使用如下的Nginx配置：

1
2
3
4
5
6
7
8
9
server {
    listen              9001;
    server_name         localhost;
    location /test {
        root            /usr/local/var/www/hello/;
        index           index.html;
        try_files       $uri $uri/ /test/index.html;
    }
}

这个时候：

  • 非/test路径下的请求，不会收到上面的配置的影响
  • 当访问/test时，会使用root的匹配规则，到服务器/usr/local/var/www/hello/test路径下寻找index.html文件
  • 当访问/test/demo1时，会使用try_files的匹配规则，到root路径下去寻找最后一个参数/test/index.html的回退方案，也就是说去/usr/local/var/www/hello/test路径下寻找index.html文件

除了Nginx的配置外，Vue应用本身还需要配置两处：

（1）vue-router实例化时指定history模式，并添加base参数：

1
2
3
4
5
const router = new Router({
  routes,
  mode: 'history',
  base: '/test'
});

（2）静态资源的目录publicPath设置为相对路径（否则回去绝对路径下寻找JS等静态资源）

1
2
3
{
    assetsPublicPath: './'
}

参考