前端nginx配置指南

前端项目发布后,有些接口需要在服务器配置反向代理,资源配置gzip压缩,配置跨域允许访问等

配置文件模块概览
在这里插入图片描述
配置示例
在这里插入图片描述
在这里插入图片描述

反向代理
反向代理是Nginx的核心功能之一,是指客户端发送请求到代理服务器,代理服务器再将请求转发给后端的多个服务器中的一个或多个,并将后端服务器的响应返回给客户端。客户端并不直接访问后端服务器,而是通过反向代理服务器来获取服务。

要配置Nginx作为反向代理,需要使用location块中的proxy_pass指令,add_header配置允许跨域请求
跨域请求配置

server {listen 8020;server_name 172.18.34.14;fastcgi_buffers 50 4K;fastcgi_buffer_size 4k;location /hznl/data {#指定后台服务器地址proxy_pass http://172.18.43.5:8098;#允许所有源add_header 'Access-Control-Allow-Origin' '*';#是否可以向服务端发送Cookie,默认是 falseadd_header 'Access-Control-Allow_Credentials' 'true';  #允许指定头部add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';#允许指定方法add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';}
}

单页面应用刷新404问题

 location / {try_files $uri $uri/ /index.html;}

静态资源压缩gzip
Nginx中的静态资源压缩可以在http块、server块、location块中配置;Gzip是一种文件级别的数据压缩算法,用来减少文件大小,节省带宽从而提高网站的访问速度。它可以有效减少网络传输时间,这在大多数网站上可以大大提升用户体验

http {include       mime.types;default_type  application/octet-stream;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';#access_log  /var/log/nginx/access.log  main;sendfile        on;#tcp_nopush     on;keepalive_timeout  65;client_max_body_size 10m;#gzip  on;#是否启动gzip压缩,on代表启动,off代表开启gzip  on;##  #需要压缩的常见静态资源gzip_types text/plain application/javascript   application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;##    #由于nginx的压缩发生在浏览器端而微软的ie6会导致压缩后图片看不见所以该选#    项是禁止ie6发生压缩gzip_disable "MSIE [1-6]\.";##      #如果文件大于1k就启动压缩gzip_min_length 1k;##        #以16k为单位,按照原始数据的大小以4倍的方式申请内存空间,一般此项不要修改gzip_buffers 4 16k;##          #压缩的等级,数字选择范围是1-9,数字越小压缩的速度越快,消耗cpu就越大gzip_comp_level 2;include /usr/local/nginx/conf/conf.d/*.conf;
}

验证gzip压缩是否生效
服务端在接受到来自客户端的请求申请头部信息:Accept-Encoding: gzip, deflate,后,会对请求的资源响应内容的实体进行相应的编码处理,并且会在服务端的响应头部信息返回相应响应头部信息
在这里插入图片描述
可以看到watermark.js文件gzip压缩前为14.6kb,压缩后是4.4kb
在这里插入图片描述
可以看到,对图片资源使用gzip压缩没有使图片体积变小,体积还增大了。不管是 gif,jpg,png,ico格式,都是对图片做了有损压缩,也就是说,这些格式本来就是已经压缩过的格式,再进行gzip压缩,也不会有啥明显效果,而且还消耗服务器的CPU。所以,一般都不会对图片,视频,音频这些类型的文件做gzip压缩。
补充:
访问链接
对图片压缩
在这里插入图片描述

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

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

相关文章

数据结构-怀化学院期末题(321)

图的广度优先搜索 题目描述: 图的广度优先搜索类似于树的按层次遍历,即从某个结点开始,先访问该结点,然后访问该结点的所有邻接点,再依次访问各邻接点的邻接点。如此进行下去,直到所有的结点都访问为止。在…

OpenHarmony沙箱文件

一.前言 1.前景提要 DevEcoStudio版本:DevEco Studio 3.1 Release SDK版本:3.2.2.5 API版本:9 2.概念 在openharmony文件管理模块中,按文件所有者分类分为应用文件和用户文件和系统文件。 1)沙箱文件。也叫做应…

Jmeter扩展函数?年薪50W+的测试大佬教你怎么玩

很多同学,都问我:“老师,我的 jmeter 里面,怎么没有 MD5 函数,base64 函数也没有,我是不是用了假的 jmeter?” 哈哈哈,不是的。jmeter 的函数,有自带函数和扩展函数两大…

等价类划分法

📢专注于分享软件测试干货内容,欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!📢软件测试面试题分享: 1000道软件测试面试题及答案📢软件测试实战项目分享: 纯接口项目-完…

<HarmonyOS第一课>1~10课后习题汇总

HarmonyOS第一课 <HarmonyOS主题课>1~3课后习题汇总 1运行Hello World 判断题 main_pages.json存放页面page路径配置信息。(正确)DevEco Studio是开发HarmonyOS应用的一站式集成开发环境。(正确) 单选题…

二叉树-遍历-单独精讲

遍历:遍历每个元素。 寻常遍历root只会指一次。 而二叉树遍历每个元素则会指三次。 中序遍历-节点的中序 void traveres(TreeNode* root){if(!root)return;traveres(root->left);cout << root->val << endl;traveres(root->right);}中序遍历亦叫节点的中…

Python 自学(六) 之函数

