.Net Core DevOps - 四步實現Vue項目持續集成

眾所周知，現在國內最火的前端框架非Vue莫屬了，作為一個.net程序員，早就想體驗一下了，但是無奈微軟的項目模板不提供Vue的Spa模板，但是我們還是想用怎么辦呢？下面來看下我的解決方案

目錄

1. 用vue-cli 創建一個項目
2. 用VS創建一個React的應用程序
3. 改造React項目適配Vue
4. 配置Dockerfile

一.用vue-cli 創建一個項目

• 我這里貼的是直接創建好的項目，至於怎么創建，點擊=》傳送門

二.用VS創建一個React的應用程序

三.改造React項目適配Vue

• 修改 Startup.cs,添加VueCliMiddlewareNuGet包

• 編輯 項目文件 DistFiles
  

• 到這里本地環境就配置完了可以，大家可以直接按F5查看下效果（ps:第一次運行可能比較慢哦）

四.配置 Dockerfile 支持nodejs

FROM mcr.microsoft.com/dotnet/core/aspnet:3.0-buster-slim AS base
WORKDIR /app
EXPOSE 80

FROM mcr.microsoft.com/dotnet/core/sdk:3.0 AS build
COPY ./ /src
RUN ls -la 
WORKDIR "/src/WebNotebook.Vue"
RUN apt-get update -yq && apt-get upgrade -yq && apt-get install -yq curl git nano
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - && apt-get install -yq nodejs build-essential
RUN ls -la 

FROM build AS publish
RUN dotnet publish "WebNotebook.Vue.csproj" -c Release -o /app

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

配置完dockerfile，就可以自動化發布了，這里推薦用Azure做DevOps，至於為什么你懂得

至於Azure的DevOps 怎么配置，大家可以看我的另一篇文章《.Net Core DevOps -免費用Azure四步實現自動化發布（CI/CD）》