vue.js - 在 Nginx 上部署 Vue3 + Vite + TypeScript 應用後間歇性出現 HTTP 502 Bad Gateway 錯誤

我正在使用 Vue3 + Vite + TypeScript 來構建一個網頁應用程式。運行 npm run build 後，應用程式已成功打包到 'dist' 文件夾中。然後，我將此文件夾上傳到 Linux 伺服器，並使用 Nginx 進行托管。然而，在瀏覽器中訪問網站時，有時會遇到失敗。刷新頁面可能會解決此問題，並且這似乎主要發生在首次頁面加載時。我懷疑，一旦成功訪問後，後續的頁面加載會使用瀏覽器的快取。

當頁面無法加載時，會觀察到兩種類型的問題：

快速顯示「此頁面無法使用 - www.MyDomain.com 目前無法處理此請求。HTTP 錯誤 502」。在這種情況下，「網路」標籤僅顯示「www.MyDomain.com」的一個條目，狀態為 502 Bad Gateway。

頁面仍然是空白的，且在「網路」標籤中有多個條目。

在訪問一個或多個 xxx.js 或 xxx.css 文件時會發生錯誤，並顯示相同的 502 Bad Gateway 狀態。例如，如果我的頁面有一個名為 'index.vue' 的組件，運行 'npm run build' 後，它會生成 'Index-_8-g66I0.css' 或 'index-eurAr4hJ.js'。在初始頁面加載期間，瀏覽器可能會將這些文件以紅色顯示，並伴隨 502 Bad Gateway 錯誤。

我想了解這個問題可能源自哪裡，以及如何進行故障排除。

Linux CentOS 7 nginx 版本：nginx/1.20.1 在此輸入圖片描述

我是一名初學程式設計的人，尚未嘗試太多。我懷疑問題可能與網路頻寬有關，考慮到我的伺服器配置：2 核心、2GB 記憶體，以及 4Mbps 頻寬。

參考：正常情況下 F12 網路請求截圖\n\n我已附上一張 F12 開發者工具網路標籤的截圖，截取於正常且成功的頁面加載過程中。此參考圖片用於說明網路請求在最佳條件下的預期行為。我希望這能幫助識別在間歇性 HTTP 502 錯誤中觀察到的任何偏差或問題。根據此參考提供的見解和建議將非常有價值。謝謝。

我正在尋求指導，想了解從哪裡開始排查問題，以及我對網路頻寬的懷疑是否合理。任何指導或建議都將不勝感激。

答案＃1

我也遇到過這個問題，而最終讓我走上正確道路的是 N.Chipper 的回答，但我想補充一個警告。

他的 NGINX 範例無法運作，因為那裡的重試次數並不像舉例的那樣重複 10 次。他們所做的是將請求轉發到下一個伺服器。有一些不太正規的方法可以透過在 NGINX 內部引用 NGINX 來形成無限迴圈，然後再進行限制，但這並不理想，而且你對超時的控制較少。

在 Traefik 中也無效。他們在文件中是這麼說的：只要伺服器回應，中介軟體就會停止重試，無論回應狀態為何。

所以如果伺服器回應 502，它就會將其轉發出去。

唯一有效的解決方法是那裡提供的 Caddy 範例。

答案＃2

對於任何遇到類似問題的人來說。解決方法非常簡單，但也相當愚蠢。

你需要做的事情是確保代理的 HTTP 伺服器（例如 NGINX、Apache 或 Caddy）能自動重試失敗的 502 請求。因為 Vite 伺服器似乎無法處理大量的流量/連接等。

NGINX 範例：

location / {
            proxy_pass http://service:5173;

            # Retry conditions (e.g., errors, timeouts, etc.)
            proxy_next_upstream error timeout http_500 http_502 http_503 http_504;

            # Limit the number of retries (default is 0)
            proxy_next_upstream_tries 10;

            # Timeout for a response from the backend server
            proxy_connect_timeout 5s;
            proxy_read_timeout 10s;
            proxy_send_timeout 10s;

            # Optionally, enable caching for unsuccessful responses
            proxy_cache_revalidate on;
        }

Caddy 範例（當我使用這個時）

domain.local {
    reverse_proxy {
        to service:5173
        header_up Host {labels.1}.{labels.0}
        header_up X-Forwarded-Host {labels.1}.{labels.0}

        # Try for 30 seconds with an interval between retries of 1 second
        lb_try_duration 30s
        lb_try_interval 1s
    }
}