Nginx负载均衡 以及Linux前后端项目部署

简介: Nginx负载均衡 以及Linux前后端项目部署

一、Nginx简介


Nginx是一款高性能的开源Web服务器和反向代理服务器。它由俄罗斯的程序设计师Igor Sysoev创建,旨在解决传统Web服务器的性能限制问题。


Nginx采用事件驱动的架构和异步非阻塞的处理方式,使其能够处理大量并发连接,并具备良好的性能表现。它能够处理静态文件、索引文件以及反向代理等功能,同时也支持HTTP、HTTPS、SMTP、POP3和IMAP等协议。


Nginx的特点包括:


  1. 高性能:Nginx使用异步非阻塞的事件驱动模型,可以更有效地处理并发请求,提供快速响应和高吞吐量。
  2. 轻量级:Nginx的代码量相对较少,占用系统资源少,启动速度快,适合用于低配置的服务器。
  3. 可扩展性:Nginx支持模块化的架构,可以通过第三方模块扩展功能,满足各种需求。
  4. 反向代理:Nginx可以作为反向代理服务器,将客户端的请求转发给后端的多个服务器,并根据配置进行负载均衡,提高系统的稳定性和可靠性。
  5. 高可靠性:Nginx具备优秀的容错能力,可以在大量并发请求中保持稳定的性能。
  6. 简单配置:Nginx的配置文件简洁明了,易于理解和管理。

由于其出色的性能和功能特点,Nginx被广泛应用于各种场景,如静态文件服务、动态Web应用服务、负载均衡、反向代理、缓存加速等。它已经成为互联网架构中重要的组件之一,并得到了全球范围内的广泛使用。


二、Nginx负载均衡


2.1 Nginx的安装

解压服务器中的nginx,我这里之前就下载好了,这里就不做演示了,具体如何将直接下载好的传输到服务器上可以查看我的上一篇文章

d52881024f714bd28cdbe4969fd0a1c0.png

在解压后的nginx目录中,下载四个所需要的依赖

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

5697e33186d549f8a0104ffa39183dc2.png

用于编译和安装 考虑到后续安装ssl证书 添加两个模块

./configure --with-http_stub_status_module --with-http_ssl_module

d90e134c1baa4283976043ae1a906baf.png

make && make install

  • make:这个命令用于编译软件。它会根据 configure 命令生成的配置文件来构建可执行文件。
  • make install:这个命令用于安装编译好的软件。它会将生成的可执行文件、配置文件和其他必要的文件复制到相应的目录中,以便你可以使用该软件。

0bfa00f3e3734fee93bc6541d9c545cf.png

进入编译好的nginx目录

安装好的 nginx 服务在 /usr/local/nginx 下:

进入 /usr/local/nginx/sbin 目录下启动:

# 启动

./nginx

# 重启

./nginx -s reload

# 关闭

./nginx -s stop

f67615f41ca94971ab126ad936733168.png

启动

39ef948e4195403cb5f94493b1dc941d.png

如何查看nginx是否被启动了呢

下载插件

yum install lsof

执行命令:lsof -i:80

d2f773983abe43978851fcb36db7d99e.png

8439f9fe1e0647a4bf27bea19b71a637.png

在配置负载均衡前我们看一下我们的端口是否被放开,并且开放端口号为我们准备服务器做准备


开放端口命令:firewall-cmd --zone=public --add-port=80/tcp --permanent

查看端口命令: firewall-cmd --reload && firewall-cmd --list-port

a767edf3fa1e47cbb09ed55eabc510f4.png

21a7cb2d2306413f8271528e41b90fe3.png

447d6c1d4d894ee480de5b29f34dfe98.png


2.2 Nginx配置服务器负载均衡

什么是服务器负载均衡?

以新浪微博为例子,当某个明星除了某些大瓜,微博可能就会因为用户的访问量,请求次数过多而导致服务器崩溃,如果只有一个服务器,那么就会导致整个网站瘫痪,所以为了防止这种情况,我们就可以搭建一个服务器集群,当其中的一个服务器崩溃之后,还有备用服务器可以使用,这样就大大提高了我们网站的稳定性和高并发性,并且Nginx的作用不只这些,在我们更新服务器静态资源时我们如果在服务器集群中一个一个配置过于麻烦,这时我们可以在集群中配置一个静态资源服务器,在更新资源时我们只需要更新静态资源服务器即可

63c38763a92540ebb5fb84f03ef2611e.png

在配置服务器集群之前,我们需要准备两个服务器用来模拟,端口号分别为8081、8082

a6ff068dab134d0a81483619a57ae436.png

这里服务器我已经更改过了,在哪里更改可以查看我的上一篇文章

580f4891fa614da99212bccd849e207e.png

为了区分,我们在服务器下的webapps/root/index中做个标识

3b0fdc4a94354f329dd5c2ad859a7ae6.png

启动两台服务器

e23b0e44b00e49f8ad2d8c0fe26c4ed5.png

接下来我们到编译好的nginx目录下创建服务器集群

记住一定是/usr/local/nginx/conf/nginx.conf

7e3f18447e2e49db8e80f1beaab5e110.png

将集群作为放入nginx代理 

2523992d491c40e1b28a0ddeedecadeb.png

重启nginx

nginx -s reload

316d9692c21c4dad8693d37a7dc48ffb.png

访问IP测试

image.png

此时我们可以关闭一台服务器来模拟服务器崩溃

43b28fe3b5f24f63b81d489d2c5cf817.png

