將客戶端渲染的create-react-app應用到Microsoft Azure

將React應用程序部署到Microsoft Azure似乎很簡單，但存在隱藏的複雜性。本指南重點側重於將創建反應應用（或使用PushState路由類似的前端框架）部署到Azure，以最大程度地減少客戶端服務器路由衝突。

簡短的軼事說明了挑戰：在一個先前的項目中，帶有React前端和ASP.NET核心後端分別部署到Azure中，Page Refres由於路由錯誤配置而導致404個錯誤。這突出了需要適當的服務器端配置來處理客戶端路由。

生產就緒的反應構建

構建用於生產的React應用程序（使用npm run build ）會創建一個包含靜態資產的優化build文件夾。將此文件夾部署到服務器足以實時應用程序。結構通常類似於：

 <code>→ build → static → css → css files → js → js files → media → media files → index.html → other files...</code>

用React路由器的客戶端路由

React路由器利用HTML5 PUSHSTATE API。 PushState無需全頁重新加載即可更新URL，從而啟用客戶端路由。但是，這在部署到服務器時會帶來挑戰。標準服務器希望找到與URL路徑匹配的文件；使用客戶端路由，情況並非如此。必須將服務器配置為為所有路線服務index.html 。

例如，Express.js需要此配置：

 app.get（'*'，（req，res）=> {
  res.sendfile（path.resolve（__ dirname，'client'，'build'，'index.html'））;
}）;

假設React應用程序託管在服務器根部。對於單獨的前端和後端項目，此方法是有問題的。由於我們正在部署靜態應用程序，因此不需要後端。

Azure應用服務部署

部署到Azure：

1. 在Azure Portal中創建新的應用程序服務。
2. 導航到部署中心。我們將將與Kudu的本地Git一起用作建築提供商。
3. Azure提供git遠程URL；克隆本地。
4. 構建了React應用程序（ npm run build ）後，在build文件夾中初始化GIT存儲庫，提交更改並將其推向Azure遙控器。

至關重要的是，確保您的package.json為Azure指定了支持的Node.js版本（使用az webapp list-runtimes檢查可用版本）。添加類似"engines": {"node": "10.0"} 。

由於404錯誤，初始部署可能會在頁面刷新上失敗。

協調Azure中的客戶服務器路由

要解決此問題，請在build文件夾中添加web.config文件：

 
<configuration>
  <system.webserver>
    <rewrite>
      <rules>
        <rule name="React Routes" stopprocessing="true">
          <match url=".*"></match>
          <conditions logicalgrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchtype="IsFile" negate="true"></add>
            <add input="{REQUEST_FILENAME}" matchtype="IsDirectory" negate="true"></add>
            <add input="{REQUEST_URI}" negate="true" pattern="^/(api)"></add>
          </conditions>
          <action type="Rewrite" url="/"></action>
        </rule>
      </rules>
    </rewrite>
  </system.webserver>
</configuration>

重建和重新部署。該應用程序現在應該正確運行。對於連續部署，請探索Azure的連續集成/連續部署（CI/CD）功能。

結論

Azure為部署React應用程序提供了強大的功能。了解客戶服務器路由交互是成功部署的關鍵。建議在Azure上進行kudu，node.js部署和靜態站點部署的更多資源，以深入了解。

以上是將客戶端渲染的create-react-app應用到Microsoft Azure的詳細內容。更多資訊請關注PHP中文網其他相關文章！