如何构建并发布Asp.Net Core后端与Angular前端分离项目

项目结构说明 #

• 后端ASP.NET Core 5项目位于serverApi文件夹
• 前端Angular 15项目位于clientSpa文件夹，已添加至Visual Studio解决方案但物理路径独立

前端package.json配置 #

{
  "name": "client-spa",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/cdk": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/material": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@auth0/angular-jwt": "^5.1.2",
    "jalali-moment": "^3.3.11",
    "jalali-ts": "^2.0.5",
    "material-icons": "^1.13.1",
    "ng-persian-datepicker": "^6.1.2",
    "ngx-mat-select-search": "^7.0.0",
    "ngx-print": "^1.3.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular/cli": "~15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.8.2"
  }
}

后端serverApi.csproj配置 #

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

    <PropertyGroup>
        <TargetFramework>net5.0</TargetFramework>
    </PropertyGroup>

    <ItemGroup>
      <PackageReference Include="AutoMapper" Version="8.1.1" />
      <PackageReference Include="AutoMapper.Extensions.Microsoft.DependencyInjection" Version="6.1.1" />
      <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="5.0.17" />
      <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="5.0.17" />
      <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="5.0.17" />
      <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="5.0.17">
        <PrivateAssets>all</PrivateAssets>
        <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
      </PackageReference>
      <PackageReference Include="Microsoft.EntityFrameworkCore.Proxies" Version="5.0.17" />
      <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="5.0.17" />
      <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="5.0.17">
        <PrivateAssets>all</PrivateAssets>
        <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
      </PackageReference>
      <PackageReference Include="Newtonsoft.Json" Version="13.0.2" />
      <PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
    </ItemGroup>

    <ItemGroup>
      <Folder Include="Resources\Images" />
    </ItemGroup>

</Project>

构建与发布步骤 #

第一步：构建Angular前端 #

• 打开命令行，进入clientSpa文件夹
• 执行生产环境构建命令：

  ng build --configuration production
  

  构建产物默认输出到clientSpa/dist/client-spa文件夹，可通过angular.json的outputPath字段修改路径

第二步：配置ASP.NET Core后端托管前端静态文件 #

在serverApi项目的Startup.cs中添加以下配置（确保放在路由、认证等中间件之后）：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 其他已有的中间件配置（如异常处理、路由、认证等）

    // 托管Angular静态文件
    app.UseStaticFiles();
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(env.ContentRootPath, "../clientSpa/dist/client-spa")),
        RequestPath = ""
    });

    // SPA fallback路由，保障Angular单页路由正常工作
    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "../clientSpa";
        // 仅开发环境启用Angular Cli代理，生产环境无需配置
        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "start");
        }
    });
}

第三步：构建ASP.NET Core后端 #

• 在Visual Studio中右键serverApi项目，选择发布
• 选择文件夹作为发布目标，指定本地发布目录（如serverApi/publish）
• 点击发布，等待后端构建完成，前端静态文件会自动同步到发布目录中

第四步：部署到目标服务器（IP：X.Y.Z.W） #

手动部署方式

1. 将本地发布目录（serverApi/publish）的所有文件，通过FTP、SCP或远程桌面复制到服务器的目标文件夹（如Windows服务器的C:\inetpub\wwwroot\YourApp，Linux服务器的/var/www/YourApp）
2. 服务器环境配置：
   • Windows：安装.NET 5运行时，在IIS中创建网站，指向发布目录，设置应用程序池为.NET 5或无托管代码
   • Linux：安装.NET 5运行时，创建系统服务配置文件（如yourapp.service），设置开机自启，通过systemctl命令管理服务

Visual Studio远程发布方式

1. 在Visual Studio发布向导中，选择远程服务器（或对应服务器类型）
2. 输入服务器IP（X.Y.Z.W）、认证信息、目标路径，直接完成发布

第五步：验证部署 #

• 访问http://X.Y.Z.W，检查前端页面是否正常加载
• 测试API接口调用，确认前后端交互功能正常

内容的提问来源于stack exchange，提问作者R. Nourmandi