无法将ASP.NET Core 2.1 Angular应用部署到Azure。

Question

22 浏览2023年3月20日

匿名的 2023年3月21日

0 Comments

我已经努力了很多天，试图找出如何部署我的Angular和ASP.NET Core应用程序。该项目是使用Visual Studio 2017的ASP.NET Core Web应用程序Angular模板构建的，在本地环境中可以正常工作。Angular应用程序运行并与API正确通信。

我尝试了许多不同的教程和博客文章（特别是这个和这个），但似乎无法弄清楚。

我目前的方法是直接从Visual Studio发布到Azure应用服务，但是当点击发布时，似乎无法构建应用程序。下面是应用程序发布的传输中可以看到的错误，为了方便起见，我已经缩短了输出中的文件路径。这些TypeScript错误在本地环境中通过Kestrel构建和运行应用程序时也会出现，但是应用程序可以正常工作（前端和后端），所以我从未解决过这些错误。为什么这些错误会破坏发布构建，而不会破坏开发构建？

1>------ Build started: Project: WebAPI, Configuration: Release Any CPU ------
1>~\project-website\tsconfig.json(18,15): error TS6046: Build:Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'esnext'.
1>~\project-website\node_modules\@types\node\assert.d.ts(2,68): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(53,68): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(62,94): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(62,101): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(62,104): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(64,98): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(64,105): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(64,108): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(72,47): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(72,53): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(72,56): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(99,61): error TS1005: Build:';' expected.
1>~\project-website\tsconfig.json(18,15): error TS6046: Build:Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'esnext'.
1>~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,60): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,61): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,75): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,77): error TS1011: Build:An element access expression should take an argument.
1>~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(40,40): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(40,46): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(47,38): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(47,44): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\forms\forms.d.ts(2727,65): error TS1005: Build:'>' expected.
1>~\project-website\node_modules\@angular\forms\forms.d.ts(2727,85): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\forms\forms.d.ts(2727,87): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\forms\forms.d.ts(2727,88): error TS1109: Build:Expression expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(2,68): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(53,68): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(62,94): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(62,101): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(62,104): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(64,98): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(64,105): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(64,108): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(72,47): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(72,53): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(72,56): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(99,61): error TS1005: Build:';' expected.
WebAPI -> ~\bin\Release\netcoreapp2.1\WebAPI.dll
1>Done building project "WebAPI.csproj".
2>------ Publish started: Project: WebAPI, Configuration: Release Any CPU ------
C:\Program Files (x86)\Microsoft SDKs\TypeScript\3.0\tsc.exe   --project "~\project-website\e2e\tsconfig.json" --listEmittedFiles --locale en-US --listFiles --noEmit
~\project-website\tsconfig.json(18,15): Error TS6046: Build:Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'esnext'.
~\project-website\node_modules\@types\node\assert.d.ts(2,68): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(53,68): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(62,94): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(62,101): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(62,104): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(64,98): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(64,105): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(64,108): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(72,47): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(72,53): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(72,56): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(99,61): Error TS1005: Build:';' expected.
C:\Program Files (x86)\Microsoft SDKs\TypeScript\3.0\tsc.exe   --project "~\project-website\tsconfig.json" --listEmittedFiles --locale en-US --listFiles --noEmit
~\project-website\tsconfig.json(18,15): Error TS6046: Build:Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'esnext'.
~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,60): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,61): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,75): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,77): Error TS1011: Build:An element access expression should take an argument.
~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(40,40): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(40,46): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(47,38): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(47,44): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\forms\forms.d.ts(2727,65): Error TS1005: Build:'>' expected.
~\project-website\node_modules\@angular\forms\forms.d.ts(2727,85): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\forms\forms.d.ts(2727,87): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\forms\forms.d.ts(2727,88): Error TS1109: Build:Expression expected.
~\project-website\node_modules\@types\node\assert.d.ts(2,68): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(53,68): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(62,94): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(62,101): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(62,104): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(64,98): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(64,105): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(64,108): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(72,47): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(72,53): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(72,56): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(99,61): Error TS1005: Build:';' expected.
WebAPI -> ~\bin\Release\netcoreapp2.1\WebAPI.dll
WebAPI -> ~\obj\Release\netcoreapp2.1\PubTmp\Out\
Updating file (MyAppseb\web.config).
Updating file (MyAppseb\WebAPI.deps.json).
Updating file (MyAppseb\WebAPI.runtimeconfig.json).
Publish Succeeded.
2>Build failed. Check the Output window for more details.
========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
========== Publish: 0 succeeded, 1 failed, 0 skipped ==========

