Troubleshooting Azure Deployment Error for Vue.js + ASP.NET Web Application with CI/CD Configuration

Question

I have configured CI/CD for my Vue.js + ASP.NET web application and want to host it on Azure using a Web App. I followed the Microsoft guide https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-vue?view=vs-2022

But I encountered an error while publishing. Btw, it works perfectly on my local 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 config file:

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

Error message:

 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.

before error

Error Message

I don't know why it's trying to copy some binaries when there shouldn't be any.

Can you recommend what I should do? Or could you share the source code of a good example of a Vue.js + ASP.NET project that is ready to be hosted on Azure cloud?

Answer 1

Configure the working-directory: path_to_the_directory in the workflow to deploy the project to Azure.

I have deployed your application using GitHub Actions.

My Workflow:

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

• Able to deploy the app to Azure successfully.