Vite 代理与 Nginx 代理：开发与生产环境的配置差异

✅ 优势：改完即生效（HMR 友好）、零环境依赖、前端同学秒上手 ⚠️ 局限：仅转发请求，无缓存/限流/日志等能力

Nginx 代理（nginx.conf 片段）

server {
  listen 443 ssl;
  server_name app.example.com;

  # 前端静态资源（Vite build 产物）
  location / {
    root /data/dist;
    try_files $uri $uri/ /index.html;
    gzip on; # 启用压缩
  }

  # API 代理 + 安全加固
  location /api/ {
    proxy_pass http://backend_cluster; # 指向 upstream
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_buffering on; # 启用缓冲提升性能
    proxy_connect_timeout 5s;
  }

  # 负载均衡集群
  upstream backend_cluster {
    least_conn;
    server 10.0.1.10:3000 max_fails=3;
    server 10.0.1.11:3000 backup;
  }

  # SSL 配置（生产必备）
  ssl_certificate /path/to/cert.pem;
  ssl_certificate_key /path/to/key.pem;
}

✅ 优势：负载均衡、HTTPS 终止、缓存、限流、WAF 集成、详细日志 ⚠️ 注意：配置需 reload 生效，需运维知识

三、典型场景还原

场景 1：本地开发调用测试环境 API

• 正确做法：Vite 配置 proxy 指向测试环境 → 前端代码写 /api/user，浏览器无跨域，开发流畅
• 错误做法：硬编码完整 URL（http://test-api...） → 触发 CORS，或需后端改配置，效率低下

场景 2：项目上线部署

• 正确流程：
  1. vite build 生成 dist
  2. Nginx 托管 dist + 代理 API 至内网后端
  3. 配置 HTTPS、缓存策略、监控告警
• 致命错误： ❌ 直接 npm run dev 挂公网（Vite Dev Server 无安全防护！） ❌ 用 Vite proxy 配置替代 Nginx（开发配置无法处理生产流量）

四、高频误区澄清

五、最佳实践清单

✅ 开发阶段

• 用 Vite proxy 解决跨域，专注业务逻辑
• 通过环境变量区分 API 地址（.env.development）
• 复杂项目可选：Docker Compose 搭本地 Nginx 模拟生产链路（非必需）

✅ 生产阶段

1. 构建：vite build 生成静态资源
2. 部署：Nginx 托管 dist 目录
3. 代理：Nginx 配置 API 转发（指向内网后端，绝不暴露后端公网 IP）
4. 增强：启用 Gzip、Brotli 压缩；配置缓存头；接入 CDN
5. 安全：HTTPS 强制跳转；隐藏 Server 头；设置限流

✅ 协作建议

• 前端：维护 vite.config.js（开发代理）
• 运维/后端：维护 Nginx 配置（生产代理）
• 文档：在 README 明确标注'开发代理配置'与'生产部署要求'

结语

代理技术没有高下之分，只有场景适配： 🔹 Vite 代理 = 开发加速器——让前端同学秒级解决跨域，心无旁骛写代码 🔹 Nginx 代理 = 生产压舱石——为线上服务筑起性能与安全的护城河

牢记：

开发时拥抱 Vite 的便捷，生产时敬畏 Nginx 的严谨。 混淆边界，轻则效率低下，重则引发线上事故。

下次配置代理前，先问自己： ❓'这是在本地调试，还是在部署线上？' 答案，就是选择的起点。

延伸阅读

• Vite 官方 Proxy 配置
• Nginx 反向代理最佳实践
• 附：小项目快速部署？试试 Caddy —— 自动 HTTPS + 简洁配置，Nginx 的轻量替代方案

本文配置示例需结合实际环境调整，生产部署前务必进行安全与压力测试。