解决了这个问题后，我仍然怀疑由于我不知道如何配置某些文件（例如startup.cs和launchsettings.json）以进行发布，所以它可能无法正确运行。下面是这两个文件的内容。在startup.cs方面，我是否需要修改任何内容，例如cors策略、spa选项、源路径等等？在launchsettings.json方面，我是否需要为发布模式创建一个单独的配置文件？我之所以问这个问题，是因为两个配置文件当前都将环境变量设置为“开发环境”？

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.Http.Features;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Server.Kestrel.Core;
using Microsoft.AspNetCore.SpaServices.AngularCli;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
using WebAPI.Data;
namespace WebAPI
{
    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().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
            services.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy",
                    builder => builder.AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .AllowCredentials());
            });
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "project-website/dist";
            });
            services.Configure(o => 
            {
                o.ValueLengthLimit = int.MaxValue;
                o.MultipartBodyLengthLimit = int.MaxValue;
                o.MemoryBufferThreshold = int.MaxValue;
            });
            services.Configure(options =>
            {
                options.Limits.MaxRequestBodySize = int.MaxValue; // if don't set default value is: 30 MB
            });
            services.AddDbContext(options =>
                options.UseSqlServer(Configuration.GetConnectionString("ProjectLiveDB")));
        }
        // 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();
            }
            else
            {
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }
            app.UseCors("CorsPolicy");
            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseSpaStaticFiles();
            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action=Index}/{id?}");
            });
            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "project-website";
                if (env.IsDevelopment())
                {
                    spa.Options.StartupTimeout = new TimeSpan(0, 0, 120);
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });
        }
    }
}

launchSettings.json

{


  "$schema": "http://json.schemastore.org/launchsettings.json",
  "iisSettings": {
    "windowsAuthentication": false, 
    "anonymousAuthentication": true, 
    "iisExpress": {
      "applicationUrl": "http://localhost:62508",
      "sslPort": 0
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "launchUrl": "",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "WebAPI": {
      "commandName": "Project",
      "launchBrowser": true,
      "launchUrl": "",
      "applicationUrl": "http://localhost:5001",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

非常感谢任何帮助/指导。我只是想知道部署我的应用程序的最佳和最简单的方法，因为这个问题一直很烦人。我是否配置错误？我是否需要考虑其他的部署方式？谢谢

附加信息-运行Angular 11.0.8和TypeScript 4.0.5

更新1

感谢Jason Pan的评论，我研究并修复了TypeScript错误。在我的情况下，这是由于在Visual Studio 2017上使用TypeScript 4.0，而VS本身只有3.0版本的TypeScript SDK引起的。

为了发现这个错误，我使用了这里找到的解决方案。然后，我只需要从这里安装Visual Studio的TypeScript 4.0，并将我的*.csproj文件的'TypeScriptToolsVersion'标签更新为4.0。现在应用程序可以在没有任何错误的情况下构建，并成功发布到我的Azure应用服务中。

然而，当我使用URL“https://MyAppseb.azurewebsites.net/”访问服务时，我现在遇到了500内部服务器错误，除此之外没有提供更多详细信息。这是否与我的应用程序配置有关？

更新2

我终于成功将Angular应用程序部署到Azure Web服务。由于某种原因，当我点击“发布”按钮时，它未能实际发布Angular应用程序，只上传了ASP.NET API代码。因此，我手动发布了Angular“dist”文件夹的内容，现在它可以正常工作。我还不得不将startup.cs中的一行从

services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "project-website/dist";
        });

更改为

services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "project-website/dist/project-website";
        });

现在的问题是，我无法发送请求到API。无论我发起什么请求，它都返回500错误。例如- https://.azurewebsites.net/api/{controller}/GetValues

0

1 答案

匿名的 · Answer 1 · 2023-03-24T18:02:50+00:00

问题的原因是在Azure上部署ASP.NET Core 2.1 Angular应用程序时，API返回500错误。查看Kudu中的'stdout'文件日志时，发现以下错误：System.Data.SqlClient.SqlException (0x80131904): Invalid object name 'Clients'。这时我意识到我忘记在Azure SQL数据库中创建与本地数据库匹配的所需表。为了解决这个问题，我使用SQL Server登录到Azure数据库实例，并创建了所需的表，与本地数据库的模式匹配。然后刷新应用程序，API现在能够正确访问了。