如何将React App的生产npm build部署到Azure App Service

Question

我正在尝试将我的react应用程序的npm构建版本通过ftp部署到Azure Web服务。我移动了构建文件夹，但是当我加载应用程序的URL时，默认屏幕将加载Hey Node Developers!。

我可以通过github和kudu进行部署。但是，我不认为这是生产质量的应用程序，因为它不是使用npm run build和create-react-app构建的。

我经历过这种天青的guide以及各种博客。我还包括了web.config文件。我的页面无法正确加载。

我尝试使用节点版本10.1，10.14和LTS。我已经尝试过同时使用Linux和Windows App Services。

Answer 1

由于Linux Azure Web Apps使用pm2来服务节点应用程序，因此您需要配置 Azure Linux Web App服务来运行启动命令以在“设置> 常规设置> 启动命令” ：

pm2 serve /home/site/wwwroot/ --no-daemon

请记住将路径更改为构建路径（即index.html文件的路径）。

如果您使用react-router并希望通过index.html处理对自定义路由的任何直接访问，则需要在同一命令上添加--spa选项。

pm2 serve /home/site/wwwroot/ --no-daemon --spa

使用--spa选项pm2将自动将所有查询重定向到index.html，然后react router将发挥作用。

您可以在pm2文档中找到有关此信息的更多信息：https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml

我最近也遇到了相同的问题：React router direct links not working on Azure Web App Linux

Answer 2

适用于Windows的Azure App Services（Node JS）

本地Git上传到Azure App Services

1. 在Azure门户中打开您的App Service> Deployment> Deployment Center-如果已经设置了部署选项，则必须按Disconnect。
2. 选择Local Git> App Service Build Service> Summary> Finish
3. 选择FTP /凭据（在左上角）>选择用户凭据-设置密码并保存您的凭据
4. 返回概述，使用您的git用户名复制git部署URL。格式应为：https://<user_name>@<app_service_name>.scm.azurewebsites.net:443/<app_service_name>.git
5. 从您的计算机本地本地的项目文件夹中运行npm run build
6. 在./build完成构建以初始化git repo后运行git init
7. 运行git remote add azure https://<user_name>@<app_service_name>.scm.azurewebsites.net:443/<app_service_name>.git来添加Azure部署作为推送到的选项
8. 运行git add *和git commit -m "${date}"和git push azure master:master
9. 系统将提示您输入密码。这将是您在“ FTP /凭据”屏幕上提供的密码。
10. 测试您的网站。它应该在https://<app_service_name.azurewebsites.net
上可用

如果您希望将来将更新推送到您的应用程序服务，则只需执行步骤8到10。

为React-Router配置IIS

要将react-router与您的react SPA一起使用，您还需要配置Web应用程序以将404错误重新路由到index.html。您可以通过在/site/wwwroot/中添加名为web.config的文件来实现。将内容放在下面，然后从Azure门户重新启动您的App Service。

<?xml version="1.0"?>
<configuration>
  <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="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>