在Azure上部署react項目

Question

我想在azure雲上部署我的反應項目。 我已經在heroku上部署了它，並且它很容易部署。 我只需要執行git push heroku master將其部署到heroku上。 但我對如何在天藍色上做這件事毫無頭緒。 所以我的項目中有一個bulid目錄，每次運行gulp命令時都會生成該目錄。 它包含所有構建文件。 任何人都可以指導我如何進入azure？

這是我的項目結構

Answer 1

有很多選項可以將您的應用程序部署到azure網站/網絡應用程序，例如FTP，本地Git存儲庫和Visual Studio IDE等。我不是React專家，為簡單起見，我只使用create-react-app工具和FileZilla將我的React應用程序部署到Azure Web App。 這是步驟。

基本上，創建和構建React應用程序非常簡單

npm install -g create-react-app

create-react-app my-app
cd my-app/

npm run build

現在，該應用程序已准備好部署！ 讓我們進入Azure門戶並創建一個新網站來托管我們的React應用程序。

輸入唯一的應用服務名稱，資源組的有效名稱和新的服務計划。 然后單擊“ 保存”

要啟用FTP發布，請單擊“ APP DEPLOYMENT”菜單下的“ 部署憑據 ”。 保存憑據並記下您創建的用戶名和密碼。

接下來，單擊“ 屬性” ，然后復制FTP主機名和USER 。

最后，通過FileZilla連接到Azure Web應用程序，然后將之前創建的my-app/build文件夾的整個內容上傳到Azure網站上的/site/wwwroot/文件夾中。

現在我們可以通過URL訪問應用程序： http://aaronreacttest.azurewebsites.net/ ： http://aaronreacttest.azurewebsites.net/ ，它應該顯示默認頁面。

Answer 2

除了Aaron提供的步驟之外，我還必須添加帶有以下內容的web.config文件。 它由其他技術人員在他們的博客和一些論壇中提供。

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Static 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>