无法使用Visual Studio 2017将ASP.NET核心角度项目发布到Azure

时间:2018-05-08 08:46:05

标签: c# asp.net angular azure asp.net-core

我在Visual Studio 2017(版本15.5.4)中有一个简单的Web应用程序,它是一个显示“Hello World!”的主页。来自后端。

Microsoft.AspNetCore.All的版本是2.0.7。

我在申请中有以下内容:

|    Backend            |   Frontend (Angular)     |
|  Model, Controller    | Service, Model, Component|

当我在本地运行应用程序时,它成功运行。但是,当我将其发布到我的Azure Web应用程序时,它会失败。

Web应用程序的诊断日志:

018-05-07 13:16:38.634 +00:00 [Error] Microsoft.AspNetCore.NodeServices: ERROR Response {
  _body: 'You do not have permission to view this directory or page.',
  status: 403,
  ok: false,
  statusText: 'Forbidden',
  headers: 
   Headers {
     _headers: 
      Map {
        'content-length' => [Array],
        'content-type' => [Array],
        'server' => [Array],
        'x-powered-by' => [Array],
        'date' => [Array] },
     _normalizedNames: 
      Map {
        'content-length' => 'content-length',
        'content-type' => 'content-type',
        'server' => 'server',
        'x-powered-by' => 'x-powered-by',
        'date' => 'date' } },
  type: 2,
  url: 'http://pweb-dev-ferfer.azurewebsites.net/home' }

我在SO中搜索并应用了其他问题的解决方案,我按照建议here创建了web.config。

我建议Here没有ASPNETCORE_ENVIRONMENT Development

这是startup.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.SpaServices.Webpack;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace WebApp
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                {
                    HotModuleReplacement = true
                });
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }

            app.UseStaticFiles();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");

                routes.MapSpaFallbackRoute(
                    name: "spa-fallback",
                    defaults: new { controller = "Home", action = "Index" });
            });
        }
    }
}

型号:Home.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApp.Models
{
    public class Home
    {
        public string msg { get; set; }
    }
}

控制器:HomeController.cs

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApp.Models;

namespace WebApp.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Error()
        {
            ViewData["RequestId"] = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
            return View();
        }
        [HttpGet]
        [Produces("application/json")]
        [Route("home")]
        public IActionResult Get()
        {
            try
            {
                Home home = new Home();
                home.msg = "Hello World!";
                return Ok(home);

            }
            catch (Exception ex)
            {
                return BadRequest($"Failed to get message {ex}");
            }
        }
    }
}

服务:home.service.ts

import { Http, Response } from '@angular/http';
import { Injectable, Inject } from "@angular/core";
import 'rxjs/add/operator/map';
import { IHome } from '../models/Home';
@Injectable()
export class HomeService
{
    myAppUrl: string = "";
    constructor(private _http: Http, @Inject('BASE_URL') baseUrl: string) {
        this.myAppUrl = baseUrl;
    }
    getMessage() {
        return this._http.get(this.myAppUrl + "home").map((response: Response) => response.json());

    }
}

组件:home.component.ts

import { Component, OnInit } from '@angular/core';
import { HomeService } from '../../services/home.service';
import { IHome } from '../../models/Home';
import { ActivatedRoute } from '@angular/router';
@Component({
    selector: 'home',
    templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {

    home: IHome;
    constructor(private homeService: HomeService, private route: ActivatedRoute)
    {
    }

    ngOnInit(): void {
        this.homeService.getMessage().subscribe(data => this.home = <IHome>data);
    }

}

更新

如果我不使用角度服务,我可以发布网络应用程序。因此,如果我要求Home组件使用home.service来获取msg,则发布失败。

这是package.json

{
  "name": "WebApp",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "devDependencies": {
    "@angular/animations": "4.2.5",
    "@angular/common": "4.2.5",
    "@angular/compiler": "4.2.5",
    "@angular/compiler-cli": "4.2.5",
    "@angular/core": "4.2.5",
    "@angular/forms": "4.2.5",
    "@angular/http": "4.2.5",
    "@angular/platform-browser": "4.2.5",
    "@angular/platform-browser-dynamic": "4.2.5",
    "@angular/platform-server": "4.2.5",
    "@angular/router": "4.2.5",
    "@ngtools/webpack": "1.5.0",
    "@types/chai": "4.0.1",
    "@types/jasmine": "2.5.53",
    "@types/webpack-env": "1.13.0",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "chai": "4.0.2",
    "css": "2.2.1",
    "css-loader": "0.28.4",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jasmine-core": "2.6.4",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.3",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.2",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "typescript": "2.4.1",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.12"
  }
}

1 个答案:

答案 0 :(得分:0)

我的猜测是Azure ASP.NET Core Runtime尚未升级到2.0.7。一种解决方案是将Microsoft.NETCore.App软件包降级到2.0.6或等到Azure服务更新其核心运行时。