如何将React应用程序的生产NPM构建到Azure App Service

Question

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

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

。

我曾经通过此Azure指南以及各种博客。我还包括web.config文件。没有什么可以正确地加载我的页面。

我尝试使用节点版本10.1，10.14和LTS。我尝试使用Linux和Windows App Services。

Answer 1

作为Linux Azure Web应用程序使用PM2服务节点应用程序，您需要配置 Azure Linux Web App Service 运行启动命令以服务您的React App In In React App'configuration ＆gt;常规设置＆gt;启动命令＆quot＆quort＆quot ：

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。

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

最近我已经解决了相同的问题：React路由器直接链接不起作用Azure Web App Linux

Answer 2

windows(node js(

的azure应用程序服务

本地GIT上传到Azure App Services

1. 在Azure Portal> 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 reto
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。

配置iis for react-router

要与您的React Spa一起使用react-router，您还需要将Web应用程序配置为重新布置404错误，以将404个错误重新为index.html。您可以通过在称为web.config的/site/wwwroot/中添加文件来做到这一点。将内容放在下面，然后从Azure Portal重新启动您的应用程序服务。

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