再次访问ip依然可以发现我们的服务器还是可以访问,这就是负载均衡,强大的Nginx

image.png


三、前端项目打包部署


我们已经知道后端maven打包项目的命令了,今天我们来打包前端的项目

在打包项目之前我们要修改两个地方

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

c5ea5bf90ed54aa58b5d5e75331afbcc.png

问题:使用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)

  }

image.png

在本地测试项目后打包 npm run build

image.png

打包后会在项目的目录下生成一个dist目录,将其压缩

在远程服务器中的usr/local目录下创建一个存放前端项目的文件、

image.png

将压缩包放入,并且解压

下载解压zip的插件   yum install -y unzip

解压命令 unzip 解压文件名

019f843866e643b58dba77f3dea7699a.png

ab28e91f571c4acab216b46fa312a31c.png

在编译后的Nginx中更改Nginx配置文件用来导航路由到前端界面,并且重新配置服务器代理用来区分后端请求,因为后端的请求都带了api,所以我们用正则来验证即可

image.png

接下来我们来访问前端项目,就会直接访问到前端项目中的主页面

image.png

但是此时我们就能用了嘛,也许可以,但是如果有兄弟们的请求是以域名而不是ip为主的话便不行


四、配置域名与ip的映射关系


有的兄弟们买了域名的,请求的地址就会如下

http://www.zking.com/api/T216_SSH

但是如果没有配置域名和ip的映射关系就会出现如下错误

image.png

这个时候我们就需要在测试项目C:\Windows\System32\drivers\etc\hosts中配置映射关系

ab7e779d296f4a9eae444de7a8e01bba.png

centos7中虚拟域名设置

vim /etc/hosts

相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发,帮助IT从业者们通过“阿里云Web应用上云解决方案”,了解一个企业级Web应用上云的常见架构,了解如何构建一个高可用、可扩展的企业级应用架构。
目录
相关文章
|
11月前
|
负载均衡 网络协议 算法
一文读懂什么是Nginx?它能否实现IM的负载均衡?
Nginx(及其衍生产品)是目前被大量使用的服务端反向代理和负载均衡方案,从某种意义上来讲,Nginx几乎是低成本、高负载Web服务端代名词。 如此深入人心的Nginx,很多人也想当然的认为,在IM或消息推送等场景下是否也能使用Nginx来解决负载均衡问题? 另外,即时通讯网的论坛和QQ群里也经常有人问起,Nginx是否能支持TCP、UDP、WebSocket的负载
299 4
|
8月前
|
负载均衡 前端开发 应用服务中间件
Tomcat的负载均衡和动静分离(与nginx联动)
总的来说,负载均衡和动静分离是提高Web应用性能的两个重要手段。通过合理的配置和使用,我们可以让Web应用更好地服务于用户。
259 21
|
8月前
|
负载均衡 Java 应用服务中间件
Tomcat与Nginx的负载均衡与动静分离技巧
总的来说,Tomcat和Nginx各有各的优点,在负载均衡和动静分离这两方面它们都有很好的应用。灵活使用这两个工具能够让Web应用具有更好的扩展性和用户体验。
244 14
|
11月前
|
应用服务中间件 Linux nginx
【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?Web App Linux 默认使用的 Nginx 版本是由平台预定义的,无法更改这个版本。
293 77
|
8月前
|
负载均衡 前端开发 JavaScript
LVS-DR模式、keepalived、Nginx与Tomcat合作,打造动静分离,高效负载均衡与高可用性
为了采用这样的架构,你需要对LVS-DR、Keepalived、Nginx与Tomcat有一定的理解和掌握,同时也需要投入一些时间去研究和配置,但是一旦你把它运行起来,你将会发现,这一切都是值得的。
337 11
|
10月前
|
负载均衡 算法 应用服务中间件
Nginx长连接负载均衡详细说明以及案例
本文详细介绍了Nginx长连接负载均衡的配置与原理。长连接(Keepalive)允许客户端和服务器保持连接,减少建立和关闭连接的开销。Nginx支持多种负载均衡算法,如轮询、IP哈希等。通过在Nginx配置文件中使用`upstream`模块和`keepalive`指令,可以实现长连接负载均衡,从而提高系统的性能和响应速度。示例配置展示了如何设置后端服务器组、长连接数及HTTP/1.1协议,确保连接复用,降低延迟。
604 5
|
10月前
|
负载均衡 应用服务中间件 nginx
如何使用nginx实现负载均衡?
如何使用nginx实现负载均衡?
|
负载均衡 Ubuntu 应用服务中间件
nginx修改网站默认根目录及发布(linux、centos、ubuntu)openEuler软件源repo站点
通过合理配置 Nginx,我们可以高效地管理和发布软件源,为用户提供稳定可靠的服务。
1394 13
|
弹性计算 负载均衡 网络协议
ECS中实现nginx4层7层负载均衡和ALB/NLB原SLB负载均衡
通过本文的介绍,希望您能深入理解并掌握如何在ECS中实现Nginx四层和七层负载均衡,以及如何使用ALB和NLB进行高效的负载均衡配置,以提高系统的性能和可靠性。
832 9
|
负载均衡 算法 应用服务中间件
Nginx的负载均衡
Nginx 是一款高性能的Web服务器与反向代理服务器,支持负载均衡功能,能有效提升系统性能与可靠性。其负载均衡策略包括基于轮询和权重的分配方法,以及IP哈希、最小连接数等算法,可根据实际需求灵活选择。
388 5

热门文章

最新文章