Nginx配置单页应用

更新日期: 2021-07-27阅读量: 1092标签: nginx

同端口多项目配置

假设我们有两个单页项目,一个pc官网,一个mobile官网,我们都想跑在上期8082端口上,这时候发现我们上一期部署的文件夹是直接放在www目录下的,这可不行,文件全放这下面都不能区分是哪个项目的了,万一文件夹或者文件名字一样,就覆盖掉了。

那么有两种方案:

  1. 各大cli脚手架上都有输出文件夹的设置,比如vue-cli的outputDir,这个可以设置文件夹名。
  2. 在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',那么最后的jscss链接为'/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;
}

本文地址:https://xuxin123.com/web/nginx-spa


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/10586

nginx反向代理时保持长连接

深入了解nginx,get到nginx的一些性能优化方向。除了了解如何保持长连接,也通过本案例学习到开源中间件的一些常用定位思路和优化方法。

nginx自定义变量与内置预定义变量

nginx可以使用变量简化配置与提高配置的灵活性,所有的变量值都可以通过这种方式引用:$变量名,而nginx中的变量分为两种,自定义变量与内置预定义变量

深入 Nginx 之架构篇

Nginx 作为业界知名的高性能服务器,被广泛的应用。它的高性能正是由于其优秀的架构设计,其架构主要包括这几点:模块化设计、事件驱动架构、请求的多阶段异步处理、管理进程与多工作进程设计、内存池的设计,以下内容依次进行说明。

Web前端必备-Nginx知识汇总

Nginx是一个高性能、轻量级的Web和反向代理服务器, 其特点是占有内存及资源少、抗并发能力强。Nginx安装简单、配置简洁、启动快速便捷、支持热部署、支持 SSL、拥有高度模块化的设计。

nginx做http向https的自动跳转

首先让nginx服务器监听两个端口,分别是80端口和443端口,注意监听443端口的时候需要配置证书的认证以及创建自签名证书!关于证书的认证的以及创建自签名的证书,nginx的配置如下,只给出了两个server的配置,可以直接复制到http块中。

Nginx同时支持Http和Https的配置

现在的网站支持Https几乎是标配功能,Nginx能很好的支持Https功能。下面列举一个配置同时支持Http和Https的功能。需要注意的是:既然选择使用Https,就是为了保证通信安全,那么就没必要再用Http进行通信了。

nginx配置详解

建议同cpu数一样,如果number=2,启动nginx后,后台会看到2个nginx进程,日志输出级别有debug,info,notice,warn,error,erit,其中,debug输出日志最为详细,而crit输出日志最少,nginx进程是作为系统守护进程在进行,需要在某个文件中保存当前运行程序的主进程号

7个令人兴奋的JavaScript新特性

一个ECMAScript标准的制作过程,包含了Stage 0到Stage 4 五个阶段,每个阶段提交至下一阶段都需要TC39审批通过。本文介绍这些新特性处于Stage 3 或者Stage 4 阶段,这意味着应该很快在浏览器和其他引擎中支持这些特性

Nginx 禁止某 IP 访问

总有一些不怀好意的人来访问我的网站,而且频率还很高,所以就用简单的方式禁止访问,就用 Nginx 来实现。想要添加黑名单,只要在 blocksip.conf 中添加 IP ,然后 reload 即可。

nginx的一般安全配置

项目一般配置,例如default.conf;nginx的主入口nginx.conf;lua的一些应用一般爬虫无法动态cookie,用作判断是否是浏览器行为;thinkphp.conf相关的配置

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!