Nginx简介，Nginx搭载负载均衡以及Nginx部署前端项目
目录
一. Nginx简介
Nginx的优点
二. Nginx搭载负载均衡
2.1 Nginx安装
2.1.1 安装依赖
2.1.2 解压nginx安装包
2.1.3 安装nginx
2.1.4 启动nginx服务
2.2 tomcat负载均衡
2.3 Nginx配置
三. Nginx前端部署
一. Nginx简介
NGINX（读作：engine-x）是用于 Web 服务、反向代理、内容缓存、负载均衡、媒体流传输等场景的开源软件。
它最初是一款专为实现最高性能和稳定性而设计的 Web 服务器。除了 HTTP 服务器功能以外，NGINX 还可用作电子邮件（IMAP、POP3 和 SMTP）的代理服务器以及 HTTP、TCP 和 UDP 服务器的反向代理与负载均衡器。
尽管 NGINX 以“最快的 Web 服务器”而闻名，但由于 NGINX 可以处理大量的连接，因此它通常被用作反向代理和负载均衡器，以管理入向流量并将其分发到较慢的上游服务器，包括传统数据库服务器和微服务。
NGINX 还经常位于客户端和第二个 Web 服务器之间，用作 SSL/TLS 卸载器或 Web 加速器。作为中介服务器，NGINX 能够高效处理可能降低 Web 服务器速度的任务，例如协商 SSL/TLS 或压缩和缓存内容以提高性能。
无论是使用 Node.js 还是 PHP 等技术构建的动态站点，通常都将 NGINX 部署为内容缓存和反向代理，以减少应用服务器上的负载并最高效地利用底层硬件。
Nginx的优点
- 作为Web服务器，Nginx处理静态文件、索引文件，自动索引的效率非常高。
- 作为代理服务器，Nginx可以实现无缓存的反向代理加速，提高网站运行速度。
- 作为负载均衡服务器，Nginx既可以在内部直接支持Rails和PHP，也可以支持HTTP代理服务器对外进行服务，同时还支持简单的容错和利用算法进行负载均衡。
- Nginx是专门为性能优化而开发的，在实现上非常注重效率。它采用内核Poll模型，可以支持更多的并发连接，最大可以支持对50000个并发连接数的响应，而且只占用很低的内存资源。
- Nginx采取了分阶段资源分配技术，使得CPU与内存的占用率非常低。Nginx官方表示，Nginx保持10000个没有活动的连接，而这些连接只占用2.5MB内存，因此，类似DOS这样的攻击对Nginx来说基本上是没有任何作用的。宕机的概率非常小。
本篇我将着重介绍负载均衡以及动静分离。
二. Nginx搭载负载均衡
负载均衡（Load Balance）其意思就是分摊到多个操作单元上进行执行，例如Web服务器、FTP服务器、企业关键应用服务器和其它关键任务服务器等，从而共同完成工作任务。
2.1 Nginx安装
2.1.1 安装依赖
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
2.1.2 解压nginx安装包
tar -xvf nginx-1.13.7.tar.gz
2.1.3 安装nginx
# 进入安装包目录
cd nginx-1.13.7
# 编译，执行配置: 考虑到后续安装ssl证书 添加两个模块
./configure --with-http_stub_status_module --with-http_ssl_module
# 安装
make && make install
2.1.4 启动nginx服务
安装好的 nginx 服务在 /usr/local/nginx 下
进入 /usr/local/nginx/sbin 目录下启动：cd /usr/local/nginx/sbin
# 启动
./nginx
安装lsof，查看服务是否开启
yum install -y lsof
80端口已经在使用
这里外部还不能访问80端口，要设置防火墙开放80端口
设置防火墙开放 80 端口
firewall-cmd --zone=public --add-port=80/tcp --permanent查看开放的端口列表
firewall-cmd --reload && firewall-cmd --list-port
nginx服务开启成功
2.2 tomcat负载均衡
#准备2个tomcat
cp -r apache-tomcat-8.5.20/ apache-tomcat-8.5.20_8081/
为了避免端口号发生冲突，将第二个tomcat下的端口号都加一
进入第二个tomcat下的conf文件夹中： cd apache-tomcat-8.5.20_8081/conf/
修改server.xml： vim server.xml
- 1. HTTP端口，默认8080，改为8081
- 2.远程停服务端口，默认8005，改为8006
- 3.AJP端口，默认8009，改为8010
这里为了演示效果，将tomcat8081的静态页面进行改动
#测试访问
http://192.168.19.129:8080/
http://192.168.19.129:8081/
2.3 Nginx配置
在/usr/local/nginx/conf/nginx.conf中
配置之前
配置之后
配置完成后，进入sbin目录下，重启nginx服务
#重启服务
./nginx -s reload
完成后，在浏览器输入服务器的ip地址就可以访问8080和8081的内容
三. Nginx前端部署
#将前端项目打包，生成dist文件夹，点击index.html访问项目测试
npm run build
生成dist文件夹
注意1：hbuilderX打包vue项目白屏问题
将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，再打包生成的 dist 文件
build: {
// assetsPublicPath: '/',//修改前
assetsPublicPath: './',//修改后
}
注意2：hbuilderX打包vue项目，element-ui的icon图标无法正常显示问题
问题：使用vue-cli3脚手架搭建的项目，在打包文件上服务器的时候，其他的css，js样式都能正确加载出路径，
但是element的icon图标却不能正常加载出来。问题分析：
加载的路径https://yxq.linksign.cn/static/css/static/fonts/element-icons.535877f.woff
本应该加载的路径https://yxq.linksign.cn/static/fonts/element-icons.535877f.woff
打包的路径
事实上是打包时候读取的文件路径多了两层；
找到build文件的utils.js 中有打包的路径，看看generateLoaders();
Extract CSS when that option is specified, 指定该选项时提取CSS
发现少了个公共路径，加上pubilcPath
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
// 解决icon路径加载错误
publicPath:'../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
在 /usr/local文件夹下 新建一个文件夹mypro 存放dist文件夹
如果是放入zip压缩包 ：
yum install -y unzip
unzip ...
在 C:\Windows\System32\drivers\etc\hosts中增加映射关系
192.168.19.129 www.zking.com
增加前
增加后
这里映射改不了，也可以选择在前端项目的action.js中更改配置再重新打包
代理配置 在/usr/local/nginx/conf/nginx.conf中
保存后进入sbin目录下，重启nginx服务
