我已经在本地计算机上设置了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/index.html 时,将呈现该网站.当我访问 myapp.azurewebsites 时,该网站不是.
However; when I visit myapp.azurewebsites/index.html the site is rendered. When I visit myapp.azurewebsites 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 './appponent'; 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 './appponent'; 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: github/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config --> <configuration> <system.webServer> <!-- Visit blogs.msdn/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 github/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应用程序上提供
发布评论