目录 1. python函数的基本结构 P168 2. python函数的可变参数(不定长) *parameter P169 3. python函数的返回值(单个或多个) P173 4. python的匿名函数 lambda P177 1. python函数的基本结构 P168 2. python函数的可变参数(不定…

一文读懂「Attention」注意力机制

前言:Self-Attention是 Transformer 的重点,因此需要详细了解一下 Self-Attention 的内部逻辑。 一、什么是注意力机制? Attention(注意力)机制如果浅层的理解,核心逻辑就是「从关注全部到关注重点」。 Attention 机制很像人类看图片的逻辑,当我们看一张图片的时候,我…

服务器操作系统介绍

1、基本概念 OS ( operating system&#xff0c;操作系统)是管理计算机硬件与软件资源的计算机程序&#xff0c;同时也是计算机系统的内核与基石。 操作系统需要处理如管理与配置内存、决定系统资源供需的优先次序、控制输入与输出设备、操作网络与管理文件系统等基本事务。操作…

SD-WAN是如何工作的?

SD-WAN软件定义的广域网&#xff0c;其目的是帮助企业组建更为灵活和高效的网络框架。它与传统的广域网相比&#xff0c;具备更快的网络加速能力&#xff0c;更强的安全性和更便捷的使用方式。因此&#xff0c;随着企业在数字化转型的过程中&#xff0c;企业组网需求的不断提升…

用Postman实现接口自动化测试

postman使用 开发中经常用postman来测试接口&#xff0c;一个简单的注册接口用postman测试&#xff1a; 接口正常工作只是最基本的要求&#xff0c;经常要评估接口性能&#xff0c;进行压力测试。 同时&#xff0c;在这我为大家准备了一份软件测试视频教程&#xff08;含面试…

适用于任何公司的网络安全架构

1.第一等级:基础级 优势 可防范基本有针对性的攻击&#xff0c;使攻击者难以在网络上推进。将生产环境与企业环境进行基本隔离。 劣势 默认的企业网络应被视为潜在受损。普通员工的工作站以及管理员的工作站可能受到潜在威胁&#xff0c;因为它们在生产网络中具有基本和管理…

UE4 4.21-4.27使用编辑器蓝图EditorBlueprint方法

在UE4 4.21中&#xff0c;编辑器蓝图&#xff08;Editor Blueprint&#xff09;是一个强大的工具&#xff0c;允许开发者扩展和自定义Unreal编辑器的功能。通过编辑器蓝图&#xff0c;我们可以创建自定义的工具和功能&#xff0c;以优化开发流程。 本教程将指导您如何在UE4 4.…

大模型LLM训练的数据集

引言 2021年以来&#xff0c;大预言模型的开发和生产使用呈现出爆炸式增长。除了李开复、王慧文、王小川等“退休”再创业的互联网老兵&#xff0c;在阿里巴巴、腾讯、快手等互联网大厂的中高层也大胆辞职&#xff0c;加入这波创业浪潮。 通用大模型初创企业MiniMax完成了新一…

JHipster - Spring Boot 的快速开发利器

产品介绍&#xff1a; JHipster是一个开源的、全面的应用程序生成器&#xff0c;它能够帮助开发者快速生成Spring Boot Angular/React/Vue.js的完整应用程序。它不仅提供了一个简单的界面来定义应用程序的配置&#xff0c;还提供了一组强大的代码生成器&#xff0c;可以在数分…

vue简体繁体互转无需做字库

第一种方法 vue-i18n 需要自己写字库库很麻烦,而且不支持后端传值 第二种 opencc 这个库前端去使用的时候 数据较多的情况非常慢.影响使用 第三种 language-hk-loader npm i language-hk-loader 从其他博客中看到的一种,很方便不需要写字库,但是在打包的时候去整体的去翻译…

VG7050EAN 可编程压控晶体振荡器 (VCXO) 输出:LV-PECL

可编程电压控制振荡器&#xff1a; VG7050EAN是一个低抖动可编程的VCXO在任何频率。VG7050EAN由VCXO、PLL和LVPECL的输出缓冲区组成。它的输出频率可编程从50 MHz到800 MHz&#xff0c;分辨率接近2 ppb。VCXO为PLL提供稳定的参考时钟。VCXO的Kv可以通过I进行编程2C接口。PLL由低…

LaTex的下载与安装(Texlive+TexStudio,2023版)

目录 1. Texlive的下载与安装2. TexStudio的下载与安装 LaTex的下载与安装涉及到环境配置和编辑器安装&#xff0c;本文主要根据一下两个较为常用的组合进行下载和安装&#xff1a; Texlive&#xff08;是必须安装的LaTex环境&#xff09;&#xff1b;TexStudio&#xff08;是…

jenkins 自由风格部署vue项目,参数化构建vue项目

1. 丢弃旧的构建 2. 是否需要install 3. git 4. 配置node16: 5. 脚本&#xff1a; 脚本&#xff1a; #进入Jenkins工作空间下项目目录 cd /var/lib/jenkins/workspace/你的任务名称 node -v #检测node版本&#xff08;此条命令非必要&#xff09; npm -v #检测npm版本&#x…

Move 向未来,2024 开发者大会热潮涌动

1 月 13 日至 14 日&#xff0c;「2024 Move 开发者大会&#xff1a;Move 生态关键的一年」将于上海举办。本次大会由 MoveFuns 、OpenBuild 和 MoveBit 主办&#xff0c;Rooch、AptosGlobal、alcove、zkMove、TinTinLand 和云赛空间协办&#xff0c;并得到 Aptos、Sui 和亚马逊…