不在 Azure 上托管的节点 Web 应用程序上提供的默认文档

Question

我已经在我的本地机器上设置了一个 angular4/node 应用程序，我可以ng serve并且npm start应用程序很好。我在 azure 上创建了一个 Web 应用程序，并使用John Papa 的指南将其部署到 azure。然而; 当我使用 chrome 访问该站点时，我的 index.html 没有提供，并且我得到了 404。
我什Application Settings -> Default Documents至将我的所有文档都删除了，只列出了列表index.html，没有别的。

然而；当我访问myapp.azurewebsites.com/index.html该网站时呈现。当我访问myapp.azurewebsites.com该网站是不是。

我错过了什么？

服务器/index.js

const express = require('express');
const path = require('path');

const root = './dist';
const app = express();

app.use(express.static(root));
console.log(`server ${root}`);
app.get('*', (req, res) => {
    res.sendFile(`index.html`);
});

const port = process.env.PORT || '3000';
app.listen(port, () => console.log(`API running on localhost:${port}`));

客户端/应用程序/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

import { routes } from './app.routing';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpModule,

        RouterModule.forRoot(routes)
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
export class AppModule { }

客户端/应用程序/app.routing.ts

import { Route } from '@angular/router';

import { AppComponent } from './app.component';

export const routes: Route[] = [
    { path: '', component: AppComponent }
];

网页配置

<?xml version="1.0" encoding="utf-8"?>
<!--
     This configuration file is required if iisnode is used to run node processes behind
     IIS or IIS Express.  For more information, visit:

     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->

<configuration>
  <system.webServer>
    <!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
    <webSocket enabled="false" />
    <handlers>
      <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
      <add name="iisnode" path="index.js" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
      <rules>
        <!-- Do not interfere with requests for node-inspector debugging -->
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="^index.js\/debug[\/]?" />
        </rule>

        <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="public{REQUEST_URI}"/>
        </rule>

        <!-- All other URLs are mapped to the node.js site entry point -->
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
          </conditions>
          <action type="Rewrite" url="index.js"/>
        </rule>
      </rules>
    </rewrite>

    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>

    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />

    <!--
      You can control how Node is hosted within IIS using the following options:
        * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
        * node_env: will be propagated to node as NODE_ENV environment variable
        * debuggingEnabled - controls whether the built-in debugger is enabled

      See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
    -->
    <!--<iisnode watchedFiles="web.config;*.js"/>-->
  </system.webServer>
</configuration>

Answer 1

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

我面临着完全相同的问题，浪费了 6 个小时尝试一切，包括对这个问题最流行的答案，但也没有奏效。

您会看到，当您仅部署 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 应用程序提供 wwwroot 文件夹。就是这样。

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

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

参考图片： 截图说明

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

Answer 2

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

您可以重命名index.html为hostingstart.html.

根据 Azure 应用服务常见问题解答：

创建 Node.js 应用程序时，默认情况下，它将 hostingstart.html用作默认文档，除非您将其配置为查找不同的文件。您可以使用 JavaScript 文件来配置您的默认文档。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);

这会将 index.html 配置为您的应用程序的默认文档。

参考：

• Azure 应用服务/节点
• 使用 JavaScript 在 Node.js 应用程序中设置默认文档。