无法获取 index.html Azure Linux Web 应用程序

IT技术 reactjs azure azure-web-app-service
2021-04-11 20:05:44

我们在 Microsoft Azure 中创建了一个 Linux Web 应用程序。该应用程序是用 React(html 和 Javascript)静态编写的。我们将代码复制到 wwwroot 文件夹中,但应用程序仅显示 hostsstart.html 并且当我们尝试获取页面 index.html 时出现此错误: Cannot GET /index.html

我们在 GitHub ( https://github.com/Azure-Samples/html-docs-hello-world ) 中尝试了 Azure 示例,但错误是相同的。网址是这样的:https : //consoleadmin.azurewebsites.net/index.html

上周该应用程序运行正常。

我们忘了做点什么?

4个回答

20205 月- 您无需在任何地方添加任何 javascript 文件或配置文件。让我解释。

我面临着完全相同的问题,浪费了 6 个小时尝试一切,包括对这个问题最流行的答案。虽然接受的答案是一个不错的解决方法(但需要做的工作不仅仅是添加 index.js 文件),但还有比这更简单的方法。

您会看到,当您仅部署 Azure Web 应用程序(或也称为应用服务)时,会发生两件事:

  1. Web 应用程序默认指向 opt/startup/hostingstart.html

  2. 它还在 home/site/wwwroot 中放置了一个 hostsstart.html

当您部署代码时,它会替换 home/site/wwwroot 中的 hostsstart.html,但该应用程序仍指向 opt/startup/hostingstart.html。如果您想验证这一点,请尝试删除 opt/startup/hostingstart.html 文件,您的 Web 应用程序将抛出“无法获取/”错误。

那么如何更改默认指针呢?它比看起来更简单:

转到 Web 应用程序上的“配置”选项卡,并将以下代码添加到启动脚本中:

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

如果此 Web 应用程序是客户端单页应用程序并且您遇到路由问题,则将 --spa 添加到上述命令中,如下所示:

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

这将告诉 Web 应用程序提供 wwwroot 文件夹。就是这样。

参考图片: 截图说明

PS:如果你只设置启动脚本而不部署你的代码,它仍然会显示hostingstart.html,因为默认情况下该文件位于wwwroot文件夹中。

如果我直接定位 /dir/dir/index.html ,那行得通,我又回到了应用程序的“生态系统”
2021-06-01 20:05:44
呃,我离解决这个问题很近了!我正在运行 .NET Core / ASP.NET Core,所以 Node 答案没有帮助。但至少我知道问题所在!
2021-06-09 20:05:44
@phun-ky 尝试在启动命令的末尾添加 --spa。我已经更新了我的答案。我也遇到过这个问题。
2021-06-11 20:05:44
@DeityWarrior 你刚刚拯救了我的一天。谢谢
2021-06-12 20:05:44
这种方法很有帮助,但我无法让 pm2 使用 gatsby 为我生成的所有目录和文件提供服务。Gatsby 使用 react SSR 生成静态文件和文件夹。使用时pm2 serve /home/site/wwwroot,SPA 运行良好,但是当导航(在应用程序内(不是和 SPA))到 /dir/dir 然后点击后退按钮或刷新时,我收到一条“对不起,请与站点管理员联系以查找错误:EISDIR。 ." 错误,因此它不会提供 index.html 以外的任何内容..
2021-06-19 20:05:44

好的,你会喜欢这个的。我今天也遇到了这种情况。同样的事情。我很确定 azure 团队在某处拨动了一个开关,我们掉了下来。

我在没有投票的情况下找到了这个晦涩的答案,它成功了(有一点额外的麻烦)

奖金这也解决了我只在部署站点(非本地)上遇到的路由器问题:

信用:@stormwild:默认文档不在 Azure 上托管的节点 Web 应用程序上提供服务

从@stormwild 的帖子看这里:https ://blogs.msdn.microsoft.com/waws/2017/09/08/things-you-should-know-web-apps-and-linux/#NodeHome

脚步:

  1. 转到您的 azure 门户,选择您的应用服务并启动 ssh
  2. 项目清单
  3. 在 ssh 终端中,通过命令行导航到 /home/site/wwwroot
  4. 使用以下代码在那里创建 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);
    
  5. 注意:一定要在这个文件夹中运行 npm install --save express 否则你的应用服务会在启动时崩溃

  6. 如果它没有自动重启,请务必重启您的应用服务

谢谢!我解决了,但我需要在 index.js、server.listen(process.env.PORT); 中添加端口我还在开始时做了“npm init”,在“npm install --save express”之后做了“npm start”
2021-06-13 20:05:44

另一种解决方案是在 index.html 文件旁边添加一个名为ecoysystem.config.js 的文件。

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

这将告诉 pm2 在您的应用服务启动时将所有请求关联到 index.html。

非常有用的信息:https : //burkeholland.github.io/posts/static-site-azure/

一种解决方法,我将 webapp 堆栈更改为 PHP 7

在此处输入图片说明