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

IT技术 javascript reactjs azure azure-web-app-service azure-app-service-plans
2021-04-22 20:15:25

我已将一个简单的 React 应用程序部署到 azure 应用程序服务,但它无法启动:

如何让应用程序运行 index.html?

在此处输入图片说明

5个回答

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

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

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

我们如何通过--proxy-config proxy.conf.jsonpm2?
2021-06-05 20:15:25

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

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

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

一旦我们重新启动,它应该从 docroot (/home/site/wwwroot) 中选择页面

我们如何通过--proxy-config proxy.config.jsonpm2?
2021-06-13 20:15:25

转到 Azure 配置>常规设置

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

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

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

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


笔记:

确保您使用 Azure 应用服务linux服务器。

--spa在最后添加了修复 react-router 重定向的问题,Using--spa会自动将所有查询重定向到 index.html,然后 react-router 会发挥它的魔力。

我们如何通过--proxy-config proxy.conf.jsonpm2?
2021-06-05 20:15:25

如果您部署到 Node Linux Web App,则默认文档将hostingstart.html位于/home/site/wwwroot/.

根据这个

创建 Node.js 应用程序时,默认情况下,它将使用 hostsstart.html 作为默认文档,除非您将其配置为查找不同的文件。您可以使用 JavaScript 文件来配置您的默认文档。在您站点的根文件夹中创建一个名为 index.js 的文件

因此,转到您的 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 配置为您的应用程序的默认文档。

当我将这些 express 脚本添加到我现有的 index.js 文件中并在本地运行时,我收到一个错误。该应用程序在本地运行良好,所以不会发生冲突吗?
2021-05-30 20:15:25
我已经两天不间断地在 az devops 中设置我的 CICD 管道,最终问题是:主文件必须命名为hostingstart.html. @Satheesh解决方案对我有用
2021-06-19 20:15:25
@Batman,我测试并得到错误然后安装 express module然后它工作了。你可以试试。$ npm install express
2021-06-21 20:15:25

所以感谢伯克·霍兰德。最简单的就是创建一个build文件夹运行

npm run build

然后将构建文件夹复制到目标位置并添加“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

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

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

这个解决方案解决了这两个问题,启动反应应用程序和处理反应路由器问题。
2021-06-04 20:15:25