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

时间：2017-09-07 20:59:45

标签： node.js angular azure

我已经在我的本地计算机上设置了angular4 / node应用程序，我可以ng serve和npm start该应用程序就好了。我已经在azure上创建了一个Web应用程序，并使用John Papa's指南将其部署到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 }
];

的web.config 

<?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>

3 个答案:

答案 0 :(得分：7)

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

我正面临着同样的问题，花了6个小时尝试一切，包括对这个问题的最流行的答案，这也没有用。

您看到，仅部署Azure Web App（或也称为App Service）时，会发生两件事：

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

  2. 它还将hosthoststart.html放在home / site / wwwroot

在部署代码时，它将替换home / site / wwwroot中的hostingstart.html，但应用程序仍指向opt / startup / hostingstart.html。如果要验证这一点，请尝试删除opt / startup / hostingstart.html文件，然后您的网络应用将抛出“ CANNOT GET /”错误。

那么如何更改默认指针？它比看起来简单：

转到网络应用上的“配置”标签，然后将以下代码添加到启动脚本中：

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

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

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

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

图片供参考： Screenshot explaination

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

答案 1 :(得分：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配置为您应用的默认文档。

参考：

答案 2 :(得分：0)

听起来您错过了根文件夹中的web.config文件（该文件夹包含package.json）。作为参考，以下是使用app.js作为入口点的应用程序的默认web.config。

<?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 web app to be handled by the iisnode module -->
      <add name="iisnode" path="app.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="^app.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 web app entry point -->
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True" />
          </conditions>
          <action type="Rewrite" url="app.js" />
        </rule>
      </rules>
    </rewrite>
    <!--
        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>

更多相关内容：

Running Node.js on Azure Web App

Deploying Node JS application on Azure Web Services

相关问题
最新问题