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