使用 CI/CD 配置对 Vue.js + ASP.NET Web 应用程序的 Azure 部署错误进行故障排除

Question

我已经为我的 Vue.js + ASP.NET Web 应用程序配置了 CI/CD，并希望使用 Web 应用程序将其托管在 Azure 上。我遵循了微软的指南 https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-vue?view=vs-2022

但是我在发布时遇到了错误。顺便说一句，它在我本地的 IIS 上完美运行。

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>

.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.

错误前

错误信息

我不知道为什么它要尝试复制一些不应该有的二进制文件。

你能建议我应该做什么吗？或者您可以分享一个可以在 Azure 云上托管的 Vue.js + ASP.NET 项目的好示例的源代码吗？

Answer 1

在工作流中配置工作目录：path_to_the_directory以将项目部署到 Azure。

我已使用 GitHub Actions 部署了您的应用程序。

我的工作流程：

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

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: windows-latest
    defaults:
      run:
        working-directory: ./webapi
    steps:
      - uses: actions/checkout@v4

      - name: Set up .NET Core
        uses: actions/setup-dotnet@v1
        with:
          dotnet-version: '8.x'
          include-prerelease: true

      - 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: 'appname'
          slot-name: 'Production'
          package: .
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_AF07B6EFC886427BA299B4F33F7A70FA }}

• 能够成功将应用程序部署到Azure。