將React應(yīng)用程序部署到Microsoft Azure似乎很簡(jiǎn)單，但存在隱藏的複雜性。本指南重點(diǎn)側(cè)重於將創(chuàng)建反應(yīng)應(yīng)用（或使用PushState路由類(lèi)似的前端框架）部署到Azure，以最大程度地減少客戶(hù)端服務(wù)器路由衝突。

簡(jiǎn)短的軼事說(shuō)明了挑戰(zhàn)：在一個(gè)先前的項(xiàng)目中，帶有React前端和ASP.NET核心後端分別部署到Azure中，Page Refres由於路由錯(cuò)誤配置而導(dǎo)致404個(gè)錯(cuò)誤。這突出了需要適當(dāng)?shù)姆?wù)器端配置來(lái)處理客戶(hù)端路由。

生產(chǎn)就緒的反應(yīng)構(gòu)建

構(gòu)建用於生產(chǎn)的React應(yīng)用程序（使用npm run build ）會(huì)創(chuàng)建一個(gè)包含靜態(tài)資產(chǎn)的優(yōu)化build文件夾。將此文件夾部署到服務(wù)器足以實(shí)時(shí)應(yīng)用程序。結(jié)構(gòu)通常類(lèi)似於：

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

用React路由器的客戶(hù)端路由

React路由器利用HTML5 PUSHSTATE API。 PushState無(wú)需全頁(yè)重新加載即可更新URL，從而啟用客戶(hù)端路由。但是，這在部署到服務(wù)器時(shí)會(huì)帶來(lái)挑戰(zhàn)。標(biāo)準(zhǔn)服務(wù)器希望找到與URL路徑匹配的文件；使用客戶(hù)端路由，情況並非如此。必須將服務(wù)器配置為為所有路線(xiàn)服務(wù)index.html 。

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

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

假設(shè)React應(yīng)用程序託管在服務(wù)器根部。對(duì)於單獨(dú)的前端和後端項(xiàng)目，此方法是有問(wèn)題的。由於我們正在部署靜態(tài)應(yīng)用程序，因此不需要後端。

Azure應(yīng)用服務(wù)部署

部署到Azure：

1. 在A(yíng)zure Portal中創(chuàng)建新的應(yīng)用程序服務(wù)。
2. 導(dǎo)航到部署中心。我們將將與Kudu的本地Git一起用作建築提供商。
3. Azure提供git遠(yuǎn)程URL；克隆本地。
4. 構(gòu)建了React應(yīng)用程序（ npm run build ）後，在build文件夾中初始化GIT存儲(chǔ)庫(kù)，提交更改並將其推向Azure遙控器。

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

由於404錯(cuò)誤，初始部署可能會(huì)在頁(yè)面刷新上失敗。

協(xié)調(diào)Azure中的客戶(hù)服務(wù)器路由

要解決此問(wèn)題，請(qǐng)?jiān)?code>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>

重建和重新部署。該應(yīng)用程序現(xiàn)在應(yīng)該正確運(yùn)行。對(duì)於連續(xù)部署，請(qǐng)?zhí)剿鰽zure的連續(xù)集成/連續(xù)部署（CI/CD）功能。

結(jié)論

Azure為部署React應(yīng)用程序提供了強(qiáng)大的功能。了解客戶(hù)服務(wù)器路由交互是成功部署的關(guān)鍵。建議在A(yíng)zure上進(jìn)行kudu，node.js部署和靜態(tài)站點(diǎn)部署的更多資源，以深入了解。

以上是將客戶(hù)端渲染的create-react-app應(yīng)用到Microsoft Azure的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！