Javascript Can'；无法访问Azure Web App Linux或Windows上的NodeJS站点_Javascript_Node.js_Angular_Azure_Azure Web App Service

Javascript Can'；无法访问Azure Web App Linux或Windows上的NodeJS站点

javascript node.js angular azure

Javascript Can'；无法访问Azure Web App Linux或Windows上的NodeJS站点,javascript,node.js,angular,azure,azure-web-app-service,Javascript,Node.js,Angular,Azure,Azure Web App Service,在Azure上部署我的web应用程序真的很困难。我可以运行NPMStart，并让它在本地主机上编译和运行，没有问题端口4200 我可以通过git将它部署到Azure上，然后ssh和npm安装所有东西并在那里编译。但是，无论我做什么，进入网站url.azurewebsites.net，我总是会得到“cannotget/” 我不知道我错过了什么。这是服务器上的结构 -~/wwwroot/ -frontend/ -angular.json -node_modules/

在Azure上部署我的web应用程序真的很困难。我可以运行NPMStart，并让它在本地主机上编译和运行，没有问题端口4200

我可以通过git将它部署到Azure上，然后ssh和npm安装所有东西并在那里编译。但是，无论我做什么，进入网站url.azurewebsites.net，我总是会得到“cannotget/”

我不知道我错过了什么。这是服务器上的结构

-~/wwwroot/
   -frontend/
     -angular.json
     -node_modules/
     -src/
       -index.js
       -main.ts
       -index.html
       -app/
       -styles.scss
       -environments/
       -tsconfig.app.json
     -index.js
     -package.json
     -e2e/
     -proxy.conf.json
     -protractor.conf.js
     -tsconfig.json
     -package-lock.json
     -web.config
   -server/
     -app.properties
     -pom.xml
     -src/
     -mvnw
     -mvnw.cmd

我不确定在这一点上所有的文件都是相关的，但我将粘贴一些看起来可能是相关的文件：

package.json

{
  "name": "blah",
  "version": "0.1.1",
  "scripts": {
    "ng": "ng",
    "start": "node app.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
    "private": true,
    "engines":{"node": "8.10.0"},  
    "dependencies": {
    "@angular/animations": "^7.1.4",
    "@angular/cdk": "5.0.0-rc.1",
    "@angular/common": "^7.1.4",
    "@angular/compiler": "^7.1.4",
    "@angular/core": "^7.1.4",
    "@angular/flex-layout": "^2.0.0-beta.10-4905443",
    "@angular/forms": "^7.1.4",
    "@angular/http": "^7.1.4",
    "@angular/material": "5.0.0-rc.1",
    "@angular/platform-browser": "^7.1.4",
    "@angular/platform-browser-dynamic": "^7.1.4",
    "@angular/platform-server": "^7.1.4",
    "@angular/router": "^7.1.4",
    "angular-tree-component": "^8.0.1",
    "chart.js": "^2.7.3",
    "core-js": "^2.6.1",
    "hammerjs": "2.0.8",
    "ng-treetable": "^1.3.3",
    "ng2-charts": "^1.6.0",
    "rxjs": "6.2.2",
    "rxjs-compat": "^6.3.3",
    "zone.js": "^0.8.26"
  },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.11.4",
     "@angular-devkit/core": "^0.6.3",
     "@angular/cli": "^7.1.4",
     "@angular/compiler-cli": "^7.1.4",
     "@angular/language-service": "^7.1.4",
     "@types/hammerjs": "2.0.34",
     "@types/jasmine": "^3.3.4",
     "@types/jasminewd2": "2.0.3",
     "@types/node": "^10.12.18",
     "codelyzer": "^4.5.0",
     "jasmine-core": "^3.3.0",
     "jasmine-spec-reporter": "^4.2.1",
     "karma": "^3.1.4",
     "karma-chrome-launcher": "^2.2.0",
     "karma-cli": "^2.0.0",
     "karma-coverage-istanbul-reporter": "1.3.0",
     "karma-jasmine": "^2.0.1",
     "karma-jasmine-html-reporter": "^1.4.0",
     "protractor": "^5.4.1",
     "rxjs-tslint": "^0.1.6",
     "ts-node": "3.0.6",
     "tslint": "^5.12.0",
     "typescript": "^3.1.6",
     "webpack": "^4.28.1"
   }
 }

