ASP.Net Core Angular應用使用Docker進行容器化部署（3）-- 使用node鏡像
一、介紹
本文介紹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/[email protected] --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
然，也可以通過`-p`命令指定端口，然後通過指定的端口訪問即可
docker -it -d -p 5002:80 aspnetcore:v1.0
注：
可以使用`docker exec`命令進行Docker容器中:
docker exec -it /bin/bash