前后端分离项目使用Nginx配置负载均衡

其实Nginx官方文档有一篇文章专门介绍如何配置负载均衡,见: Using nginx as HTTP load balancer, 非常详细。这篇博客主要结合前后端异构项目(Asp.Net Core WebApi + Angular/Vue/React等),简单总结一下Nginx使用及心得。

1. 下载安装启动Nginx

从官方网站https://nginx.org/en/download.html下载Nginx,需要注意的是:Nginx提供Mainline, Stable, Legacy三个分类版本,学习最新特性用Mainline,生产环境一般用Stable,如有具体版本要求(老版本),可以在Legacy中找到需要的版本,关于版本的更多细参考: NGINX Versioning Explained。至于安装启动,可以参考官方文档:Linux安装Windows安装及启动

2. 前端项目配置负载均衡

使用Angular/Vue/React等作为前台项目, 可以使用Nginx作为Web服务器,对同一个项目多部署几个实例,然后按照官方文档配置负载均衡即可。

2-1. 简单创建两个发布目录,每个目录只放置简单Html标签及内容的index.html文件,模拟Angular/Vue/React等作为前台发布。为了便与观察,两个目录下的index.html稍有不同。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Web Pages - 1</title>
 7 </head>
 8 <body>
 9     <h1>Web Pages - 1</h1>
10 </body>
11 </html>

2-2. 打开Nginx配置文件,修改如下(已删除其他与本主题不相干配置项),重启Nginx, 将两个网站发布一下。

 1 server {
 2         listen       8081;
 3         server_name  localhost;
 4         location / {
 5             # 请注意,虽然Window目录路径使用反斜杠(\),但配置文件中的路径必须替换为UNIX样式的正斜杠(/)
 6             root   c:/wwwroot/webpage-1;
 7             index  index.html index.htm;
 8         }
 9     }
10 
11     server {
12         listen       8082;
13         server_name  localhost;
14         location / {
15             root   c:/wwwroot/webpage-2;
16             index  index.html index.htm;
17         }
18     }

3. 后端项目配置负载均衡

后端项目(Asp.Net Core WebApi) 不能直接使用Nginx作为Web服务器,需要先使用IIS、Kestrel部署多个实例,或者把项目部署成服务,然后才能使用Nginx配置负载均衡。

 3-1. 假设我们已经使用IIS部署了三个Web API,分别为:localhost:8087,localhost:8088,localhost:8089。和上面类似的,只需在配置文件中相应增加upstream节点和Server节点即可。

 1 upstream WebApi {
 2         server localhost:8087;
 3         server localhost:8088;
 4         server localhost:8089;
 5     }
 6 
 7     server {
 8         listen       8090;
 9         server_name  localhost;
10 
11         location / {
12             proxy_pass http://WebApi;
13         }
14 
15         error_page   500 502 503 504  /50x.html;
16         location = /50x.html {
17             root   html;
18         }
19     }

参考:https://www.cnblogs.com/makesense/p/13124471.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值