如何启动已发布的 ASP.NET Angular 应用程序

Question

我有一个由像in the tutorial 这样的 ASP.NET 应用程序管理的 Angular 应用程序。在开发环境中，我可以在 ASP.NET 的项目目录中执行dotnet run。然后构建项目和输出

info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:5273
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: production
info: Microsoft.Hosting.Lifetime[0]
      Content root path: C:\Dev\MyApp\src\MyApp.Client\
info: Microsoft.AspNetCore.SpaProxy.SpaProxyLaunchManager[0]
      No SPA development server running at https://localhost:44459 found.
info: Microsoft.AspNetCore.SpaProxy.SpaProxyLaunchManager[0]
      SPA development server running at 'https://localhost:44459'
info: Microsoft.AspNetCore.SpaProxy.SpaProxyMiddleware[0]
      SPA proxy is ready. Redirecting to https://localhost:44459

运行开发脚本，端口 5273 或端口 44459 将重定向到实际的 Angular 应用程序。

但是当我运行dotnet publish --configuration test 然后运行dotnet bin/test/net6.0/MyApp.Client.dll 时，ASP.NET 应用程序得到了服务，但是导航到端口只返回 404。我如何以在给定端口上为 Angular 应用程序提供服务的方式实际运行应用程序和开发中的一模一样？我是否需要运行 ASP.NET 应用程序，然后手动提供 Angular 应用程序的构建文件？

我的csproj在下面

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp\</SpaRoot>
    <SpaProxyServerUrl>https://localhost:44459</SpaProxyServerUrl>
    <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="6.0.8" />
  </ItemGroup>

  <ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
  </ItemGroup>

    <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>
  
  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --configuration production" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
</Project>

Answer 1

虽然 ASP.NET 管理 Angular 的开发，但没有对已发布应用程序的管理。

为了部署应用程序，您必须运行dotnet publish，然后使用dotnet <your dll e.g. bin/test/net6.0/publish/myapp.dll> 为 ASP.NET 应用程序运行实际的 dll。然后通过 Nginx 或 VSCode 的 Live Server 之类的工具提供已发布的 Angular 文件。

发布的文件将在您的发布目录中的wwwroot 文件夹中，如上所示。或者您可以在应用程序目录中运行ng build，它会将其放入名为dist 的文件夹中，然后完全按照指定的in the Angular docs 部署它们。

因此，总结一下 ASP.NET 并没有像在开发中那样管理已部署的 Angular 应用程序。