
🎉🎉欢迎来到我的CSDN主页!🎉🎉
🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚
🌟推荐给大家我的专栏《微信小程序开发实战》。🎯🎯
👉点击这里,就可以查看我的主页啦!👇👇
🎁如果感觉还不错的话请给我点赞吧!🎁🎁
💖期待你的加入,一起学习,一起进步!💖💖

目录
[2.1.4.启动 nginx 服务](#2.1.4.启动 nginx 服务)
[2.1.5.设置防火墙开放 80 端口](#2.1.5.设置防火墙开放 80 端口)
一、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.gz
tar -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,我们加的时候就写这个。

这样我们就可以进入了

到这里我的分享就结束了,欢迎到评论区探讨交流!!
💖如果觉得有用的话还请点个赞吧 💖