{
  "/api": {
  "target": "http://localhost:4200",
  "secure": false
 }
}

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { AdminComponent } from './admin';
import { LoginGuard } from './guard';
import { GuestGuard, AdminGuard } from './guard';
import { NotFoundComponent } from './not-found';
import { ForbiddenComponent } from './forbidden';

export const routes: Routes = [
 {
  path: '',
  component: HomeComponent,
  pathMatch: 'full'
 },
 {
  path: 'login',
  component: LoginComponent,
  canActivate: [GuestGuard]
 },
 {
   path: 'admin',
   component: AdminComponent,
   canActivate: [AdminGuard]
 },
 {
  path: '404',
  component: NotFoundComponent
 },
 {
  path: '403',
  component: ForbiddenComponent
 },
{
  path: '**',
  redirectTo: '/404'
}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
  })
  export class AppRoutingModule { }

var http = require('http');
var server = http.createServer(function(request, response) {
 response.writeHead(200, {"Content-Type": "text/plain"});
 response.end("Hello World!");
});

var port = process.env.PORT || 4200;
server.listen(port);

console.log("Server running at http://localhost:%d", port);

proxy.conf.json

{
  "name": "blah",
  "version": "0.1.1",
  "scripts": {
    "ng": "ng",
    "start": "node app.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
    "private": true,
    "engines":{"node": "8.10.0"},  
    "dependencies": {
    "@angular/animations": "^7.1.4",
    "@angular/cdk": "5.0.0-rc.1",
    "@angular/common": "^7.1.4",
    "@angular/compiler": "^7.1.4",
    "@angular/core": "^7.1.4",
    "@angular/flex-layout": "^2.0.0-beta.10-4905443",
    "@angular/forms": "^7.1.4",
    "@angular/http": "^7.1.4",
    "@angular/material": "5.0.0-rc.1",
    "@angular/platform-browser": "^7.1.4",
    "@angular/platform-browser-dynamic": "^7.1.4",
    "@angular/platform-server": "^7.1.4",
    "@angular/router": "^7.1.4",
    "angular-tree-component": "^8.0.1",
    "chart.js": "^2.7.3",
    "core-js": "^2.6.1",
    "hammerjs": "2.0.8",
    "ng-treetable": "^1.3.3",
    "ng2-charts": "^1.6.0",
    "rxjs": "6.2.2",
    "rxjs-compat": "^6.3.3",
    "zone.js": "^0.8.26"
  },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.11.4",
     "@angular-devkit/core": "^0.6.3",
     "@angular/cli": "^7.1.4",
     "@angular/compiler-cli": "^7.1.4",
     "@angular/language-service": "^7.1.4",
     "@types/hammerjs": "2.0.34",
     "@types/jasmine": "^3.3.4",
     "@types/jasminewd2": "2.0.3",
     "@types/node": "^10.12.18",
     "codelyzer": "^4.5.0",
     "jasmine-core": "^3.3.0",
     "jasmine-spec-reporter": "^4.2.1",
     "karma": "^3.1.4",
     "karma-chrome-launcher": "^2.2.0",
     "karma-cli": "^2.0.0",
     "karma-coverage-istanbul-reporter": "1.3.0",
     "karma-jasmine": "^2.0.1",
     "karma-jasmine-html-reporter": "^1.4.0",
     "protractor": "^5.4.1",
     "rxjs-tslint": "^0.1.6",
     "ts-node": "3.0.6",
     "tslint": "^5.12.0",
     "typescript": "^3.1.6",
     "webpack": "^4.28.1"
   }
 }

{
  "/api": {
  "target": "http://localhost:4200",
  "secure": false
 }
}

我需要一个web.config吗

更新

我在~/frontend/和~/frontend/src中添加了以下内容/ 还将package.json中的start更改为“node index.js” 运行localy并导航到默认端口，但Azure上的行为没有改变，同样可以正常工作

