React App 部署到 Azure Web 的过程？

Question

我目前正在尝试将默认的 React Web 应用程序部署到 Azure，但遇到了一个问题，尽管我将构建文件夹的内容部署到了 azure 托管的 /site/wwwroot 文件夹，但在转到托管地址：https://[project_name].azurewebsites.net/

登陆页面 ：

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

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

5. 为了矫枉过正，我添加了下面的 web.config 文件来处理未来的路由，但也尝试过没有这一步

最后我的 Azure 站点的内容是这样的

文件夹内容：

此时，当我尝试访问 Azure 站点时，我收到“嘿，Node 开发人员！”的提示。这意味着我的代码未部署的页面。关于为什么会这样的任何想法？

*** 我有一种预感，在 Azure Web Api 的配置过程中，有些东西没有正确设置，这可能是因为我选择 Node 10.14 作为我的运行时堆栈，仅仅是因为这是我安装的 Node 版本，并与我的本地一起使用反应应用程序。

谢谢你们的时间。

Answer 1

另一种方法是配置Azure Linux Web 应用服务以在“设置>常规设置>启动命令”中运行启动命令来为您的 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，然后反应路由器将发挥其魔力。

您可以在 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