如何创建包含Angular前端与.NET 8 API后端的单个Docker镜像？

核心思路 #

通过Docker多阶段构建分别编译Angular前端和.NET 8后端，将两者打包到同一个运行镜像中，最终用.NET后端托管Angular静态文件，同时保留API和Swagger的访问路径。

步骤1：Docker多阶段构建文件（Dockerfile） #

# 阶段1：构建Angular前端
FROM node:20-alpine AS angular-build
WORKDIR /app
# 优先复制依赖文件缓存，加快构建速度
COPY ./angular-app/package*.json ./
RUN npm ci --only=production
COPY ./angular-app .
# 构建生产环境前端文件，输出到dist目录
RUN npm run build -- --configuration production

# 阶段2：构建自包含.NET 8后端
FROM mcr.microsoft.com/dotnet/sdk:8.0 AS dotnet-build
WORKDIR /app
COPY ./dotnet-api/*.csproj ./
RUN dotnet restore
COPY ./dotnet-api .
# 发布自包含linux-x64版本，输出到publish目录
RUN dotnet publish -c Release -o ./publish \
    --self-contained true \
    --runtime linux-x64 \
    --no-restore \
    --no-build

# 阶段3：合并到运行镜像（采用轻量debian镜像）
FROM debian:bookworm-slim AS runtime
WORKDIR /app
# 复制.NET发布产物
COPY --from=dotnet-build /app/publish .
# 复制Angular构建后的静态文件到指定目录
COPY --from=angular-build /app/dist/your-angular-app-name ./angular-dist
# 暴露.NET应用监听端口（默认80，可在appsettings.json修改）
EXPOSE 80
# 启动.NET应用（替换为你的项目可执行文件名）
ENTRYPOINT ["./YourDotNetApiName"]

步骤2：配置.NET后端托管前端静态文件 #

修改.NET项目的Program.cs，添加静态文件托管和SPA路由支持，确保根路径指向Angular静态文件，同时保留API和Swagger的访问：

var builder = WebApplication.CreateBuilder(args);

// 注册API和Swagger服务
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// 启用Swagger（生产环境可按需关闭）
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI(c => 
    {
        c.SwaggerEndpoint("/swagger/v1/swagger.json", "Backend API V1");
    });
}

// 托管Angular静态文件，根路径映射到angular-dist目录
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "angular-dist")),
    RequestPath = "" // 根路径指向前端静态资源
});

// 配置API路由
app.UseRouting();
app.UseAuthorization();
app.MapControllers();

// SPA路由 fallback：未匹配到API的请求返回前端index.html
app.MapFallbackToFile("/index.html");

app.Run();

步骤3：构建和运行镜像 #

1. 构建镜像：

docker build -t combined-app .

2. 运行容器，映射端口2222到容器内的80端口：

docker run -d -p 2222:80 combined-app

验证访问 #

• 前端：http://localhost:2222/
• Swagger：http://localhost:2222/swagger/index.html

注意事项 #

• 替换Dockerfile和代码中的占位符（如your-angular-app-name、YourDotNetApiName、项目目录路径）
• 自包含发布会增大镜像体积，若无需严格自包含可移除--self-contained true（但需镜像包含.NET runtime）
• 生产环境建议关闭Swagger或添加访问限制
• 确保Angular构建输出目录与Dockerfile中复制的路径一致

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