無法訪問Azure Web App Linux或Windows上的NodeJS站點

Question

將我的Web應用程序部署在Azure上確實很困難。 我可以運行npm start並將其編譯並在localhost上運行，而端口4200沒問題。

我可以通過git將其部署到Azure上，然后ssh和npm安裝所有內容並在那里進行編譯。 但是無論我去網站URL .azurewebsites.net做什么，我總是得到“無法獲取/”

我不知道我在想什么。 這是服務器上的結構

-~/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"
   }
 }

APP-routing.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 { }

proxy.conf.json

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

我需要一個web.config嗎？

UPDATE

我將以下內容添加到〜/ frontend /和〜/ frontend / src /中。還將package.json中的開始更改為“ node index.js”，再次按預期方式運行本地語言並導航到默認端口，但行為沒有變化Azure上。

app.js

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);

UPDATE2

我做了很多更改，並得到了..somewhere ...從linux更改為Windows機器。 NPM安裝了嗎？

添加了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。

Answer 1

我認為您的問題是您無法訪問端口4200。我看到的大多數示例都使用以下代碼段：

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

這是他們文檔中的代碼示例 。 默認情況下，端口80或8080被設置。 我在部署Docker容器時遇到了類似的問題。

Answer 2

事實證明，“ Web應用程序服務”刀片是單個端口實例，因此我必須將Azure前端與API分開。 花了很長時間才弄清楚這一點。

我只需將其部署到完整的VM即可解決所有問題。