Nginx配置单页应用
Posted 陌路凡歌
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Nginx配置单页应用相关的知识,希望对你有一定的参考价值。
上一期我们讲了如何在一个新服务器上用nginx跑起一个前端项目,但是还有很多缺陷,比如我们想在这个Nginx下跑多个项目怎么办,spa单页项目常见的刷新空白原因及处理等等,本篇将一一介绍。
同端口多项目配置
假设我们有两个单页项目,一个pc官网,一个mobile官网,我们都想跑在上期8082端口上,这时候发现我们上一期部署的文件夹是直接放在www
目录下的,这可不行,文件全放这下面都不能区分是哪个项目的了,万一文件夹或者文件名字一样,就覆盖掉了。
那么有两种方案:
- 各大cli脚手架上都有输出文件夹的设置,比如vue-cli的
outputDir
,这个可以设置文件夹名。 - 在www目录下新建对应项目的文件夹,scp上传上传到对应文件夹。
这里我们使用一下方案1,方案二类似,路径不同而已。
修改打包配置
由于我们是在同一个端口下跑的项目,那么我们只能通过路径区分不同项目。
比如我们的项目在http://localhost:8082/mobile
下跑,那么vue-router添加base配置:
new VueRouter({
mode: \'history\',
base: \'/mobile\', // pc同理
...
)}
当然我更建议你把这个路径值放入.env文件里,.env.dev
:
BASE_URL=/mobile
修改配置为:
new VueRouter({
mode: \'history\',
base: process.env.BASE_URL,
...
)}
// history: createWebHistory(process.env.BASE_URL) // 4.0+
vue.config.js:
module.exports = {
publicPath: process.env.BASE_URL, // 这个是打包后外部文件链接追加值,比如\'/mobile\',那么最后的js和css链接为\'/mobile/js/xxxx.js\'
outputDir: \'mobile\', // 这个是打包输出文件夹名
...
}
进行项目打包,会得到一个mobile文件夹,我们使用scp进行文件上传(pc同理)
scp -r ./mobile root@$host:~/nginx/www/; # 上传mobile文件
Nginx配置修改
location /pc {
alias /usr/share/nginx/html/pc/;
index index.html;
}
location /mobile {
alias /usr/share/nginx/html/mobile/;
index index.html;
}
重启nginx,docker restart web
,此时访问http://localhost:8082/mobile/
,网页能正常打开,当时我们访问http://localhost:8082/mobile
却发现被诡异的重定向到了80端口,也就是http://localhost/mobile/
,查看一下浏览器请求发现被301永久重定向了。
这是由于Nginx在访问URI时;如果访问资源为一个目录,且结尾没有/
,那么Nginx会进行一个301重定向到结尾带有\'/\'的地址,跳转时可以通过port_in_redirec
设置跳转端口号,没有的话则从listen
里取,也就是80,故这里进行了80的重定向,我们可以在server
模块中添加absolute_redirect off;
关闭这个重定向。
设置之后重启Nginx,我们通过http://localhost/mobile
和http://localhost/pc
都能访问对应项目。
spa单页跳转刷新白屏
我们在上面进行了多项目配置,但是还有一个问题没有解决,这个问题很常见,就是跳转后刷新的白屏问题,很多同学不敢从hash路由切换到history路由也是有此原因。
简单描述一下问题吧:我们直接打开项目的根路径地址访问正常,比如上面的http://localhost/mobile
,刷新也正常显示,我们点击跳转到http://localhost/mobile/list
,此时也正常跳转,但是我们在这个地址进行原地刷新时,会出现404错误,或者说我们直接用浏览器打开http://localhost/mobile/list
也会出现404,这个问题呢算比较严重的了,也就是我们能直接打开或者刷新的只有根路径,其他路径都会出现404的问题。
404的原因
首先我们的网页访问都是一个get请求,你可以理解为获取一个静态资源,我们看一下Nginx的location配置:
location /pc {
alias /usr/share/nginx/html/pc/;
index index.html;
}
当我们的URI地址匹配到了/pc,会在alias的路径中查找,默认文件去找index指令后面的的index.html,比如我们访问http://localhost/mobile
能正常访问,是因为mobile目录下确实有index.html这个实体文件,那么正常返回了,而访问http://localhost/mobile/list
,Nginx就会去找mobile/list/index.html
,很显然没有这个东西,故返回404。
总结一下就是:spa的路由是由js生成的,并不会有对应路径的实体文件,而Nginx访问网页的实体资源,找不到就会返回404,那么也就是这个路径是交由我们的js来处理,而不是交由Nginx处理,所以我们只需要在Nginx找不到路径的实体文件时把我们的index.html返回回去就行了。
location /pc {
alias /usr/share/nginx/html/pc/;
try_files $uri $uri/ /pc/index.html;
index index.html;
}
try_files
指令会依次查找后面的文件,直到找不到,$uri
是原地址,$uri/
是$uri/index.html
,剩下的就是/pc/index.html
,举个例子http://localhost/pc/aaa.png
,会先去查找http://localhost/pc/aaa.png
,找不到的话查询http://localhost/pc/aaa.png/index.html
,最后则是http://localhost/pc/index.html
ok,这样spa白屏问题就解决了,但是还有一个微小的问题,那就是当我们访问的路径确实不存在(spa-router也没有),路径不是Nginx处理了,那么此时404也就不存在了,会出现白屏,不过聪明的同学已经想到了众多router都会在最后加个通配符来匹配404的页面,那么404的页面也就交给我们自己写了。
root和alias
这个算是一个补充吧,说一下root
和alias
的区别,毕竟很多配置用的root
,请注意alias
只能在location
中使用,而root
可以配置在http
,server
,location
中使用。
其实root
和alias
都是Nginx指定文件路径的指令,以上面的例子:
# root
location /pc {
root /usr/share/nginx/html;
try_files $uri $uri/ /pc/index.html;
index index.html;
}
# alias
location /pc {
alias /usr/share/nginx/html/pc/;
try_files $uri $uri/ /pc/index.html;
index index.html;
}
这两个的匹配规则一样的,简单来说就是root会把location后面配置的路径加上,alias则是去除掉,也就是说二者的文件路径都是指向根目录下的pc
文件夹,也就是说使用root
的location匹配的路径必须真实存在(因为追加了),如果root
出现404了直接看path的目录是否存在就行了。
不过需要注意一点就是alias的路径结尾需要有个/
,虽然这里加不加都没问题,但这是一个良好的习惯,请保持,否则遇到下面这种情况就会出错。以下面例子分别访问http://localhost:8082/image/logo.png
,最后一个会404:
location /image/ {
alias /usr/share/nginx/html/image/;
}
location /image {
alias /usr/share/nginx/html/image/;
}
location /image {
alias /usr/share/nginx/html/image;
}
location /image/ { # 这里会404
alias /usr/share/nginx/html/image;
}
下一篇我会介绍单页应用在Nginx上的加载优化,尽请期待。
本系列更新只有利用周末和下班时间整理,比较多的内容的话更新会比较慢,希望能对你有所帮助,请多多star或点赞收藏支持一下
本文地址:https://xuxin123.com/web/nginx-spa
以上是关于Nginx配置单页应用的主要内容,如果未能解决你的问题,请参考以下文章
nginx.conf 忽略了 nginx-ingress 配置映射片段
[记录]解决vue项目当直接通过url访问中间页时nginx返回404的问题
Nginx——Nginx启动报错Job for nginx.service failed because the control process exited with error code(代码片段