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 App
2. 运行“npm run build”获取构建文件夹
3. 进入 Azure React 门户并创建一个新的 Web 应用程序 ***
4. FTP/Git 将本地构建文件夹的内容部署到 Azure 网站的 /site/wwwroot/ 文件夹中

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

最后我的 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

Answer 2

您已创建 Linux 应用服务 - 您的 web.config 将无法工作，因为没有 IIS。

如果您不选择节点作为运行时堆栈，您的应用程序将在很大程度上正常工作，因为它像静态 Web 主机一样提供文件。但是，我建议将运行时堆栈保留为节点，并将以下文件添加到您的部署中 wwwroot 文件夹中：

ecosystem.config.js

module.exports = {
    apps: [
        {
            script: "npx serve -s"
        }
    ]
};

https://burkeknowswords.com/this-is-how-to-easily-deploy-a-static-site-to-azure-96c77f0301ff

Answer 3

有一种非常简单的方法可以解决这个问题，虽然它并不完美，但它可以在 AWS、Microsoft Azure 以及可能的任何其他主机上运行：

• 只需将错误文档指向：index.html

我在这里找到了它： https://stackoverflow.com/a/52343542/3231884

免责声明：此解决方案并不完美，会影响 SEO。 Google 不会对抛出 404 的网站进行排名。