最近公司新啟動一個項目,使用的是Abp Next 和 ant-design-pro-blazor 結合做,前期准備都比較順暢,當我准備部署線上環境測試的時候,前端的blazor項目構建鏡像的時候,就出問題了,錯誤如下:
Dockfile內容是vs自帶功能創建的,本地構建時候失敗了,頓時一臉懵,查看了項目文件,帶了一些npm的指令。如下:
知道了問題的根源,那就想辦法填坑,項目文件的做法,本地開發是不會有問題的,然后本地publish以后,打包構建docker也不會有問題,但是這樣就會存在不方便管理的問題,單個人做事沒毛病,但筆者線上環境是騰訊雲的k8s,走的都是自動構建和發布,所以vs默認生成的dockerfile,是不滿足的,因為自動構建的時候是沒有安裝node的,一堆廢話,講了些有的沒得,下面說具體處理,其實使用vs自帶的整合前端的模板都會存在類似的問題,例如Angular 結合 core的項目模板等等,筆者是這么處理,首先將前端的項目文件copy一份,重命名為:xxxxxx.Docker.csproj,講其加入解決方案並編輯新的xxxxxx.Docker.csproj項目文件,去掉npm自動指令,然后替換自動生成dockerfile文件內容,最后再分部構建鏡像。最后的dockerfile類似這樣的:
#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.
FROM mcr.microsoft.com/dotnet/aspnet:5.0-buster-slim AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
#拉取node鏡像,構建前端資源
FROM node:13-alpine AS nodebuilder
WORKDIR /nodeapp
#將完整的前端項目拷貝構建,不要問為什么,問就是不知道
COPY ./src/xxxxxxxx .
RUN ls
#使用cnpm處理,避免npm發癲失效
RUN npm config set unsafe-perm true && \
npm config set registry https://registry.npm.taobao.org && \
npm install -g cnpm --registry=https://registry.npm.taobao.org && cnpm install && cnpm run gulp:pro
# RUN npm install
# RUN npm run gulp:pro
RUN ls
RUN ls wwwroot/css
FROM mcr.microsoft.com/dotnet/sdk:5.0-buster-slim AS build
WORKDIR /src
.........
RUN dotnet restore "src/xxxxxxxx/xxxxxxxx.Docker.csproj"
COPY . .
WORKDIR "/src/src/xxxxxxxx"
RUN ls
RUN dotnet build "xxxxxxxx.Docker.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "xxxxxxxx.Docker.csproj" -c Release -o /app/publish
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
COPY --from=nodebuilder /nodeapp/wwwroot .
ENTRYPOINT ["dotnet", "xxxxxxxx.dll"]
以上純屬瞎寫寫,認真你就輸了~