在 Azure 上发布 Vue.js + ASP.NET Core

Question

我想使用配置的 CI/CD GitHub 帐户在 Azure 应用服务中部署 ASP.NET Core + Vue.js 应用程序。我遵循了微软的指南： https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-vue?view=vs-2022#publish-the-project

我按照他们说的做了一切，但是在将存储库推送到 GitHub 时，我在发布阶段遇到了错误：

 > [email protected] build
vue-cli-service build

  'vue-cli-service' is not recognized as an internal or external command,
  operable program or batch file.
C:\Users\runneradmin.nuget\packages\microsoft.visualstudio.javascript.sdk\0.5.74-alpha\Sdk\Sdk.targets(171,9): error MSB3073: The command "npm run build" exited with code 1. [D:\a\ThatsTime\ThatsTime\vueapp\vueapp.esproj]
Error: Process completed with exit code 1.

这是 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></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)\..\webapi\wwwroot</BuildOutputFolder>
  </PropertyGroup>
</Project>

这是 webapi.csproj 内容：

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <EnableSdkContainerSupport>true</EnableSdkContainerSupport>
  </PropertyGroup>
  <ItemGroup>
    <Folder Include="Models\" />
  </ItemGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="7.0.17" />
    <PackageReference Include="Microsoft.IdentityModel.Tokens" Version="7.5.0" />
  </ItemGroup>
  <ItemGroup>
      <ProjectReference Include="..\vueapp\vueapp.esproj">
          <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
      </ProjectReference>
  </ItemGroup>
</Project>

package.json：

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

我也尝试使用 Web App + Azure Blob Storage 进行部署，但没有成功。您能帮我解决问题，或者就如何以其他方式部署它提供一些建议吗？

Answer 1

“vue-cli-service”不被识别为内部或外部命令， 可运行的程序或批处理文件。

要解决此错误，您必须按照评论中提到的@Thomas和@Jalpa Panchal安装依赖项。

错误信息为：npm ERR！路径 D: \ThatsTime\ThatsTime/package.json npm 错误！ errno -4058 npm 错误！ enoent ENOENT: 没有这样的文件或目录，打开 'D:\ThatsTime\ThatsTime\package.json'

此错误是由于工作流程无法指向根目录中的

package.json

，因为

package.json

位于子文件夹

vueapp

下。

要解决此错误，请在工作流程中添加以下配置：

- name : Install Dependencies
  run  : |
          cd vueapp
          npm install

GitHub 工作流程：

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

on:
  push:
    branches:
      - main
  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: '7.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 }}