四、nginx静态文件的配置

news2024/11/19 21:17:57

1. 根据上节内容的提示,我们知道如何进行nginx的信号控制和命令行控制了。

2. 这节主要是学习nginx的静态文件、缓存、静态文件压缩等相关内容。

一、 配置并访问nginx静态文件

1.1 root配置nginx静态文件地址

        

在nginx.conf 配置文件中默认使用root配置了nginx静态界面地址

规则: root配置的路径+location路径为访问的路径。

路径规则:

         ①相对路径: 上图所示的为相对路径,即nginx的prefix路径(/usr/local/nginx)+html路径,也就是nginx启动时的相对路径。

        ②绝对路径: 如果配置和上图中一样的路径,则需要改为: root /usr/local/nginx/html。

注: window系统配置则需要加上双引号 eg: "F:/html/html";

1.2 alias配置静态文件地址

        若使用alias配置上述路径改如何配置呢?改为下述配置即可:

# eg:1

    location /html {
            alias  /usr/local/nginx/html;
            index  index.html index.htm;
        }


# eg:2

    location /html/ {
            alias  /usr/local/nginx/html/;
            index  index.html index.htm;
        }

       

上文中我用了两个例子,首先alias配置和root区别之一便是  location匹配的路径需要和实际路径后面那节一样。  (root是 root路径+location路径)

        第二个区别就是,root会忽视路径最后面的 /    但是alias必须两个同时存在或同时不存在即可

二、 配置并访问vue项目文件

2.1 使用root配置vue项目地址

# 1. 一般使用根路径配置前端

location / {

    root /data/webroot/html/xxx/dist;
    index  index.html index.htm;

}

2.2 使用alias配置vue项目地址

# 1. 一般使用根路径配置前端

location /dist {

    alias /data/webroot/html/xxx/dist;
    index  index.html index.htm;

}

那么我们进行访问的时候会发现报错如下图所示:

此时主要是因为配置vue项目的地址是使用的相对路径,也就是路径没有/dist导致的,故需要在dist目录下的index.html统一添加前缀即可:

下图为正常访问的情况:

三、 nginx静态文件优化配置

http{

    #提高文件的传输效率
    sendfile on;
    #
    tcp_nopush on;
    #
    tcp_nodelay on;
    
}

3.1 sendfile,用来开启高效的文件传输模式

值       释义
on        开启 eg:  sendfile: on;
off                    关闭 (默认值)。eg: sendfile: off;

注:① sendfile默认是关闭的。

       ② 在默认情况下,静态文件请求会进行linux内存将文件从磁盘拷贝到缓冲区、然后再将缓冲区的文件通过进程应用拷贝到sokect缓冲区进行返回。

        ③ 开启时,则会直接由linux内核拷贝到sokect缓冲区提供,大大节约了io的次数。

        ④ 在http server location均可以进行开启。

3.2 tcp_nopush:提升网络包的传输'效率(sendfile 开启)

值       释义
on        开启 eg:  tcp_nopush: on;
off                    关闭 (默认值)。eg: tcp_nopush: off;

注: 这个开启,则保证了文件不会零散的发送出去(减少了io次数),一次性发送对于整个网络有很大的优化提升。

3.3 tcp_nodelay:提高网络包传输的'实时性(keep-alive连接开启)

值       释义
on        开启 eg:  tcp_nodelay: on;
off                    关闭 (默认值)。eg: tcp_nodelay: off;

注:① 这个开启,会保证数据包(静态文件会分成很多数据包)存在的时候直接进行发送。

        ② 看上去这个和3.2 tcp_nopush 是互斥的,但是在linux内核2.5.9之后处理逻辑是先保证3.2 tcp_nopush填满,当文件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409083.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue项目使用svg图片

