【Linux】Nignx及负载均衡&动静分离
欢迎来到我的CSDN主页！
我是Java方文山，一个在CSDN分享笔记的博主。
推荐给大家我的专栏《微信小程序开发实战》。
点击这里，就可以查看我的主页啦！
Java方文山的个人主页
如果感觉还不错的话请给我点赞吧！
期待你的加入，一起学习，一起进步！
目录
一、Nignx的简介
二、Nignx负载均衡
2.1.安装Nignx
2.1.1.下载并解压安装包
2.1.2.一键安装4个依赖
2.1.3.安装nginx
2.1.4.启动 nginx 服务
2.1.5.设置防火墙开放 80 端口
2.2.准备2个tomcat
2.3.Nginx配置
2.4.部署项目
2.4.1.上传项目war包
2.4.2.启动Tomcat
三、前端项目Linux部署（动静分离）
3.1.上传前端项目
3.2.解压前端
3.3.Nginxp配置
3.4.重启Nginx
3.5.加映射关系
一、Nignx的简介
ginx是一个高性能的开源Web服务器和反向代理服务器，也可以用作负载均衡器、HTTP缓存、邮件代理（IMAP/POP3）等。它最初由俄罗斯的工程师Igor Sysoev开发，并于2004年首次公开发布。
Nginx因其简洁、高效和可靠的特点而备受欢迎。相比传统的Apache服务器，Nginx使用更少的系统资源，可以处理更多的并发连接。它采用事件驱动的异步架构，能够有效地处理高并发请求和大量的并行连接。
Nginx的主要特点包括：
-
高性能：Nginx采用了非阻塞的事件驱动模型，在同等硬件条件下能够处理更多的并发连接，具有出色的性能表现。
-
轻量级：Nginx的代码精简，内存占用较少，启动速度快，适用于资源受限的环境。
-
反向代理：Nginx可以作为反向代理服务器，接收客户端请求并将其转发给后端服务器，实现负载均衡和提高网站性能。
-
静态文件服务：Nginx可以快速、可靠地提供静态文件的访问服务，减轻后端应用服务器的负载。
-
动态内容处理：Nginx提供了强大的模块化架构，可以与各种后端应用服务器（如PHP、Python、Node.js）集成，处理动态内容的访问请求。
-
高可靠性：Nginx具备高度稳定性和可靠性，在大规模的互联网应用中被广泛使用。
二、Nignx负载均衡
2.1.安装Nignx
2.1.1.下载并解压安装包
wget http://nginx.org/download/nginx-1.13.7.tar.gztar -xvf nginx-1.13.7.tar.gz
2.1.2.一键安装4个依赖
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
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 目录下启动：
# 启动
./nginx
# 重启
./nginx -s reload
# 关闭
./nginx -s stop
# 或者，指定配置文件启动
./nginx -c /usr/local/nginx/conf/nginx.conf
虽然已经启动了，但我们也不知道到底启动成功没有。
#下载插件
yum install lsof
#查看Nignx是否启动
lsof -i:80
2.1.5.设置防火墙开放 80 端口
firewall-cmd --zone=public --add-port=80/tcp --permanent
firewall-cmd --reload && firewall-cmd --list-port
能出现一下内容就说明是正常开启Nignx了
2.2.准备2个tomcat
首先需要多开几个端口号供我们Tomcat使用，我这里准备了8080、8081、8082
cp -r apache-tomcat-8.5.20/ apache-tomcat-8.5.20_8081/
#第2个修改的配置如下
1. HTTP端口，默认8080，如下改为8081
2.远程停服务端口，默认8005，如下改为8006
3.AJP端口，默认8009，如下改,8010
这样8081和8080都有了并且可以启动没有问题！！
2.3.Nginx配置
进入到/usr/local/nginx下的conf文件中修改nginx.conf
#服务器的集群
upstream tomcat_list { #服务器集群名字
server 127.0.0.1:8080 weight=1; #服务器1 weight是权重的意思，权重越大，分配的概率越大。
server 127.0.0.1:8081 weight=2; #服务器2 weight是权重的意思，权重越大，分配的概率越大
}
# 重启nginx
./nginx -s reload
这时候直接使用我们的端口号就可进行访问了，如果其中一个端口服务器关闭了，还有另一个服务器供我们使用。
2.4.部署项目
2.4.1.上传项目war包
将我们项目的war包放入两个服务器中
2.4.2.启动Tomcat
http://192.168.37.129:8080/T216_SSH/vue/treeNodeAction.action
能够加载出数据，此时我们的使用Nginx搭载负载均衡就完成了。
三、前端项目Linux部署（动静分离）
首先需要找到一个没有问题的前后端分离的项目
前端使用npm run build进行打包；后端使用Maven构建Java项目mvn clean package
前端项目打包还有两个需要注意的地方：
hbuilderX打包vue项目白屏问题
将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，再打包生成的 dist 文件
build: {
// assetsPublicPath: '/',//修改前
assetsPublicPath: './',//修改后
}
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)
}
3.1.上传前端项目
先在/usr/local/下创建一个文件夹名为mypro
3.2.解压前端
yum install -y unzip
unzip blog.zip
3.3.Nginxp配置
location / {
root /usr/local/mypro/dist;
#proxy_pass http://tomcat_list;
index index.html index.htm;
}
location ^~/api/ {
#^~/api/表示匹配前缀是api的请求，proxy_pass的结尾有/， 则会把/api/*后面的路径直接拼接到后面，即移除api
proxy_pass http://tomcat_list/;
}
3.4.重启Nginx
进入到/usr/local/nginx/sbin中重启Nginx
这时候我们的效果就来了
3.5.加映射关系
C:\Windows\System32\drivers\etc\hosts
因为这里需要的是www.zking.com，我们加的时候就写这个。
这样我们就可以进入了
到这里我的分享就结束了，欢迎到评论区探讨交流！！
如果觉得有用的话还请点个赞吧