vue.js - 在 Nginx 上部署 Vue3 + Vite + TypeScript 应用后间歇性出现 HTTP 502 Bad Gateway 错误

我正在使用 Vue3 + Vite + TypeScript 构建一个 Web 应用程序。运行 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 错误期间观察到的任何偏差或问题。根据此参考提供的见解和建议将非常有价值。谢谢。\n\n在此输入图片描述

我联系您是想寻求指导，了解从哪里开始排查问题，以及我对网络带宽的怀疑是否成立。任何指导或建议都将不胜感激。

答案＃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
    }
}