【Linux】Nignx的入门使用负载均衡前端项目部署---超详细

news2024/11/27 3:56:44

一，Nignx入门

1.1 Nignx是什么

Nginx是一个高性能的开源Web服务器和反向代理服务器。它使用事件驱动的异步框架，可同时处理大量请求，支持负载均衡、反向代理、HTTP缓存等常见Web服务场景。Nginx可以作为一个前端的Web服务器，也可以作为反向代理服务器，将客户端的请求转发给后端的应用服务器。它还支持灵活的模块化设计，可以通过添加不同的模块来实现各种各样的功能。

1.2 Nignx优点

高性能和高并发。Nginx采用事件驱动的方式来实现高并发处理，这使得它可以处理数千个并发连接而不会影响其性能。

轻量级和资源利用率低。Nginx具有非常小的内存占用和CPU利用率，这使得它在资源受限的环境下运行非常出色

高可靠性和稳定性。Nginx被广泛使用在大型互联网企业中，已经被证明可以在高负载和恶劣的环境中保持稳定和可靠

1.3 Nignx应用场景

Web服务器。Nginx可以作为一个前端的Web服务器，提供高性能和稳定的Web服务

反向代理服务器。Nginx可以通过反向代理来实现负载均衡和高可用性，这使得它非常适用于流量高峰期和服务器集群

缓存服务器。Nginx支持HTTP缓存，可以将静态文件和动态页面缓存到内存中，从而提高访问速度和效率

安全性控制。Nginx支持基于IP地址、HTTP头、请求方法等多种方式进行访问控制和安全性管理

二，Nginx负载均衡

2.1 Nuinx的安装

11)一键安装4个依赖

命令执行：yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

2）下载并解压安装包
下载命令：wget http://nginx.org/download/nginx-1.13.7.tar.gz
解压命令：tar -xvf nginx-1.13.7.tar.gz (如下)

3）安装nginx
# 先进入安装包目录
命令：cd nginx-1.13.7

# 编译，执行配置: 考虑到后续安装ssl证书添加两个模块
命令: ./configure --with-http_stub_status_module --with-http_ssl_module

yum install lsof

# 安装
命令：make && make install

4)启动 nginx 服务
安装好的 nginx 服务在 /usr/local/nginx 下：

进入 /usr/local/nginx/sbin 目录下启动：
# 启动
命令： ./nginx

5) 设置防火墙开放 80 端口
firewall-cmd --zone=public --add-port=80/tcp --permanent

查看开放端口号
firewall-cmd --reload && firewall-cmd --list-port

最后网址填写虚拟机地址访问Nuinx

以下步骤借鉴即可，不操作

# 重启
./nginx -s reload

# 关闭
./nginx -s stop

# 或者，指定配置文件启动
./nginx -c /usr/local/nginx/conf/nginx.conf

其它：
yum install lsof
lsof -i:80
kill -9 pid

2.2 tomcat负载均衡

① 准备2个tomcat（还有一个自行创建）
cp -r apache-tomcat-8.5.20/ apache-tomcat-8.5.20_8081/

② 修改端口号

为了两个tomcat端口号不一致，我们需要更改一个tomcat的端口号

命令：firewall-cmd --zone=public --add-port=8082/tcp --permanent （名为一个8081的端口）

输入命令 : firewall-cmd --reload （ #更新防火墙规则）

输入命令 : firewall-cmd --zone=public --list-ports （查看端口是否开放完成）

输入命令 : cd apache-tomcat-8.5.20/conf/ （进入conf目录）

输入命令 : vim server.xml （修改配置端口）

按 i 进入编辑模式将Connector标签中的port属性改成8081具体步骤看下面红字

1. HTTP端口，默认8080，如下改为8081
2.远程停服务端口，默认8005，如下改为8006
3.AJP端口，默认8009，如下改,8010

再按Esc退出编辑模式，再输入 :wq 保存并且退出

③ 开启两个tomcat

依次两个tomcat文件的bin目录下，输入 ./startup.sh 启动tomcat

最后打开浏览器访问不同的tomcat

8082

8081

2.3 Nginx配置

进入nginx/conf/文件下，双击打开修改nginx.conf文件内容

内容：

#服务器的集群
upstream tomcat_list { #服务器集群名字
server 127.0.0.1:8081 weight=1; #服务器1 weight是权重的意思，权重越大
server 172.17.0.4:8082 weight=2; #服务器2 weight是权重的意思，权重越大，分配的概率越大
}

具体修改步骤看下图

修改完毕之后，进入nginx文件的sbin目录下

重启命令：./nginx -s reload

这时候直接使用我们的端口号就可进行访问了，如果其中一个端口服务器关闭了，还有另一个服务器供我们使用。如下

2.4 部署项目

① 将项目的war包放入两个服务器中(tomcat/webapps目录下)，

② tomcat启动

在进入tomcat/bin目录下使用命令： ./startup.sh 启动

能够加载出数据，此时我们的使用Nginx搭载负载均衡就完成了。

三，前端项目的部署

1.1 导包(两个问题)

① 将前端项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”

②在使用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

1.2 上传前端项目

创建一个文件夹名为mypro文件夹，以便存储项目

将所需要的项目鼠标移动进去

1.3 解压前端项目

这个是未解压的文件夹，我们需要把它解压，需要用到命令（要进入我们刚创建的文件夹中解压）

并且选中zip解压的命令：yum install -y unzip

开始解压的命令： unzip blog.zip (.zip前面的是所解压包的名称)

1.4 Nginxp配置

找到nginx.conf文件进行编辑。输入命令 : cd /usr/local/nginx/conf/

       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/;
      	}