如何将React App的生产npm build部署到Azure App Service [英] How can I deploy production npm build of react app to Azure App Service

问题描述

我正在尝试将我的react应用的npm构建版本通过ftp部署到Azure Web服务.我移动了构建文件夹，但是当我加载应用程序的URL时，默认屏幕将加载Hey Node Developers!.

I'm trying to deploy the npm build version of my react app to azure web service through ftp. I moved the build folder, but when I load my application's URL, the default screen loads with Hey Node Developers!.

我可以通过github和kudu进行部署.但是，我不认为这是生产质量的应用程序，因为它不是使用npm run build和create-react-app构建的.

I can deploy via github and kudu. However, I don't believe that's a production quality application since it's not built using npm run build with create-react-app.

我已经经历过这个天蓝色的指南以及各种博客.我还包括了web.config文件.我的页面无法正确加载.

I've been through this azure guide, as well as various blogs. I've also included the web.config file. Nothing has gotten my page to load correctly.

我尝试使用节点版本10.1，10.14和LTS.我已经尝试过同时使用Linux和Windows App Services.

I've tried using node versions 10.1, 10.14, and LTS. I have tried using both Linux and Windows App Services.

推荐答案

由于Linux Azure Web Apps使用pm2为节点应用程序提供服务，因此您需要配置 Azure Linux Web App服务来运行启动命令可以在设置> 常规设置> 启动命令" 中投放您的React应用:

As Linux Azure Web Apps uses pm2 to serve a node app you need to configure Azure Linux Web App Service to run a startup command to serve your React app in "Settings > General settings > Startup Command":

pm2 serve /home/site/wwwroot/ --no-daemon

请记住将路径更改为构建路径(即index.html文件的路径).

如果您使用react-router并希望通过index.html处理对自定义路由的任何直接访问，则需要在同一命令上添加--spa选项.

If you use react-router and wants to make any direct access on custom routes be handled by index.html you need to add --spa option on the same command.

pm2 serve /home/site/wwwroot/ --no-daemon --spa

使用--spa选项pm2将自动将所有查询重定向到index.html，然后react router将发挥其魔力.

Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.

您可以在pm2文档中找到有关此信息的更多信息:

You can find more information about it in pm2 documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml

我最近已经解决了相同的问题:

I've coped with the same problem recently: React router direct links not working on Azure Web App Linux

这篇关于如何将React App的生产npm build部署到Azure App Service的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！