一、介绍
本文介绍ASP.Net Core Angular应用使用Docker进行容器化部署的第二种方法，主要是通过node镜像对前端Angular进行编译
二、环境
- Visual Studio 2019
- Angular cli 9.1.3
- Nodejs 14.0.0
- Docker
三、部署
1、添加Docker支持
在项目上右键，选择【添加】--【Docker支持...】
在弹出的Docker文件选项选择框中选择【Linux】选项，然后点击【确定】即可
2、生成镜像
可根据自己的项目调整一下Dockerfile
FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-buster-slim AS base
WORKDIR /app
EXPOSE 80
FROM mcr.microsoft.com/dotnet/core/sdk:3.1-buster AS build
WORKDIR /src
COPY ["AngularDemo04.csproj", "AngularDemo04/"]
RUN dotnet restore "AngularDemo04/AngularDemo04.csproj"
COPY . AngularDemo04/
WORKDIR "AngularDemo04"
RUN ls -al
RUN dotnet build "AngularDemo04.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "AngularDemo04.csproj" -c Release -o /app/publish
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "AngularDemo04.dll"]
然后打开项目所在的目录，当前目录中需包含Dockerfile文件，然后在地址栏中输入CMD并回车，打开CMD控制台
在CMD控制台上输入以下命令生成Docker镜像
docker build -t aspnetcore:v4.0 .
但是生成报错error MSB3073: The command "npm install" exited with codee 127.
这是由于在进行发布操作时，是基于mcr.microsoft.com/dotnet/core/sdk:3.1-buster这个基础镜像的，这个镜像只有dotnet sdk，并没有安装npm
解决方案：
在Dockerfile中将项目拆分成两部分：前台Angular项目，后台ASP.Net Core项目
（1）修改项目文件
在项目上右键，选择【编辑项目文件】
在打开的AngularDemo04.csproj文件中，将以下这段代码删除
<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 -- --prod" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />
<!-- Include the newly-built files in the publish output -->
<ItemGroup>
<DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
<DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
<RelativePath>%(DistFiles.Identity)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
</ResolvedFileToPublish>
</ItemGroup>
</Target>
再次生成Docker镜像的时候，就不会报错了，到这步，后台的Dockerfile已经搭建好了
（2）创建前端Angular项目的镜像
修改Dockerfile，添加node镜像
FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-buster-slim AS base
WORKDIR /app
EXPOSE 80
FROM mcr.microsoft.com/dotnet/core/sdk:3.1-buster AS build
WORKDIR /src
COPY ["AngularDemo04.csproj", "AngularDemo04/"]
RUN dotnet restore "AngularDemo04/AngularDemo04.csproj"
COPY . AngularDemo04/
WORKDIR "AngularDemo04"
RUN ls -al
RUN dotnet build "AngularDemo04.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "AngularDemo04.csproj" -c Release -o /app/publish
# 编译Angular
FROM node:14-slim as nodebuilder
# 设置Angular Work directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY ClientApp/package.json /usr/src/app/package.json
RUN npm install
RUN npm install -g @angular/cli@9.1.3 --unsafe
# add app
COPY ClientApp/. /usr/src/app
RUN npm run build
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
RUN mkdir -p /app/ClientApp/dist
COPY --from=nodebuilder /usr/src/app/dist/. /app/ClientApp/dist/
ENTRYPOINT ["dotnet", "AngularDemo04.dll"]
重新生成Dockerfile即可
3、查看镜像
生成成功后，可以使用以下命令查看镜像
docker images
4、使用镜像运行容器
可以通过以下命令运行一个容器
docker run -it -d -P aspnetcore:v4.0
运行成功后可通过docker ps查看对应的端口，然后在浏览器访问这个端口即可
当然，也可以通过-p命令指定端口，然后通过指定的端口访问即可
docker -it -d -p 5002:80 aspnetcore:v1.0
注：
可以使用docker exec命令进行Docker容器中:
docker exec -it <Container> /bin/bash
