将客户端渲染的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中文网其他相关文章！