React App 未在 Azure 应用服务中启动

Question

我已经将一个简单的 React 应用部署到 Azure 应用服务，但它无法启动：

如何将应用程序安装到 运行 index.html？

Answer 1

如果您部署到节点 Linux Web 应用程序，则默认文档将 hostingstart.html 位于 /home/site/wwwroot/。

根据this：

When you create a Node.js app, by default, it's going to use hostingstart.html as the default document unless you configure it to look for a different file. You can use a JavaScript file to configure your default document. Create a file called index.js in the root folder of your site

所以转到您的 ssh 终端，导航到 /home/site/wwwroot。使用以下代码在其中创建 index.js：

var express = require('express');
var server = express();
var options = {
index: 'index.html'
};
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);

注意：确保 运行 npm install --save express 也在此文件夹中，否则您的应用程序服务将在启动时崩溃

重新启动，它将index.html配置为您应用程序的默认文档。

Answer 2

感谢 Burke Holland。最简单的是创建一个构建文件夹 运行

npm run build

然后将构建文件夹复制到目标位置并添加 "ecosystem.config.js" 文件。

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

有关详细信息，请参阅此 link： https://burkeknowswords.com/this-is-how-to-easily-deploy-a-static-site-to-azure-96c77f0301ff

注意：这适用于部署到 Azure 中的节点 Linux 应用服务实例。这种方法不需要客户端路由配置！

对于 Windows 应用服务，您可以创建一个配置文件来配置客户端路由。

Answer 3

您不需要像其他答案中提到的那样安装 express 和配置 index.js，因为这需要更改配置并且不确定应用扩展事件是否会在新实例中保留这些安装。

简单的方法是使用 pm2，因为它已经是堆栈的一部分。为应用程序传递以下启动命令

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

一旦我们重新启动，它应该从文档根目录中选择页面 (/home/site/wwwroot)

Answer 4

在您的 Azure 仪表板 > 配置 > 启动命令中添加此命令

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

并重新启动您的服务器。这帮我修好了！

Answer 5

转到 Azure 配置>常规设置

• 如果您的 build 文件夹位于项目的根目录下

启动命令：pm2 serve /home/site/wwwroot --no-daemon --spa

• 如果您的 build 文件夹在您的客户端文件夹中，只需添加路径

启动命令：pm2 serve /home/site/wwwroot/client/build --no-daemon --spa

---

注：

确保您使用的是 Azure App Service linux 服务器。

我在最后添加了--spa来解决react-router重定向的问题，使用--spa会自动将所有查询重定向到index.html然后react-router 会发挥它的魔力。