如何使用Azure DevOps部署create-react-app？

Question

我已经花了过去两天的时间，试图通过Azure DevOps部署我的Web应用程序，但是什么也没有显示出来。我使用FileZila查看生成的文件是否上传，并且所有文件都在wwwroot文件夹下。我还尝试使用FileZilla手动上传文件。这时候，我非常沮丧，因为我已经尝试了在线找到的所有部署应用程序的方法。DevOps运行得非常好，不起作用的部分是当我访问URL时我的Web应用程序实际上没有显示出来。

我按照我能找到的所有教程进行操作。

不知道为什么要求我部署代码，当代码已经明确部署了 :/

- corasan

---

使用Kudu控制台检查部署的文件是否可用。 - Sajeetharan

@Sajeetharan 当我进入Kudu控制台并点击"Site wwwroot"时，我只看到一个空白页面。这似乎没有道理，因为我直接将文件上传到"wwwroot"文件夹中，它们不应该在那里显示吗？ - corasan

你是否正在尝试部署到 Azure 应用服务 Linux 实例？ - Meer

Answer 1

无法重现您的问题，您可以按照以下工作步骤进行：

1.导入存储库，我使用了此文档中的git url：https://github.com/MicrosoftDocs/pipelines-javascript

2.创建构建流程。

3.运行构建过程。

4.发布项目并选择Node.js Web应用程序。

5. 在您的订阅中选择Azure Web应用服务。

6.导航至您的项目URL。

7.我的文件在/wwwroot目录中。

以下是 web.config 文件：

<?xml version="1.0" encoding="utf-8"?>
<!--
     This configuration file is required if iisnode is used to run node processes behind
     IIS or IIS Express.  For more information, visit:

     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->

<configuration>
  <system.webServer>
    <!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
    <webSocket enabled="false" />
    <handlers>
      <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
      <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
      <rules>
        <!-- Do not interfere with requests for node-inspector debugging -->
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="^server.js\/debug[\/]?" />
        </rule>

        <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="public{REQUEST_URI}"/>
        </rule>

        <!-- All other URLs are mapped to the node.js site entry point -->
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
          </conditions>
          <action type="Rewrite" url="server.js"/>
        </rule>
      </rules>
    </rewrite>

    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>

    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />

    <!--
      You can control how Node is hosted within IIS using the following options:
        * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
        * node_env: will be propagated to node as NODE_ENV environment variable
        * debuggingEnabled - controls whether the built-in debugger is enabled

      See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
    -->
    <!--<iisnode watchedFiles="web.config;*.js"/>-->
  </system.webServer>
</configuration>

你可以检查你的步骤和我的步骤之间的任何区别。如有任何疑虑，请告诉我。

- Jay Gong

---

啊，我没有服务器文件，我正在使用 create-react-app。 - corasan

@corasan 那么，问题现在解决了吗？还是我需要为您创建一个create-react-app的测试？ - Jay Gong

不，问题还没有解决。这样做行不通，因为它不是一个节点应用程序，我正在将静态构建文件上传到Azure应用服务。 - corasan

Answer 2

如果您正在通过Azure DevOps将React应用程序部署到Azure App Service Linux实例，则请确保向Azure App Service部署任务添加以下“启动命令”：

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

Azure App Service Linux使用Nginx作为Web服务器，并已安装pm2。在此处了解有关pm2的更多信息-> https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/ 要自动将所有查询重定向到index.html，请使用--spa选项。

在 DevOps 运行后，您的 Azure 应用服务配置 -> 常规设置，将如下所示：

- Meer

Answer 3

我遇到这个问题的原因是我试图将应用程序部署到 Azure 上的 Linux Web 应用程序中。

不幸的是，我找不到解决 Linux 部署问题的方法，但是当我将应用程序切换到基于 Windows 的应用服务计划后，应用程序立即开始工作。

- Joshua Duxbury