如何将 React 应用的生产 npm 构建部署到 Azure 应用服务

Question

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

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

我浏览过这个蔚蓝的guide，以及各种博客。我还包含了web.config 文件。没有什么可以让我的页面正确加载。

我尝试过使用节点版本 10.1、10.14 和 LTS。我尝试过同时使用 Linux 和 Windows 应用服务。

Answer 1

由于 Linux Azure Web 应用程序使用 pm2 为节点应用程序提供服务，您需要配置 Azure Linux Web 应用程序服务 以运行启动命令以在 "设置 中为您的 React 应用程序提供服务> > 常规设置 > 启动命令：

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 路由器将发挥它的魔力。

您可以在 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 应用服务（节点 JS）

本地 Git 上传到 Azure 应用服务

1. 在 Azure 门户中打开您的应用服务 > 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 init 在完成构建后初始化您的 git 存储库
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 门户重新启动您的应用服务。

<?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>