react/vue-router在history mode下，nginx所需配置 & try_files & root 、alias详解

项目部署在二级目录下（http://xxxxxxxx/blog-admin），直接部署下域名下的，删去对应目录名即可。

部署到二级目录下，打包时也要做相应配置：

项目使用create-react-app搭建，部署到域名下的二级目录（例如 http://XXXXX/floder ）中时，静态资源路径会出现问题，直接部署到域名下，静态资源路径可用'./'开头，而现在得用‘/folder/’开头，则必须在package.json中配置"homepage": "/folder/"，这样一条。同时，react-router中也需要配置base-name，例如。否则路由无法正确匹配。

server {
        listen 80;
        server_name xxxxxxxxx;
  
				# 无关内容省略

        location ^~/blog-admin {
            alias   /usr/share/nginx/html/blog-admin/; # alias 和 root的区别需要搞清楚
            index  index.html;
            try_files $uri $uri/ /blog-admin/index.html;  # try_files 详解见下方。
            add_header  Cache-Control  max-age=no-cache;
        }

        location /blog-admin/static {
            # 静态资源添加缓存头
            access_log off;
            alias   /usr/share/nginx/html/blog-admin/static;
            add_header    Cache-Control  max-age=360000;
        }
    }

root 、alias详解

root与alias主要区别在于nginx如何解释location后面的uri，这会使两者分别以不同的方式将请求映射到服务器文件上。 root的处理结果是：root路径＋location路径 alias的处理结果是：使用 alias 路径替换 location 路径

例如：

root

location ^~ /t/ {
     root /www/root/html/;
}

如果一个请求的URI是/t/a.html时，web服务器将会返回服务器上的/www/root/html/t/a.html的文件。

alias

location ^~ /t/ {
 alias /www/root/html/new_t/;
}

如果一个请求的URI是/t/a.html时，web服务器将会返回服务器上的/www/root/html/new_t/a.html的文件。alias会把location后面配置的路径丢弃掉，把当前匹配到的目录指向到alias指定的目录。

用alias时，里面结尾加/，外面也要加/。如果里面不加，那外面也不能加。因为alias替换的是整个完整路径，包括最后的/。
alias只能位于location块中。（root可以不放在location中）

try_files 详解

这个配置项，用于搭配前端路由（vue or react router）的hiasory mode使用，例如

location / {
    try_files $uri $uri/ /test/index.html;
}

例如访问 example.com/aaa/bbb

nginx会查找

$uri 对应 =》 /aaa目录下是否存在bbb文件
$uri/ 对应 =》 /aaa/bbb 目录下是否存在文件，nginx会去找名字为index的文件，并返回
/test/index.html 对应 => example.com/test/index.… ,如果前两项均未匹配，则返回这个。

很显然，SPA只有一个入口html文件，所以每次路由跳转，最终都会走到第三步，返回对应的index.html