部署在 Azure DevOps Pipeline 中的 .NET 应用程序显示 404 错误

Question

我有一个应用程序，前端采用 React js (Vite)，后端采用 .NET 和 Node，我正在尝试设置部署管道。

我的项目结构如下

`项目

• reactwithasp.client //前端目录
• reactwithasp.server //后端目录
• .csproj
• .sln`

我的 YAML 文件如下：

trigger:
  branches:
    include:
      - Test  # Change this to the branch to trigger the pipeline on
 
pool:
  vmImage: 'windows-latest'  # Use a Windows agent for .NET solution
 
variables:
  buildConfiguration: 'Release'  # Change to 'Debug' if required
  PUBLISH_DIRECTORY: '$(Build.ArtifactStagingDirectory)'
 
steps:
 
 
  # Step 1: Checkout code from the repository
  - checkout: self
    displayName: 'Checkout Code'
 
  # Step 2: Install Node.js and dependencies for React client
  - script: |
      echo "NODE_ENV="
      npm install -g [email protected] [email protected]
      npm ci
    displayName: 'Install Node.js and Vite'
    workingDirectory: $(System.DefaultWorkingDirectory)/reactwithasp.client
 
  - task: NodeTool@0
    inputs:
      versionSource: 'spec'
      versionSpec: '21.x'
    displayName: 'Install Node.js'
  
  # Step 2: Verify Node version
  - script: |
      node -v
      npm -v
    displayName: 'Verify Node.js and npm Versions'
 
 
  - task: UseNode@1
    inputs:
      versionSpec: '21.x'
    displayName: 'Use Node.js 21'
 
  # Step 3: Use .NET Core SDK
  - task: UseDotNet@2
    inputs:
      packageType: 'sdk'
      version: '8.x'  # Adjust to match your project's .NET SDK version
    displayName: 'Install .NET SDK'
 
  # Step 4: Restore NuGet packages for .NET solution
  - task: NuGetCommand@2
    inputs:
      restoreSolution: '$(System.DefaultWorkingDirectory)/*.sln'
    displayName: 'Restore NuGet Packages'
 
  # Step 5: Install React dependencies
  - script: npm install
    displayName: 'Install React Dependencies'
    workingDirectory: $(System.DefaultWorkingDirectory)/reactwithasp.client
 
  # Step 6: Build the React client
  - script: npm run build
    displayName: 'Build React App'
    workingDirectory: $(System.DefaultWorkingDirectory)/reactwithasp.client
 
  # Step 7: Copy React client build output directly to publish directory
  - script: |
      cp -r $(System.DefaultWorkingDirectory)/reactwithasp.client/dist/* $(PUBLISH_DIRECTORY)
    displayName: 'Copy React Build to Publish Directory'
 
  # Step 8: Build the .NET solution
  - task: VSBuild@1
    inputs:
      solution: '$(System.DefaultWorkingDirectory)/*.sln'
      msbuildArgs: '/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:PackageLocation="$(PUBLISH_DIRECTORY)\\"'
      platform: 'Any CPU'
      configuration: '$(buildConfiguration)'
    displayName: 'Build .NET Solution'
 
  # Step 9: Publish .NET build artifacts
  - task: PublishBuildArtifacts@1
    inputs:
      pathtoPublish: '$(PUBLISH_DIRECTORY)'
      artifactName: 'dotnetBuild'
    displayName: 'Publish .NET Build Artifacts'
 
  # Step 10: Deploy to Azure Web App, pointing to wwwroot
  - task: AzureRmWebAppDeployment@4
    inputs:
      ConnectionType: 'AzureRM'
      azureSubscription: 'abc-PCS'
      appType: 'webApp'
      WebAppName: 'abcpcs'
      packageForLinux: '$(PUBLISH_DIRECTORY)/*.zip'  # Adjust if path or filename differs
    displayName: 'Deploy to Azure Web App'

发现，构建文件没有被复制到 wwwroot 文件夹，因此网站显示 404 错误。

我的目录路径：

System.DefaultWorkingDirectory: D:\a\1\s Build.ArtifactStagingDirectory: D:\a\1\a

wwwroot 路径在哪里

/c/home/site/wwwroot

无法找到问题所在，并且从现在开始一直困扰着这个问题。请帮忙。

早些时候，vite 出现了问题，它抛出错误“vite”未被识别为内部或外部命令，安装 vite 后，它向前移动了一步。

现在我遇到以下错误：

Author       : Microsoft Corporation
Help         : https://docs.microsoft.com/azure/devops/pipelines/tasks/utility/command-line
==============================================================================
Generating script.
Script contents: shell
npm run build
========================== Starting Command Output ===========================
"C:\Windows\system32\cmd.exe" /D /E:ON /V:OFF /S /C "CALL "D:\a\_temp\9abfa463-0928-4d82-b16a-f525c9bc3fca.cmd""
 
> [email protected] build D:\a\1\s\reactwithasp.client
> vite build
 
D:\a\1\s\reactwithasp.client\node_modules\vite\bin\vite.js:2
import { performance } from 'node:perf_hooks'
       ^
 
SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vite build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
 
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\npm\cache\_logs\2024-10-31T19_00_52_549Z-debug.log
##[error]Cmd.exe exited with code '1'.
Finishing: Build React App

Answer 1

似乎您提供的信息文件正在复制到 PUBLISH_DIRECTORY 它指向“d:”，但您需要确保文件正确压缩并部署到“~\wwwroot”目录

• 脚本：| cd $(PUBLISH_DIRECTORY) zip -r ../publish.zip 显示名称：“从发布的目录创建 Zip”

更新部署任务

'$(Build.ArtifactStagingDirectory)/publish.zip'

确保正确压缩和复制构建输出将有望解决您的 404 问题。如果仍然存在，请再次检查日志。谢谢