在Azure应用程序服务中，React应用程序无法启动。

Question

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

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

- Batman

---

不，我没有运行任何东西，这不是应用程序服务的默认行为吗？默认情况下提供索引文件。 - Batman

它应该只是运行它，对吧。你得到了什么？ - 4c74356b41

如果您正在使用 react-router，Azure App Service Linux Host 使用 HTTP 服务器将您的代码代理到网络上。 您需要设置 URL 重写规则。 这是因为如果您有一个 react-router url (/about)，当用户刷新页面时，HTTP 服务器将尝试加载一个名为 /about 的文件，但该文件不存在，这将导致 404 错误。 URL 重写规则将更改此行为。 它将加载 index.html，/about 将显示来自 react-router 的正确页面。 这里是答案的链接：link。 - technogeek1995

当然可以，但是应用程序根本无法加载。 - Batman

Azure Repos git - Batman

Answer 1

在你的Azure仪表板中添加此命令>配置>启动命令 pm2 serve /home/site/wwwroot --no-daemon 然后重新启动服务器。这对我有用！

- bach vo

---

我们如何在pm2中传递--proxy-config proxy.conf.json？ - indranil9286

Answer 2

由于配置更改可能不会被新实例保留，因此您无需像其他答案中提到的那样安装express并配置index.js文件。

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

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

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

- Satheesh

---

我们如何在pm2中传递 --proxy-config proxy.config.json？ - indranil9286

Answer 3

进入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将运行其魔法。

- Morris S

---

我们如何在pm2中传递--proxy-config proxy.conf.json？ - indranil9286

Answer 4

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

根据此处的说明：

当创建一个Node.js应用程序时，它会默认使用hostingstart.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 配置为您的应用程序的默认文档。

- George Chen

---

当我将这些express脚本添加到我的现有index.js文件中并在本地运行时，会出现错误。应用程序在本地运行良好，所以不会发生冲突吗？ - Batman

@Batman，我测试时出现了错误，然后安装了express模块，然后它就正常工作了。你也可以试一下。$ npm install express - George Chen

我已经连续两天在Azure DevOps中设置我的CICD管道，问题最终是：主文件必须命名为“hostingstart.html”。@Satheesh的解决方案对我有用。 - ArtiomLK

@GeorgeChen 我也遇到了类似的问题，并在https://dev59.com/NrT3oIgBc1ULPQZFhweE上发布了我的问题。您能否帮忙看一下？我已经连续几天工作了，但仍然收到“找不到express模块”的错误信息。谢谢！ - Sangeet Agarwal

Answer 5

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

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 中的 Node Linux 应用服务实例。使用此方法无需进行客户端路由配置！

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

- jqIndy

---

这个解决方案解决了两个问题，启动了React应用程序并处理了React-Router的问题。 - ArtiomLK