默认文档不在Azure托管的节点Web应用程序上提供 [英] Default documents not serving on node web app hosted on Azure
问题描述
我已经在本地计算机上设置了angular4/node应用程序，并且可以 ng服务和 npm start 正常运行了.我已经在azure上创建了一个网络应用，并使用了 John Papa的将其部署到天蓝色的指南.然而;当我访问带有chrome的网站时，index.html未被提供，并且得到404.
我什至取消了 Application Settings->下的所有文档.默认文档仅列出 index.html ，而没有其他内容.
I've set up an angular4/node app on my local machine and I can ng serve and npm start the app just fine. I've created a web app on azure and used John Papa's guide to deploy it to azure. However; when I visit the site with chrome my index.html is not served up and I get a 404.
I've even eliminated all my documents under Application Settings -> Default Documents to only list index.html and nothing else.
但是；当我访问 myapp.azurewebsites.com/index.html 时，将呈现该网站.当我访问 myapp.azurewebsites.com 时，该网站不是.
However; when I visit myapp.azurewebsites.com/index.html the site is rendered. When I visit myapp.azurewebsites.com the site is not.
我想念什么?
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}`));
client/app/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 { }
client/app/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>
推荐答案
2020年5月-您无需在任何地方添加任何javascript文件或配置文件.让我解释一下.
MAY 2020 - You don't have to add any javascript files or config files anywhere. Let me explain.
我正面临着同样的问题，浪费了6个小时来尝试所有问题，包括对该问题最流行的答案，但都没有用.
I was facing this exact same issue and wasted 6 hours trying everything including the most popular answer to this question which didn't work either.
您看到，仅部署Azure Web App(或也称为App Service)时，会发生两件事:
You see, when you just deploy an Azure Web App (or App Service as it is also called), two things happen:
-
默认情况下，Web应用程序指向opt/startup/hostingstart.html
The web app by default points to opt/startup/hostingstart.html
它还将hosthoststart.html放入home/site/wwwroot
It also puts a hostingstart.html in home/site/wwwroot
在部署代码时，它将替换home/site/wwwroot中的hostingstart.html，但该应用程序仍指向opt/startup/hostingstart.html.如果您想验证这一点，请尝试删除opt/startup/hostingstart.html文件，然后您的网络应用会抛出"CANNOT GET/"错误.
When you deploy your code, it replaces hostingstart.html in home/site/wwwroot but the app is still pointing to opt/startup/hostingstart.html. If you want to verify this, try deleting opt/startup/hostingstart.html file and your web app will throw a "CANNOT GET/" error.
那么如何更改默认指针?它比看起来简单:
So how to change the default pointer? It's simpler than it looks:
转到Web应用程序上的配置"标签，然后将以下代码添加到启动脚本中:
Go to Configuration tab on your web app and add the following code to startup script:
pm2 serve /home/site/wwwroot --no-daemon
这将告诉Web应用程序提供wwwroot文件夹.就是这样.
This will tell the web app to serve wwwroot folder. And that's it.
如果此Web应用程序是客户端单页应用程序，并且您在路由方面遇到问题，则将--spa添加到上述命令中，如下所示:
If this web app is a client-side single-page-app and you're having issues with routing, then add --spa to the above command as follows:
pm2 serve /home/site/wwwroot --no-daemon --spa
图片供参考:屏幕截图说明
PS:如果仅设置启动脚本而不部署代码，它仍将显示hostingstart.html，因为默认情况下该文件位于wwwroot文件夹中.
PS: If you only set the startup script without deploying your code, it will still show the hostingstart.html because by default that file lies in the wwwroot folder.
这篇关于默认文档不在Azure托管的节点Web应用程序上提供的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
