nginx【nginx跨域、nginx开启gizp压缩、nginx服务器部署项目】

nginx是一个高性能的HTTP和反向代理服务器，它使用配置文件决定如何提供内容、要监听的端口等。因此常用来做静态资源服务器和后端的反向代理服务器。

安装：brew install nginx

启动：brew services start nginx 或 sudo nginx

配置则在这个文件配置：nginx.conf

出现下面这个页面表示成功（我把默认的8080端口改成了5188）

常用命令： 

nginx  #启动nginx
nginx -s quit  #快速停止nginx
nginx -V #查看版本，以及配置文件地址
nginx -v #查看版本
nginx -s reload|reopen|stop|quit   #重新加载配置|重启|快速停止|安全关闭nginx
nginx -h #帮助
nginx -s stop #关闭
nginx -s reload #重启nginx

前端需要熟悉的nginx相关配置：

1. 跨域（反向代理）（正向代理隐藏真实客户端，反向代理隐藏真实服务端）『反向代理：客户端无法感知代理，因为客户端访问网络不需要配置，只要把请求发送到反向代理服务器，由反向代理服务器去选择目标服务器获取数据，然后再返回到客户端，此时反向代理服务器和目标服务器对外就是一个服务器，暴露的是代理服务器地址，隐藏了真实服务器IP地址』

2. 缓存配置 及 开启 gzip压缩

3. 部署项目

4. 负载均衡（假设有15个请求发送到代理服务器，那么由代理服务器根据服务器数量，平均分配，每个服务器处理5个请求，这个过程就叫做负载均衡）

5. 动静分离（Tomcat的高并发性能很弱，所以在处理静态请求的时候，我们就抛给Nginx处理，而Tomcat专门处理动态请求。）

6.虚拟目录：

有时候你想在一台服务器上为不同的域名运行不同的站点。比如www.siteA.com作为博客，www.siteB.com作为论坛。你可以把两个域名的IP都解析到你的服务器上，但是没法在Nginx的根目录里同时运行两个不同的网站。这时候，你就需要使用虚拟目录了。假设你把博客放在”/home/user/www/blog”下，论坛放在”/home/user/www/forum”下。

Host 是 HTTP 1.1 协议中新增的一个请求头，主要用来实现虚拟主机技术。虚拟主机（virtual hosting）即共享主机（shared web hosting），可以利用虚拟技术把一台完整的服务器分成若干个主机，因此可以在单一主机上运行多个网站或服务。host请求头决定访问哪一个虚拟主机。

目前很多一个ip对应多个域名的情况（nginx虚拟主机的实现原理），在http请求头中有host字段。

当我们发送一个请求时，先通过DNS域名解析，得到ip，然后建立tcp连接，当服务器收到请求时（以nginx为例），就会解析http请求host字段来判断你是访问的那个server配置下的代码，这样 就可以实现在一个服务器上通过http的host字段实现虚拟服务器

关于跨域：

配置nginx文件，解决跨域问题

 反向代理的意思就是把前端的地址和后端的地址 使用nginx转换到相同的地址下,如把node服务3000端口 和 网页打开的服务5500端口都转换到 nginx的8000端口下

比如把访问localhost:8000 转换成访问 localhost:5500,而访问localhost:8000/user... 则转换成localhost:3000/user

然后,把前端代码的请求地址修改一下,此时前端访问的就不再是node的服务了,而是要访问nginx, 然后通过nginx做响应的转发

在浏览器中访问的也不再是localhost:5500了,而是localhost:8000

这样就不会出现跨域问题了,这就是反向代理。

关于部署

我们使用nginx部署Vue项目，实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹。之前的步骤已经介绍了怎样配置nginx指向我们创建的文件夹，剩下的问题就是怎么把打包好的文件同步到服务器上指定的文件夹里，比如同步到之前步骤中创建的/www。

通常情况下ngxin是安装到单独的服务器上，因此一般是把vue打包后的dist扔到服务上的具体位置，然后修改nginx.conf的root路径来指向我们的dist。

在linux服务上和window环境上使用nginx部署vue项目并没有太大差异，把构建好的vue项目dist上传到linux服务上，通用修改nginx服务器中的root来指向dist就ok了。

线上代理需使用nginx发布并代理。

常见问题：elementUI图标打包部署后404

问题原因：

查看 /build/webpack.base.conf.js 文件可以发现，woff 或 ttf 这些字体会经由 url-loader 处理后在 static/fonts 目录下生成相应的文件。

 也就是说实际应该通过 /static/fonts/** 路径来获取字体图标，而实际却是请求 /static/css/static/fonts/**，自然报 404 错误。

解决办法

打开 build/utils.js 文件，在如下位置添加 publicPath: '../../';

修改完毕后重新 build 发布，可以发现图标已经可以正常显示了。

到目前为止，访问localhost:8081/#/index即可看到页面

1）路由url上必须带上#号

2）刷新可以继续留在当前访问的页面

3）域名后面可以加路由

正向代理

vue-cli解决跨域是正向代理

正向代理只能在开发时使用，上线没有用了。原因是开发时的服务是通过nodejs启动的。（发给node代理，node转发请求）

反向代理

nginx解决跨域是反向代理，用在生产环境（拦截前端的请求，转发请求）

举例来说一个web请求走进服务首先会经过nginx，然后由nginx转发到对应的应用服务器。比如你想访问一张图片，你首先进入到nginx，nginx通过你想要的图片路径到对应的图片服务器拿到这张图片，再返回给你。

关于gzip压缩

GZIP是规定的三种标准HTTP压缩格式之一。目前绝大多数的网站都在使用GZIP传输 HTML、CSS、JavaScript 等资源文件。

对于文本文件，GZip 的效果非常明显，开启后传输所需流量大约会降至 1/4 ~ 1/3。

并不是每个浏览器都支持gzip的，如何知道客户端是否支持gzip呢，请求头中的Accept-Encoding来标识对压缩的支持。

启用gzip同时需要客户端和服务端的支持，如果客户端支持gzip的解析，那么只要服务端能够返回gzip的文件就可以启用gzip了,我们可以通过nginx的配置来让服务端支持gzip。

下面的respone中content-encoding:gzip，指服务端开启了gzip的压缩方式。

Nginx静态资源缓存

我们可以开启 Nginx 的静态资源缓存，将一些不变的静态文件，比如图片、CSS、JS 等文件进行缓存，这样在客户端访问这些资源时就不用去访问服务器了，因此响应的速度就可以大幅提升，并且节省了宝贵的服务器资源。

---

https://www.cnblogs.com/tugenhua0707/category/1205593.html

https://juejin.cn/post/6844903793918738440#heading-7