如何将内嵌SPA的.NET应用容器化？需添加npm build步骤

问题 #

我有一个内嵌SPA的.NET应用，SPA位于名为client的文件夹中。本地运行该应用需执行以下两步：

• 在client文件夹中运行命令：npm run build
• 在项目根目录运行命令：dotnet run

当前已编写的Dockerfile如下：

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["WebApplication2/WebApplication2.csproj", "WebApplication2/"]
RUN dotnet restore "WebApplication2/WebApplication2.csproj"
COPY . .
WORKDIR "/src/WebApplication2"
RUN dotnet build "WebApplication2.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "WebApplication2.csproj" -c Release -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "WebApplication2.dll"]

请问如何在该Dockerfile中添加npm run build步骤，以便成功部署并访问容器化后的应用？

解决方案 #

通过多阶段构建先完成SPA的编译，再将构建产物整合到.NET应用的发布包中即可，具体修改如下：

1. 新增SPA构建阶段 #

在Dockerfile最开头添加一个基于Node.js镜像的独立阶段，专门处理SPA的依赖安装与构建：

# 构建SPA
FROM node:18 AS spa-build
WORKDIR /client
# 先复制依赖配置文件，利用Docker缓存优化构建速度
COPY client/package*.json ./
RUN npm ci
# 复制整个client目录的代码
COPY client/ ./
# 执行SPA构建命令
RUN npm run build

2. 将SPA产物整合到.NET项目 #

在build阶段完成.NET restore后，把SPA的构建产物复制到.NET项目的静态文件目录（默认是wwwroot，如果你的SPA构建输出目录不是dist，请对应调整路径）：

修改原build阶段内容，在COPY . .之后添加复制步骤：

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["WebApplication2/WebApplication2.csproj", "WebApplication2/"]
RUN dotnet restore "WebApplication2/WebApplication2.csproj"
COPY . .
# 新增：将SPA构建产物复制到.NET项目的静态文件目录
COPY --from=spa-build /client/dist ./WebApplication2/wwwroot
WORKDIR "/src/WebApplication2"
RUN dotnet build "WebApplication2.csproj" -c Release -o /app/build

完整修改后的Dockerfile #

# 构建SPA
FROM node:18 AS spa-build
WORKDIR /client
COPY client/package*.json ./
RUN npm ci
COPY client/ ./
RUN npm run build

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["WebApplication2/WebApplication2.csproj", "WebApplication2/"]
RUN dotnet restore "WebApplication2/WebApplication2.csproj"
COPY . .
# 复制SPA构建产物到.NET项目的静态文件目录
COPY --from=spa-build /client/dist ./WebApplication2/wwwroot
WORKDIR "/src/WebApplication2"
RUN dotnet build "WebApplication2.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "WebApplication2.csproj" -c Release -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "WebApplication2.dll"]

关键说明 #

• 若你的npm run build输出目录不是dist，请将/client/dist替换为实际路径（比如build）
• 使用npm ci而非npm install可确保依赖版本与package-lock.json完全一致，提升构建稳定性
• 多阶段构建只会保留final阶段的内容，不会包含Node.js镜像的冗余文件，最终镜像体积更小

构建与运行命令 #

# 构建镜像
docker build -t net-spa-app .

# 运行容器
docker run -d -p 8080:80 net-spa-app

访问http://localhost:8080即可看到容器化后的应用。

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