Vite與Nginx在生產環境和開發環境中的角色

簡單來說，就是打包之后vite就沒有用了，直接就是nginx轉發了

1. 開發環境：Vite代理起主導作用

• Vite開發服務器：運行npm run dev時，Vite會啟動一個開發服務器
• 代理配置生效：vite.config.js中的server.proxy配置會：
  • 攔截前端發往/dev-api或/api的請求
  • 將這些請求轉發到baseUrl指定的后端地址
  • 可選地重寫URL路徑（如去掉/dev-api前綴）
• 熱更新支持：Vite提供實時熱重載(HMR)功能

2. 生產環境：Nginx接管所有請求

• 靜態資源服務：
  • 執行npm run build后生成純靜態文件(dist目錄)
  • 這些文件不包含任何代理邏輯
  • Nginx直接提供這些靜態文件服務
• API請求處理：
  • 前端代碼中的相對路徑請求(如/api/user)會直接發往當前域名
  • Nginx根據配置的location規則攔截這些請求
  • Nginx將請求轉發到真實的后端服務器

3. 關鍵區別對比表

4. 實際工作流程示例

開發時流程：

text

瀏覽器 -> http://localhost:3000/api/login
       ↓ (被Vite攔截)
Vite開發服務器 -> 根據proxy配置轉發到 http://localhost:8080/login

生產環境流程：

text

瀏覽器 -> https://your-domain.com/api/login
       ↓ (被Nginx攔截)
Nginx -> 根據location規則轉發到 http://backend-service:8080/login

5. 為什么這樣設計？

1. 關注點分離：
   • 開發環境：側重開發體驗(熱更新、快速反饋)
   • 生產環境：側重性能、安全和穩定性
2. 環境一致性：
   • 生產環境使用相對路徑(/api)避免硬編碼域名
   • 相同的請求路徑在開發和生產環境都能工作
3. 部署靈活性：
   • 后端地址變更只需修改Nginx配置
   • 無需重新構建前端應用
   • 方便實現藍綠部署、金絲雀發布等高級部署策略
4. 性能優化：
   • 生產環境Nginx可啟用gzip、緩存等優化
   • 靜態文件由專業web服務器處理效率更高

6. 注意事項

1. 路徑一致性：

   • 確保開發和生產環境使用相同的API前綴(如都使用/api)
   • 避免開發用/dev-api而生產用/api的情況

2. CORS問題：

   • 開發環境：由Vite代理處理，天然避免跨域
   • 生產環境：確保Nginx正確設置CORS頭(如果需要)

3. WebSocket代理：

   nginx

   location /api/ws {
       proxy_pass http://backend-service:8080/ws;
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection "upgrade";
   }
   

這種架構設計是現代前端開發的標配，既保證了開發體驗，又確保了生產環境的靈活性和性能。