同一域名部署多Angular5应用与ASP.NET Core API技术问询

我来分享下把多个Angular 5应用和ASP.NET Core 2.0 API部署到同一域名下的实操方案——这是我之前处理过类似场景的经验，应该能帮到你：

首先得给每个服务分配专属路径，避免路由冲突，推荐的路径规划如下：

• 主Web前端：example.com/frontend
• 后台管理应用：example.com/admin
• 客户追踪应用：example.com/client
• ASP.NET Core API：example.com/api

所有服务共享同一域名，仅通过路径区分，完全符合你的需求。

每个Angular应用都需要调整打包配置，确保资源路径和路由能适配对应的域名子路径。Angular 5使用的是.angular-cli.json配置文件，具体操作如下：

1. 针对主前端应用，修改.angular-cli.json的apps节点：

{
  "apps": [
    {
      "root": "src",
      "outDir": "dist/frontend",
      "baseHref": "/frontend/",
      "deployUrl": "/frontend/",
      // 保留其他原有配置
    }
  ]
}

2. 同理，后台管理应用设置baseHref: "/admin/"、deployUrl: "/admin/"，输出目录设为dist/admin；客户应用设置baseHref: "/client/"、deployUrl: "/client/"，输出目录设为dist/client。

3. 分别执行生产打包命令：

ng build --prod --base-href /frontend/
ng build --prod --base-href /admin/
ng build --prod --base-href /client/

打包完成后，三个应用的静态资源会分别存放在dist/frontend、dist/admin、dist/client目录中。

ASP.NET Core需要同时托管三个Angular应用的静态文件，还要处理API路由和Angular单页应用的路由 fallback（避免刷新页面出现404）。

1. 复制静态文件到API项目 #

把三个Angular应用打包后的dist/frontend、dist/admin、dist/client目录，复制到ASP.NET Core项目的wwwroot目录下，最终wwwroot的结构应该是：

wwwroot/
├── frontend/
│   ├── index.html
│   ├── vendor.js
│   ├── main.js
│   └── 其他静态资源
├── admin/
│   ├── index.html
│   └── ...
├── client/
│   ├── index.html
│   └── ...

2. 修改Startup.cs配置 #

在ConfigureServices和Configure方法中添加静态文件托管和SPA路由支持：

（1）ConfigureServices方法 #

添加SPA静态文件服务：

using Microsoft.AspNetCore.SpaServices;

public void ConfigureServices(IServiceCollection services)
{
    // 保留原有API配置，比如AddMvc、AddAuthentication等
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_0);

    // 配置SPA静态文件服务
    services.AddSpaStaticFiles(configuration =>
    {
        // 无需指定单一root，后续会按路径区分不同SPA
    });
}

（2）Configure方法 #

配置静态文件中间件，并为每个SPA设置路由 fallback：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    // 保留原有中间件配置，比如异常处理、认证等
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles(); // 托管wwwroot下的所有静态文件
    app.UseSpaStaticFiles(); // 启用SPA专属静态文件服务

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

    // 处理主前端SPA的路由 fallback
    app.MapWhen(context => context.Request.Path.StartsWithSegments("/frontend"), frontendApp =>
    {
        frontendApp.UseSpa(spa =>
        {
            spa.Options.SourcePath = "wwwroot/frontend";
            spa.Options.DefaultPage = "/frontend/index.html";
        });
    });

    // 处理后台管理SPA的路由 fallback
    app.MapWhen(context => context.Request.Path.StartsWithSegments("/admin"), adminApp =>
    {
        adminApp.UseSpa(spa =>
        {
            spa.Options.SourcePath = "wwwroot/admin";
            spa.Options.DefaultPage = "/admin/index.html";
        });
    });

    // 处理客户应用SPA的路由 fallback
    app.MapWhen(context => context.Request.Path.StartsWithSegments("/client"), clientApp =>
    {
        clientApp.UseSpa(spa =>
        {
            spa.Options.SourcePath = "wwwroot/client";
            spa.Options.DefaultPage = "/client/index.html";
        });
    });
}

这里用MapWhen根据请求路径区分不同SPA，确保用户访问example.com/frontend/products这类Angular路由时，刷新页面不会出现404，ASP.NET Core会返回对应应用的index.html，由Angular处理内部路由。

因为所有应用都在同一域名下，理论上不存在跨域问题，但要确保认证Cookie的路径设置为/，这样所有路径下的请求都能携带Cookie。如果使用ASP.NET Core的Cookie认证，在ConfigureServices中配置：

services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie(options =>
    {
        options.Cookie.Path = "/"; // 确保全路径可访问Cookie
        // 保留其他认证配置
    });

1. 确保服务器安装了.NET Core 2.0 Runtime和ASP.NET Core Module；
2. 发布ASP.NET Core项目，将发布后的文件部署到IIS站点，站点物理路径指向发布后的wwwroot上级目录；
3. 设置IIS站点的绑定域名（如example.com），确保端口配置正确；
4. 若遇到路由问题，可添加URL Rewrite规则，将请求转发到对应SPA的index.html（一般ASP.NET Core的配置已覆盖此场景）。

部署完成后，分别验证以下场景：

• 访问example.com/frontend：测试主前端的home、products等路由是否正常，刷新页面是否能加载；
• 访问example.com/admin：测试后台CRUD操作和认证流程，确认API请求能正常到达example.com/api；
• 访问example.com/client：测试客户订单追踪功能，验证API交互是否正常；
• 访问example.com/api/products：直接测试API接口，确认数据返回正常。

内容的提问来源于stack exchange，提问作者vslzl