如何將 React 應用程序的生產 npm 構建部署到 Azure 應用服務

Question

我正在嘗試通過 ftp 將我的 React 應用程序的 npm 構建版本部署到 azure Web 服務。 我移動了 build 文件夾，但是當我加載應用程序的 URL 時，默認屏幕會加載Hey Node Developers! .

我可以通過 github 和 kudu 進行部署。 但是，我認為這不是生產質量的應用程序，因為它不是使用帶有create-react-app npm run build 。

我已經閱讀了這個 azure guide以及各種博客。 我還包含了web.config文件。 沒有什么可以讓我的頁面正確加載。

我嘗試使用節點版本10.1 、 10.14和LTS 。 我嘗試使用 Linux 和 Windows 應用服務。

Answer 1

由於 Linux Azure Web Apps 使用 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選項--spa將自動將所有查詢重定向到 index.html，然后反應路由器將發揮其魔力。

您可以在 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 應用服務（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 init以初始化您的 git repo
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>