(svg-sprite-loader以及vue2-svg-icon的使用) 第一种方式: 1、安装svg-sprite-loader npm install svg-sprite-loader --save-dev 2、webpack 配置(build/webpack.base.conf.js) { test: /\.svg$/, loader: svg-spr…

小程序表单校验uni-forms正确使用方式及避坑指南

小程序表单校验uni-forms正确使用方式及避坑指南一、前言二、成果展示三、uni-forms即时校验四、uni-forms自定义校验规则五、uni-forms异步校验六、完整示例源码七、最后,点个赞一、前言 小程序上使用表单理应是很常用,也很必须的功能,因为…

【微信小程序】自定义组件

组件的创建与引用 1.1、创建组件 (1)在项目的根目录中,鼠标右键,创建 components > test 文件夹 (2)在新建的 components > test 文件夹中,鼠标右键,点击“新建 Component” …

通过JavaScript、css、H5 实现简单的tab栏的切换和复用

目录 一、效果展示 二、实现的大致原理 三、H5的布局 四、CSS样式 五、JS代码内容 六、完整代码 一、效果展示 二、实现的大致原理 1.我们先通过css 和h5布局得到最基本的tab栏样式(有代码参考) 2.在获得样式,给我们所需要点击的目标设…

yolov5部署+微信小程序前端展示

分为yolov5项目部署和微信小程序两部分,先介绍微信小程序前端展示flask后端,之后介绍项目部署这部分。 一、先上效果图 1. 点击选择图片,调用摄像头选择图片 2.选择图片之后,点击开始检测,然后返回结果 ​​​​​​…

CTF----Web真零基础入门

目录 前置知识导图: ​TCP/IP体系结构(IP和端口): IP是什么:是计算机在互联网上的唯一标识(坐标,代号),用于在互联网中寻找计算机。 内网(局域网&#xf…

JSONP解决跨域问题

一、什么是同源 概念:如果两个页面的协议、域名和端口都相同,则这两个页面具有相同的源。 二、什么是同源策略 概念:是浏览器提供的一个安全功能。 三、什么是跨域 概念:同源指的是两个URL的协议、域名、端口号一致&#xff0c…

前端开发调式必备技能F12开发者工具之Elements(元素)面板,详细图解带流程【第一部分】

目录 一、进入浏览器开发工具的几种方式 二、Elements(元素)面板 左侧区域 右侧区域 计算样式 事件监听器 大家好!我是爷爷的茶七里香,这个名字有没有让你想起周董的歌捏?好了,废话不多说,开始今…

项目实训记录(十二)——el-table-column根据条件修改字体颜色

目录 一、干了什么? 二、问题和解决方法 1. el-table-column根据条件修改字体颜色 2.问题 总结 一、干了什么? 本周要完成数据去重工作和前端的完善。 清理工作 主要是来删除用户插入的重复数据。由管理员决定表是否允许重复数据。如果用户上传的表不允…

vue3 自定义全局loading组件 (PC和移动端都非常适用)

前言 在开发的过程中,点击提交按钮,或者是一些其它场景总会遇到loading加载框,PC的一些ui库也没有这样的加载框,无法满足业务需求,因此可以自己自定义一个,实现过程如下。 效果图(loading样式…

个人博客小程序

文章目录1.前言2.首页博客数据展示3.用data中的数据渲染博客展示4.使用云数据库创建集合blogs5.读取数据库中的数据6.创建添加博客页面1.前言 这篇文章详细的介绍了个人博客小程序的云开发流程,包括博客展示页面,添加博客页面的创建,以及云函…

pm2基本使用

1.pm2的基本介绍 pm2是node的进程管理器,利用它可以简化node任务的管理,且内置了许多功能,常用于后台脚本管理。 pm2特性 自带热部署 - - - 当源文件更新 线上项目也会自动重启后台运行 - - - 不会占用实时窗口 会在后台运行服务信息查看 - - - 查看运行中程序的…

Vue权限控制

此文章根据视频教程进行整理前端面试官必问系列-后台系统的权限控制与管理,建议搭配视频教程一起食用效果更佳 目录 1、权限相关概念 1.1、权限的分类 后端权限 前端权限 1.2 、前端权限的意义 降低非法操作的可能性 尽量减少不必要请求,减轻服务…

VUE跨域、常用解决跨域的方法

当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时,那说明跨域了。 跨域是因为浏览器的同源策略所导致,同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,同源是指&…

〖大前端 - 基础入门三大核心之CSS篇⑱〗- CSS中的背景

说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外,还可以通过加入星荐…

【React Router v6】路由组件传参params/search/state(router v6)

欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥 R e a c t 框架 React框架 Reac

react-router v6 如何实现动态路由?

前言 最近在肝一个后台管理项目,用的是react18 ts 路由用的是v6,当需要实现根据权限动态加载路由表时,遇到了不少问题。 v6相比于v5做了一系列改动,通过路由表进行映射就是一个很好的改变(个人认为)&…

Docker利用Nginx部署前端项目

今天给大家分享的是Docker利用Nginx部署Vue等前端页面项目;其实是我工作刚好用到,顺便分享给大家O(∩_∩)O,那么话不多说直接开始。 一:准备文件 我们先将前端项目打包好,放到此文件夹下,例如我这样&#…

ts基本类型 typeof 和keyof

安装编译ts的工具 安装命令:npm i -g typescript 或者 yarn global add typescript。 验证是否安装成功:tsc –v(查看 TypeScript 的版本)。 编译并运行 TS 代码 创建 hello.ts 文件(注意:TS 文件的后缀名…

vue3中ref和reactive的区别

ref 接受一个内部值并返回一个响应式且可变的 ref 对象,有一个 .value 属性,可以通过其读取/修改对象的值。 const active ref(false)console.log(active.value) // falseactive.value trueconsole.log(active.value) // true 为ref值指定泛型参数覆盖…