Azure React 部署未加载

Question

我正在尝试在 Azure Web 服务上部署 React 应用程序。我按照这篇文章中的所有步骤进行操作，这使我达到了部署标记为成功但无法在天蓝色站点上访问该应用程序的状态。

在下面添加了屏幕截图以供参考

我通过 cli 会话登录到该服务，并检查 wwwroot 文件夹中是否存在数据，该文件夹中确实包含构建文件。

如果你们中的任何人可以帮助我部署此功能，我将非常感激

--- 更新 ----

应用程序日志流显示以下内容

正在连接到日志流... 2024-09-02T10:58:05 欢迎，您现在已连接到日志流服务。 启动 Log Tail -n 10 条现有日志 ---- /appsvctmp/易失性/日志/运行时/container.log 2024-08-30T17:55:04.0960916Z 在 System.Net.Http.HttpClient.g__Core|83_0(HttpRequestMessage 、 HttpCompletionOption 、 CancellationTokenSource 、 Boolean 、 CancellationTokenSource 、 CancellationToken ) 2024-08-30T17：55：04.0960941Z 在 Microsoft.AspNetCore.Proxy.ProxyMiddleware.Invoke（HttpContext 上下文） 2024-08-30T17：55：04.0960967Z在Kudu.Services.Web.Tracing.TraceMiddleware.Invoke（HttpContext上下文）在/tmp/KuduLite/Kudu.Services.Web/Tracing/TraceMiddleware.cs：第107行 2024-08-30T17：55：04.1259705Z [41m [30mfail [39m [22m [49m：Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware1 2024-08-30T17:55:04.1261136Z 执行请求时发生未处理的异常。 2024-08-30T17:55:04.1261175Z System.IO.IOException：响应提前结束。 2024-08-30T17：55：04.1261328Z 在 System.Net.Http.HttpConnection.SendAsyncCore（HttpRequestMessage ，布尔值，CancellationToken ） 2024-08-30T17：55：04.1261374Z在Kudu.Services.Web.Tracing.TraceMiddleware.Invoke（HttpContext上下文）在/tmp/KuduLite/Kudu.Services.Web/Tracing/TraceMiddleware.cs：第107行 2024-08-30T17：55：04.1261430Z 在 Microsoft.AspNetCore.ResponseCompression.ResponseCompressionMiddleware.InvokeCore（HttpContext 上下文） 2024-08-30T17：55：04.1261456Z在Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware.g__Awaited | 6_0（ExceptionHandlerMiddleware中间件，HttpContext上下文，任务任务） 现有日志的结束日志尾部 --- 开始实时日志流 ---

Answer 1

我相信您尚未正确配置 Azure 应用服务来托管静态 Web 应用程序。

首先，Azure 应用服务对于静态 Web 应用程序来说并不是真正的理想选择（您编译的 React 应用程序本质上就是这样）。您确实应该考虑使用 Azure 静态 Web 应用程序。例如，这些旨在托管使用 React 开发的前端。

如果价格是一个因素，您还可以考虑使用静态 Web 选项在 Azure 存储帐户上托管网站。然后，您可以简单地使用顶部的 Azure CDN 来处理 HTTPS 证书、默认页面（索引）、自定义域、缓存等。

如果您决定坚持使用 Azure 应用服务，您应该能够通过将应用服务的运行时环境更改为 Node 来让您的 React 应用程序正常工作。

您可以通过前往 Azure 门户，然后转到应用服务来执行此操作。进入后，您需要前往右侧面板中的“设置”-->“配置”。到达那里后，选择 Node 作为堆栈。