Vue.js+ASP.NET应用Azure部署CI/CD配置错误排查求助

我按照官方指南配置了Vue.js + ASP.NET Web应用的CI/CD，计划部署到Azure Web App，本地IIS运行完全正常，但发布时出现错误，系统试图复制不存在的vueapp.exe文件。

项目配置文件 #

vueapp.esproj #

<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/0.5.74-alpha">
  <PropertyGroup>
    <StartupCommand>npm run serve</StartupCommand>
    <JavaScriptTestRoot>.</JavaScriptTestRoot>
    <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
    <!-- Command to run on project build -->
    <BuildCommand>npm run build</BuildCommand>
    <!-- Command to create an optimized build of the project that's ready for publishing -->
    <ProductionBuildCommand>npm run build</ProductionBuildCommand>
    <!-- Folder where production build objects will be placed -->
    <BuildOutputFolder>$(MSBuildProjectDirectory)\dist</BuildOutputFolder>
  </PropertyGroup>
</Project>

webapi.csproj #

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <EnableSdkContainerSupport>true</EnableSdkContainerSupport>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="8.0.3" />
    <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="8.0.3" />
    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="8.0.3" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="8.0.3">
      <PrivateAssets>all</PrivateAssets>
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
    </PackageReference>
    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="8.0.3" />
    <PackageReference Include="Microsoft.IdentityModel.Tokens" Version="7.5.0" />
    <PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="7.5.0" />
  </ItemGroup>
  <ItemGroup>
      <ProjectReference Include="..\vueapp\vueapp.esproj">
          <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
      </ProjectReference>
  </ItemGroup>
</Project>

GitHub Actions配置文件（.yml） #

name: Build and deploy ASP.Net Core app to Azure Web App - vueaspnet

on:
  push:
    branches:
      - published
  workflow_dispatch:

jobs:
  build:
    runs-on: windows-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up .NET Core
        uses: actions/setup-dotnet@v1
        with:
          dotnet-version: '8.x'
          include-prerelease: true
          
      - name: Install Dependencies
        run : | 
                cd vueapp
                npm install
               
      - name: Build with dotnet
        run: dotnet build --configuration Release

      - name: dotnet publish
        run: dotnet publish -c Release -o ${{env.DOTNET_ROOT}}/myapp

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: .net-app
          path: ${{env.DOTNET_ROOT}}/myapp

  deploy:
    runs-on: windows-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    
    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: .net-app
      
      - name: Deploy to Azure Web App
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'vueaspnet'
          slot-name: 'Production'
          package: .
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_D9811244A05F468CBA7E827C65C83215 }}

错误信息 #

DONE  Build complete. The dist directory is ready to be deployed.
   INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
         
C:\Users\runneradmin\AppData\Local\Microsoft\dotnet\sdk\8.0.203\Microsoft.Common.CurrentVersion.targets(4559,5): error MSB3030: Could not copy the file "obj\Release\vueapp.exe" because it was not found. [D:\a\ThatsTime\ThatsTime\vueapp\vueapp.esproj]
Error: Process completed with exit code 1.

错误发生前的日志截图：

错误信息截图：

解决建议 #

1. 修改vueapp.esproj配置
   在<PropertyGroup>中添加<IsPublishable>false</IsPublishable>，明确告诉MSBuild这个JavaScript项目不需要生成可执行文件，也不参与发布阶段的二进制文件复制流程：

<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/0.5.74-alpha">
  <PropertyGroup>
    <StartupCommand>npm run serve</StartupCommand>
    <JavaScriptTestRoot>.</JavaScriptTestRoot>
    <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
    <BuildCommand>npm run build</BuildCommand>
    <ProductionBuildCommand>npm run build</BuildCommand>
    <BuildOutputFolder>$(MSBuildProjectDirectory)\dist</BuildOutputFolder>
    <!-- 添加该行禁用发布流程 -->
    <IsPublishable>false</IsPublishable>
  </PropertyGroup>
</Project>

2. 指定发布目标项目
   修改dotnet publish命令，直接指定发布WebAPI项目，避免触发Vue项目的无效发布逻辑：

dotnet publish webapi/webapi.csproj -c Release -o ${{env.DOTNET_ROOT}}/myapp

3. 确保Vue静态文件被包含到发布包
   在webapi.csproj中添加配置，将Vue构建生成的dist目录内容复制到ASP.NET Core的wwwroot目录，作为静态文件托管：

<ItemGroup>
  <Content Include="..\vueapp\dist\**">
    <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    <Link>wwwroot\%(RecursiveDir)%(Filename)%(Extension)</Link>
  </Content>
</ItemGroup>

同时确保在WebAPI的Program.cs中启用静态文件托管：

app.UseStaticFiles();

可部署项目核心要点 #

• Vue项目通过npm run build生成dist目录
• ASP.NET Core项目将dist目录作为静态文件根目录
• CI/CD流程先完成Vue的依赖安装和构建，再发布ASP.NET Core项目，确保静态文件被包含在发布包中

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