Reactjs 将应用程序部署到Azure Web的过程？

我当前正在尝试将默认react web应用部署到Azure，但遇到了一个问题，即尽管我将构建文件夹的内容部署到Azure hosted/site/wwwroot文件夹，但在转到托管地址时，我最终会出现在以下页面：

登录页：

我打算部署默认的create-react-app-react应用程序，以便在部署我的真实站点时停止该过程。 我所遵循的过程与本文中提到的几乎完全相同

使用Create React App创建默认React App

运行“npm运行构建”以获取构建文件夹

进入Azure React门户并创建一个新的Web应用程序***

FTP/Git将本地构建文件夹的内容部署到Azure网站的/site/wwwroot/文件夹中

对于overkill，我添加了下面的web.config文件来处理未来的路由，但也尝试了不使用此步骤

最终，我的Azure站点的内容如下所示

文件夹内容：

此时，当我尝试访问Azure站点时，我会看到“嘿，节点开发人员！”页面，这意味着我的代码没有部署。有没有想过为什么会出现这种情况

***我有一种预感，在配置Azure Web Api的过程中，有些设置不正确，可能是因为我选择了Node 10.14作为我的运行时堆栈，原因很简单，因为这是我已安装并正在与本地React应用程序一起使用的Node版本

---

感谢各位抽出时间。

您已经创建了一个Linux应用程序服务-您的web.config无法工作，因为没有IIS

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

wwwroot

文件夹中的部署中：

ecosystem.config.js

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

---

另一种方法是配置Azure Linux Web App服务运行启动命令，以便在设置中为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文档中找到更多信息：

---

我最近也处理过同样的问题：

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

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

我在这里发现的：

---

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

我没有尝试，因为我发现这个答案看起来更容易。这样部署是否允许React拾取环境变量？是的，您可以在azure Web>设置上配置您的环境变量。这对SEO很糟糕，不应该使用，因为还有其他解决方案和您的一样简单。@LuttiCoelho您可能直到最后才花时间阅读我的答案。有一个免责声明就是这么说的。我已经读到了最后。即使考虑到您的免责声明，我也不同意在任何情况下都应考虑此解决方案。在巴西，我们称这种解决方案为“冈比亚”。请花点时间搜索它。最初的答案是关于在AmazonS3中处理路由问题。顺便说一句，如果浏览器和S3上托管的应用程序之间没有反向代理，就无法解决这个问题，因此404重定向到索引是可以接受的，而您没有反向代理来解决这个问题。如果这个问题是关于azure blob存储中的handle react路由器，那么您的答案可能也会得到很好的投票。但在Azure Web应用程序（Linux或Windows）上，我们有更好的方法来应对它。这就是为什么我投票反对你的答案。但请注意，我不是真相的主人。让我们拭目以待，看看是否有人同意你的观点。你有很好的声誉，所以，一票否决并不是世界末日。