IT技术 - React App 部署到 Azure Web 的过程？ - 吾爱随笔录

IT技术 reactjs azure azure-devops react-router

2021-04-26 18:17:24

我目前正在尝试将默认的 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

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

文件夹内容：

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

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

谢谢你们的时间。

3个回答

另一种方法是在“设置>常规设置>启动命令”中配置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，然后react-router将发挥其魔力。

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

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

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

ecosystem.config.js

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

有一种非常简单的方法可以解决这个问题，虽然它并不完美，但它适用于 AWS、Microsoft Azure 和可能的任何其他托管：

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

其它你可能感兴趣的问题