reactjs - React App 部署到 Azure Web 的流程？

Question

我目前正在尝试将默认的 React Web 应用程序部署到 Azure，但遇到了一个问题，虽然我将构建文件夹的内容部署到 azure 托管的/site/wwwroot 文件夹，但在访问时最终会出现以下页面到我的托管地址:https://[project_name].azurewebsites.net/

目标网页:

我打算部署默认的 create-react-app react 应用程序，以便在部署真实站点时可以关闭该流程。我所遵循的过程几乎正是本文https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321中提到的。

1. 使用 create-react-app 创建默认的 React 应用
2. 运行“npm run build”以获取构建文件夹
3. 进入 Azure React 门户并创建一个新的 Web 应用程序***
4. FTP/Git 将本地构建文件夹的内容部署到 Azure 网站的/site/wwwroot/文件夹

5. 为了矫枉过正，我添加了下面的 web.config 文件来处理 future 的路由，但也尝试过不执行此步骤

最后我的 Azure 网站的内容如下所示

文件夹内容:

此时，当我尝试访问 Azure 站点时，我收到“嘿，Node 开发人员!”页面，这意味着我的代码未部署。对于为什么会出现这种情况有什么想法吗？

*** 我有预感，在配置 Azure Web Api 期间，某些内容未正确设置，可能是因为我选择 Node 10.14 作为我的运行时堆栈，只是因为这是我已安装并正在使用的 Node 版本使用我本地的 React 应用程序。

感谢大家抽出时间。

Answer 1

另一种方法是在“设置”>常规设置中配置Azure Linux Web App Service以运行启动命令来为您的React应用程序提供服务> 启动命令”:

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

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

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

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

使用--spa选项pm2会自动将所有查询重定向到index.html，然后React路由器将发挥其魔力。

您可以在 pm2 文档中找到有关它的更多信息:https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml

我最近遇到了同样的问题:React router direct links not working on Azure Web App Linux