app.js

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { AdminComponent } from './admin';
import { LoginGuard } from './guard';
import { GuestGuard, AdminGuard } from './guard';
import { NotFoundComponent } from './not-found';
import { ForbiddenComponent } from './forbidden';

export const routes: Routes = [
 {
  path: '',
  component: HomeComponent,
  pathMatch: 'full'
 },
 {
  path: 'login',
  component: LoginComponent,
  canActivate: [GuestGuard]
 },
 {
   path: 'admin',
   component: AdminComponent,
   canActivate: [AdminGuard]
 },
 {
  path: '404',
  component: NotFoundComponent
 },
 {
  path: '403',
  component: ForbiddenComponent
 },
{
  path: '**',
  redirectTo: '/404'
}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
  })
  export class AppRoutingModule { }

var http = require('http');
var server = http.createServer(function(request, response) {
 response.writeHead(200, {"Content-Type": "text/plain"});
 response.end("Hello World!");
});

var port = process.env.PORT || 4200;
server.listen(port);

console.log("Server running at http://localhost:%d", port);

更新2

我做了一系列的改变，然后。。。从linux更改为Windows计算机。 NPM是否安装了finagaling

添加了web.config和app.js

  <?xml version="1.0" encoding="utf-8"?>
   <configuration>
    <system.webServer>        
     <handlers>
      <add name="iisnode" path="app.js" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
      <rules>
        <rule name="DynamicContent">
         <match url="/*" />
         <action type="Rewrite" url="app.js"/>
        </rule>
      </rules>
    </rewrite>
   </system.webServer>

如果我将web.config放在根目录下，就会得到http 500响应。声明了“格式不正确的配置文件”的内容

如果我把它放在前端目录中，我会得到一个关于目录列表的403

我认为您的问题是无法到达4200端口。我看到的大多数示例都使用以下代码段：

var port = process.env.PORT || 1337;
server.listen(port);

从他们的文件中。默认情况下，设置端口80或8080。我在部署docker容器时也遇到过类似的问题

我认为您的问题是无法到达4200端口。我看到的大多数示例都使用以下代码段：

var port = process.env.PORT || 1337;
server.listen(port);

从他们的文件中。默认情况下，设置端口80或8080。我在部署docker容器时也遇到过类似的问题

原来“Web应用服务”刀片服务器是一个单端口实例，因此我必须将Azure前端与API分开。花了很长时间才弄明白

我通过简单地部署到一个完整的虚拟机解决了这个问题，一切都正常了…

结果表明，“Web应用服务”刀片服务器是一个单端口实例，因此我必须将Azure前端与API分开。花了很长时间才弄明白

我通过简单地部署到一个完整的虚拟机解决了这个问题，一切都正常了…

嗨，杰米-我也看到了上面提到的。通常在app.js中，这个examaple为该代码段使用index.js文件。我的项目中目前没有这两个文件。我将尝试创建它，并将其放在frontend/的根目录中，看看它是否有所不同，并更新问题。唯一的另一个问题可能是，我应该把index.js文件指向哪里？将发布结果我将该文件放在~/frontend和~/frontend/src/中，但似乎在行为上没有任何区别。更新了问题以添加此文件，因为它位于我的项目中。我在浏览器控制台上注意到，当它声明“无法获取/”时，它正在生成404，但我想这正是预期的结果。嗨，杰米，我也看到了上面提到的。通常在app.js中，这个examaple为该代码段使用index.js文件。我的项目中目前没有这两个文件。我将尝试创建它，并将其放在frontend/的根目录中，看看它是否有所不同，并更新问题。唯一的另一个问题可能是，我应该把index.js文件指向哪里？将发布结果我将该文件放在~/frontend和~/frontend/src/中，但似乎在行为上没有任何区别。更新了问题以添加此文件，因为它位于我的项目中。我确实在浏览器控制台上注意到，当它声明“无法获取/”时，它正在生成一个404，但我想这正是预期的。你能提供一个MS参考网站来确认这一点吗？我找不到任何文件说明这一点。你能提供一个MS参考网站来确认这一点吗？我找不到任何文件说明这一点。