nginx配置负载均衡一文解决

以下是使用Nginx部署Vue项目并配置负载均衡的详细步骤:


一、部署Vue项目到单个Nginx服务器

  1. 构建Vue项目

    arduino 复制代码
    npm run build

    生成静态文件在 dist 目录。

  2. 上传文件到服务器 将 dist 目录上传至服务器,例如 /var/www/vue-app。

  3. 安装Nginx

    sql 复制代码
    sudo apt update && sudo apt install nginx
  4. 配置Nginx站点

    • 创建配置文件 /etc/nginx/sites-available/vue-app:

      bash 复制代码
      server {
          listen 80;
          server_name your_domain.com;  # 替换为域名或IP
      
          root /var/www/vue-app/dist;
          index index.html;
      
          location / {
              try_files $uri $uri/ /index.html;
          }
      
          # 可选:代理后端API请求
          location /api {
              proxy_pass http://backend_server;
              proxy_set_header Host $host;
              proxy_set_header X-Real-IP $remote_addr;
          }
      }
    • 启用配置:

      bash 复制代码
      sudo ln -s /etc/nginx/sites-available/vue-app /etc/nginx/sites-enabled/
      sudo nginx -t  # 检查配置
      sudo systemctl reload nginx

二、配置Nginx负载均衡

假设有2台后端服务器运行Vue应用(IP: 192.168.1.101 和 192.168.1.102)。

  1. 在负载均衡器上配置Upstream

    • 修改Nginx配置(如 /etc/nginx/nginx.conf 或新建文件):

      ini 复制代码
      http {
          upstream vue_servers {
              # 定义后端服务器列表和负载策略
              server 192.168.1.101:80 weight=3;  # 权重3,处理更多请求
              server 192.168.1.102:80;
              server 127.0.0.1:8000 backup;     # 备份服务器,主服务器宕机时启用
      
              # 可选策略:least_conn(最少连接)、ip_hash(会话保持)
              # least_conn;
              # ip_hash;
          }
      
          server {
              listen 80;
              server_name loadbalancer.example.com;
      
              location / {
                  proxy_pass http://vue_servers;
                  proxy_set_header Host $host;
                  proxy_set_header X-Real-IP $remote_addr;
                  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              }
          }
      }
  2. 应用配置并重启Nginx

    复制代码
    sudo nginx -t
    sudo systemctl restart nginx

三、验证负载均衡

  1. 访问负载均衡器IP/域名

    arduino 复制代码
    curl http://loadbalancer.example.com

    多次请求会分发到不同后端服务器。

  2. 查看Nginx日志

    • 负载均衡器日志:/var/log/nginx/access.log
    • 后端服务器日志:检查请求是否均衡分配。

四、可选优化

  1. 健康检查

    ini 复制代码
    upstream vue_servers {
        server 192.168.1.101 max_fails=3 fail_timeout=30s;
        server 192.168.1.102 max_fails=3 fail_timeout=30s;
    }
    • max_fails: 允许失败次数
    • fail_timeout: 服务器标记为不可用的时间
  2. 启用HTTPS

    • 使用Let's Encrypt生成证书并配置SSL:

      ini 复制代码
      listen 443 ssl;
      ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
      ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;
  3. 静态文件缓存

    bash 复制代码
    location / {
        try_files $uri $uri/ /index.html;
        expires 30d;  # 客户端缓存静态资源
    }

注意事项

  • 确保所有后端服务器的Vue应用版本一致。
  • 若使用会话保持(如ip_hash),确保后端服务无状态。
  • 防火墙需放行负载均衡器和后端服务器的端口(如80/443)。

通过以上步骤,您已成功部署Vue项目并配置了Nginx负载均衡,提升了应用的可用性和性能。

相关推荐
谢亮_vipxieliang39 分钟前
一套 Compose 搭起完整开发环境:MySQL + Redis + Nginx
redis·mysql·nginx·docker
xbzb1 小时前
Nginx 反向代理总 404?Location 匹配与 proxy_pass 尾斜杠避坑手册
linux·运维·nginx·虚拟主机
ShayneLee81 小时前
Nginx只开一个端口!能做什么?(一)
运维·nginx
天衍四九-1 小时前
Docker Compose企业实战系列(一):LNMP环境一键部署(Nginx\+MySQL\+PHP)
mysql·nginx·docker
PC2005-cloud1 天前
Nginx 学习笔记:Server 块配置详解,域名路由与多站点部署实战
nginx
zach1 天前
Vue/React SPA 打包部署后,子路由刷新 401 未登录问题彻底解决
前端·nginx·next.js
yume_sibai1 天前
02-Nginx进阶配置完全指南(性能优化 + 安全配置 + 缓存配置 + WebSocket代理)
nginx·安全·性能优化
阿狗童鞋1 天前
Nginx反向代理与负载均衡实战指南
运维·nginx·负载均衡
Lsetea1 天前
OpenSSL verify报error 20:CAfile、fullchain与本地信任链分层排查
nginx·https·ssl证书·openssl·证书链
qq_394562002 天前
【在Linux上升级nginx】
linux·服务器·nginx