时间戳

首页 > 解决方案 > 生产中的 Asp.net 核心和 Angular：不提供 Spa

asp.net - 生产中的 Asp.net 核心和 Angular：不提供 Spa

问题描述

我的 Web 应用程序是从 dotnet core 3.0 Angular 模板构建的。我想将第一个版本部署到生产中，但我正在努力提供 Angular 应用程序。我使用 Kestrel 作为网络服务器（它是一个 Intranet 应用程序）。

我已经发布了dotnet publish -c Release -o ../app-dist构建 Asp.net 应用程序的应用程序，它触发ng了构建客户端的生产版本。生成的文件夹结构包括一个app-dist/wwwroot文件夹，其中包含一些资产，例如 favicon，并且它有一个app-dist/ClientApp/dist/app文件夹，其中包含index.html和编译的js资产css。如果我通过运行dotnet app.dllin启动应用程序app-dist，Kestrel 会启动，但它无法为客户端应用程序提供服务。wwwroot我可以从用于用户身份验证的 Razor 页面访问次要资产。

在我的 docker 部署中，尝试访问https://host/或https://host/index.html（以及http等效项）时出现以下错误：

System.InvalidOperationException：SPA 默认页面中间件无法返回默认页面“/index.html”，因为未找到它，并且没有其他中间件处理该请求。您的应用程序正在生产模式下运行，因此请确保它已发布，或者您已手动构建了 SPA。或者，您可能希望切换到开发环境。

app-dist当我在我的 macOS 开发系统上运行相同的命令时，我得到相同的错误（在第一次设置之后export ASPNETCORE_ENVIRONMENT=production）。

在我的Startup.cs我有以下内容：

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc(); 
...

}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseStaticFiles();
    if (!env.IsDevelopment())
    {
        app.UseSpaStaticFiles();
    }

...

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller}/{action=Index}/{id?}");
        endpoints.MapRazorPages();
    });
    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";
        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "start");
        }
    });
}

在我的 csproj 中：

<PropertyGroup>
    <TargetFramework>netcoreapp3.0</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
    <BuildServerSideRenderer>false</BuildServerSideRenderer>
</PropertyGroup>

...

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />
    <ItemGroup>
        <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
        <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
        <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
                <RelativePath>%(DistFiles.Identity)</RelativePath>
                <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
                <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
        </ResolvedFileToPublish>
    </ItemGroup>
</Target>

我曾尝试将 Angularindex.html和编译文件复制到wwwroot文件ClientApp夹中，但都没有任何区别。我也试过设置spa.Options.SourcePath = "ClientApp/dist/app";。 什么似乎配置不正确，或者我接下来应该调查什么？

标签： asp.netangularproduction

解决方案

如果您想在生产环境中更改服务应用程序的目录，可以通过ConfigureServices以下方式进行：

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

    // In production, the Angular files will be served from this directory
    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/dist";
    });
}

Aborveconfiguration.RootPath应该更改为您希望的路径。

推荐阅读