如何将产品npm构建为Azure Azure的react

Question

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

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

我已经通过这个蔚蓝的指南，以及各种博客。我还包括了web.config文件。没有什么能让我的页面正确加载。

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

Answer 1

当Linux使用pm2为节点应用提供服务时，您需要配置Azure Linux 来运行启动命令，以便在“设置>常规设置>启动命令”中为您的反应应用程序提供服务。

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

请记住将路径更改为构建路径( index.html文件的路径)。

如果您使用react路由器，并希望由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

我最近也遇到了同样的问题：在Azure Web App Linux上不工作的路由器直接链接

Answer 2

面向Windows的Azure应用程序服务(Node 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之后运行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。

将IIS配置为React路由器

要将react-router与您的route结合使用，还需要配置web应用程序将404错误重新路由到index.html。您可以通过在/site/wwwroot/中添加一个名为web.config的文件来做到这一点。将内容放在下面，然后从Azure Portal重新启动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>