如何使用 Visual Studio 代码中的 Azure App Service 插件将 React 部署到 Azure Web App？

Question

我尝试关注许多现有的在线问题和博客，但我无法让它工作，我已经使用此设置创建了一个简单的 React 应用程序：

它运行在当地很好。我也运行 “npm 运行构建”。我还在我的 public 文件夹中添加了一个 web.config，它被复制到我的构建文件夹中，内容如下：

<?xml version="1.0"?>    
<configuration>    
    <system.webServer>    
        <httpErrors errorMode="Detailed"></httpErrors>
        <rewrite>    
            <rules>    
                <rule name="React Routes" stopProcessing="true">    
                    <match url=".*" />    
                    <conditions logicalGrouping="MatchAll">    
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />    
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />    
                    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />    
                    </conditions>    
                    <action type="Rewrite" url="/" />    
                </rule>    
            </rules>    
        </rewrite>    
    </system.webServer>    
</configuration>

我的 public 文件夹如下所示：

我很好地在线创建了我的 Azure Web 应用程序并且我能够部署到它但是我浏览到它我得到这个错误：

The page cannot be displayed because an internal server error has occurred.

我有什么错误？

Answer 1

The page cannot be displayed because an internal server error has occurred.

如果未正确部署应用程序或未加载依赖项，可能会出现此错误。

将 React 部署到 Azure Web App 的步骤：

在 VS Code 中打开项目
转到扩展程序。搜索 Azure 应用服务并单击安装。
转到 Azure 应用服务。登录您的 Azure 帐户。
单击“部署到 Web 应用程序”。
Select 您的订阅。 Select 您的应用服务。
现在您应该能够将 React 应用部署到 Azure 应用服务

如何使用 Visual Studio 代码中的 Azure App Service 插件将 React 部署到 Azure Web App？

How to deploy React to Azure Web App using the Azure App Service plugin in Visual Studio Code?

reactjs

azure-web-app-service