前后端分离项目使用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. 简单创建两个发布目录 webpage-1 和 webpage-2,每个目录只放置包含简单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, 将两个网站发布一下。分别访问localhost:8081,localhost:8082,以确保网站发布成功。
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 }
2-3. 配置Nginx负载均衡(在以上配置文件基础上增加以下upstream节点和Server节点配置),多次访问localhost:8080,可以发现显示内容不同。
1 upstream Webpages { 2 server localhost:8081; 3 server localhost:8082; 4 } 5 6 server { 7 listen 8080; 8 server_name localhost; 9 location / { 10 proxy_pass http://Webpages; 11 } 12 }
3. 后端项目配置负载均衡
后端项目(Asp.Net Core WebApi) 不能直接使用Nginx作为Web服务器,需要先使用IIS、Kestrel部署多个实例,或者把项目部署成服务。然后才能使用Nginx配置负载均衡。即和前端项目相比,nginx不需要像2-2节点那样配置具体的后端服务。
3-1. 假设我们已经使用IIS部署了三个Web API,分别为:localhost:8087,localhost:8088,localhost:8089。和上面2-3节类似的,只需在配置文件中相应增加upstream节点和Server节点即可。
upstream WebApi { server localhost:8087; server localhost:8088; server localhost:8089; } server { listen 8090; server_name localhost; location / { proxy_pass http://WebApi; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
4. Nginx官方文档中的一些其他常用参考
4. nginx books
5. FAQ