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

Question

過去 2 天我一直在試圖弄清楚如何使用 Azure DevOps 部署我的 Web 應用程序，但沒有任何顯示。 我使用 FileZila 來查看構建生成的文件是否正在上傳，並且所有文件都在wwwroot文件夾下。 我也嘗試使用 FileZilla 手動上傳文件。 在這一點上，我真的很沮喪，因為我已經嘗試了我在網上找到的一切來部署應用程序。 DevOps 工作得很好，不工作的部分是當我轉到 URL 時我的 Web 應用程序實際上顯示出來。

我遵循了我能找到的所有教程。

不知道為什么在明確部署代碼時要求我部署我的代碼：/

Answer 1

無法重現您的問題，您可以按照我的工作步驟如下：

1.導入存儲庫，我使用了本文檔中的 git url： https://github.com/MicrosoftDocs/pipelines-javascript : https://github.com/MicrosoftDocs/pipelines-javascript

2.創建構建管道。

3.運行構建過程。

4.發布項目，選擇Nodejs Web APP。

5.在訂閱中選擇azure web app服務。

6.導航到您的項目網址。

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>

你可以檢查你的步驟和我的步驟之間的任何差異。任何問題，請告訴我。

Answer 2

我遇到這個問題的原因是我試圖部署到 Azure 中的 Linux Web 應用程序。

不幸的是，我找不到讓 Linux 部署工作的方法，但是一旦我將應用程序切換到基於 Windows 的應用程序服務計划，該應用程序就會立即運行。

Answer 3

如果您要通過 Azure devops 將 React 應用程序部署到 azure 應用程序服務 linux 實例，請務必將以下“啟動命令”添加到 azure 應用程序服務部署任務中：

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 應用服務配置 -> 常規設置，將如下所示：