如何将 React 应用程序部署到 Azure 中的虚拟应用程序？

Question

我有一个位于 ASP.NET MVC 中的主应用程序，并将其部署到 Azure App Service。现在我有它的子应用程序，它正在响应，我想将它部署到这个主要 Azure 应用服务的虚拟应用程序。

这是我创建的虚拟目录：

我正在使用 Visual Studio Code 中的 AZURE 应用服务扩展在 Azure 上部署 React 应用程序。它列出了我的订阅可用的所有应用程序服务，但它没有显示我想要部署此应用程序的虚拟目录。

这就是我想要的最终结果：

主应用网址：https://test-features.azurewebsites.net/

预期的 React 应用 URL：https://test-features.azurewebsites.net/react/

我该怎么做？

Answer 1

为 react 应用创建虚拟目录后，我们需要对 react 应用进行一些更改。就像我们需要在路由器中设置basename=/react-app 一样，react 应用程序将在/react-app url 中运行。接下来，我们需要构建 React 应用程序并使用 FTP 将构建文件夹上传到这个虚拟目录。您需要确保将 web.config 添加到带有重写 url 设置的 react 构建文件夹中。这是因为当您点击 react url 时，请求首先到达服务器并尝试找到合适的页面来处理请求。此时，我们需要初始化 React 应用程序，我们需要进行如下重写设置：

`<system.webServer>
  <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="/react-app/" />
        </rule>
     </rules>
  </rewrite>
</system.webServer>`

我已经完成了这个设置，现在我可以在 azure 虚拟目录中运行 react app。请注意，您的主应用程序配置不应有任何错误，否则您在运行 react 应用程序时也会出错。我在开发这个时遇到了一个问题。