Question

要在Azure上部署我的Web应用程序确实很困难。我可以运行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吗？

更新

我将以下内容添加到〜/ 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

我做了很多修改，然后在某处找到了... 从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);

Here is the code example来自他们的文档。默认情况下，端口80或8080被设置。我在部署Docker容器时遇到了类似的问题。

Answer 2

原来，“ Web App Service”刀片是单个端口实例，因此我必须将Azure前端与API分开。花了很长时间才弄清楚这一点。

我只需将其部署到完整的VM即可解决所有问题……

无法访问Azure Web App Linux或Windows上的NodeJS站点

2 个答案: