配置GitHub CI/CD部署ASP.NET Core+Vue.js到Azure失败求助

一、解决vue-cli-service未识别的错误 #

1. 补充Vue开发依赖 #

你的package.json中缺少vue-cli-service相关开发依赖，该工具属于开发期依赖，需添加到devDependencies：

{
  "name": "vueapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "node aspnetcore-https.js && vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vueuse/components": "^10.9.0",
    "@vueuse/core": "^10.9.0",
    "core-js": "^3.8.3",
    "jest": "^29.7.0",
    "jest-editor-support": "^31.1.2",
    "vue": "^3.2.13",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@vue/cli-service": "~5.0.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  }
}

2. 在GitHub CI/CD流程中添加依赖安装步骤 #

GitHub Actions Runner为全新干净环境，必须先安装npm依赖才能执行构建命令。修改你的GitHub工作流文件（通常是.github/workflows/azure-webapps.yml），在dotnet build前增加npm安装步骤：

steps:
  # 其他步骤（如代码拉取、.NET环境配置）...

  - name: 安装Vue项目依赖
    working-directory: ./vueapp
    run: npm install

  - name: 构建.NET项目
    run: dotnet build --configuration Release

  # 后续部署步骤...

3. 优化esproj配置（可选） #

可以在vueapp.esproj中给构建命令增加依赖安装前置操作，确保构建前自动安装依赖：

<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/0.5.74-alpha">
  <PropertyGroup>
    <StartupCommand>npm run serve</StartupCommand>
    <JavaScriptTestRoot>.</JavaScriptTestRoot>
    <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
    <BuildCommand>npm install && npm run build</BuildCommand>
    <ProductionBuildCommand>npm install && npm run build</ProductionBuildCommand>
    <BuildOutputFolder>$(MSBuildProjectDirectory)\..\webapi\wwwroot</BuildOutputFolder>
  </PropertyGroup>
</Project>

二、替代部署方案 #

方案1：前后端分离部署 #

• 前端：部署到Azure Static Web Apps，直接托管Vue静态构建文件，支持GitHub自动触发构建，自带CDN加速。
• 后端：部署到Azure App Service（API应用），前端通过API域名访问后端接口，在后端配置CORS允许前端域名访问。

方案2：容器化部署 #

编写Dockerfile整合前后端构建流程，将应用打包为镜像后部署到Azure App Service容器实例：

# 构建前端
FROM node:18-alpine AS frontend-build
WORKDIR /app/vueapp
COPY vueapp/package*.json ./
RUN npm install
COPY vueapp/ ./
RUN npm run build

# 构建后端并整合前端文件
FROM mcr.microsoft.com/dotnet/sdk:7.0 AS backend-build
WORKDIR /app/webapi
COPY webapi/*.csproj ./
RUN dotnet restore
COPY webapi/ ./
COPY --from=frontend-build /app/vueapp/dist ./wwwroot
RUN dotnet publish -c Release -o out

# 运行镜像
FROM mcr.microsoft.com/dotnet/aspnet:7.0
WORKDIR /app
COPY --from=backend-build /app/webapi/out ./
EXPOSE 80
ENTRYPOINT ["dotnet", "webapi.dll"]

通过GitHub Actions将镜像推送到Azure Container Registry，再部署到Azure App Service即可。

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