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

2,584 阅读2分钟

项目部署在二级目录下(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指定的目录。

  1. 用alias时,里面结尾加/,外面也要加/。如果里面不加,那外面也不能加。因为alias替换的是整个完整路径,包括最后的/。

  2. 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会查找

  1. $uri 对应 =》 /aaa目录下是否存在bbb文件

  2. $uri/ 对应 =》 /aaa/bbb 目录下是否存在文件,nginx会去找名字为index的文件,并返回

  3. /test/index.html 对应 => example.com/test/index.… ,如果前两项均未匹配,则返回这个。

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