Azure DevOps Pipeline部署.NET+React(Vite)应用遇404及构建错误求助

项目结构 #

Project
- reactwithasp.client //前端目录
- reactwithasp.server //后端目录
- .csproj
- .sln

当前Azure DevOps Pipeline YAML配置 #

trigger:
  branches:
    include:
      - Test  # 修改为触发流水线的分支
 
pool:
  vmImage: 'windows-latest'  # 使用Windows代理构建.NET解决方案
 
variables:
  buildConfiguration: 'Release'  # 需要时可改为'Debug'
  PUBLISH_DIRECTORY: '$(Build.ArtifactStagingDirectory)'
 
steps:
  # 步骤1：从仓库拉取代码
  - checkout: self
    displayName: '拉取代码'
 
  # 步骤2：安装Node.js和React客户端依赖
  - script: |
      echo "NODE_ENV="
      npm install -g node@21.7.2 vite@5.4.10
      npm ci
    displayName: '安装Node.js和Vite'
    workingDirectory: $(System.DefaultWorkingDirectory)/reactwithasp.client
 
  - task: NodeTool@0
    inputs:
      versionSource: 'spec'
      versionSpec: '21.x'
    displayName: '安装Node.js'
  
  # 验证Node版本
  - script: |
      node -v
      npm -v
    displayName: '验证Node.js和npm版本'
 
  - task: UseNode@1
    inputs:
      versionSpec: '21.x'
    displayName: '使用Node.js 21'
 
  # 步骤3：安装.NET Core SDK
  - task: UseDotNet@2
    inputs:
      packageType: 'sdk'
      version: '8.x'  # 根据项目实际.NET SDK版本调整
    displayName: '安装.NET SDK'
 
  # 步骤4：还原.NET解决方案的NuGet包
  - task: NuGetCommand@2
    inputs:
      restoreSolution: '$(System.DefaultWorkingDirectory)/*.sln'
    displayName: '还原NuGet包'
 
  # 步骤5：安装React依赖
  - script: npm install
    displayName: '安装React依赖'
    workingDirectory: $(System.DefaultWorkingDirectory)/reactwithasp.client
 
  # 步骤6：构建React客户端
  - script: npm run build
    displayName: '构建React应用'
    workingDirectory: $(System.DefaultWorkingDirectory)/reactwithasp.client
 
  # 步骤7：将React构建产物复制到发布目录
  - script: |
      cp -r $(System.DefaultWorkingDirectory)/reactwithasp.client/dist/* $(PUBLISH_DIRECTORY)
    displayName: '复制React构建产物到发布目录'
 
  # 步骤8：构建.NET解决方案
  - 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: '构建.NET解决方案'
 
  # 步骤9：发布.NET构建产物
  - task: PublishBuildArtifacts@1
    inputs:
      pathtoPublish: '$(PUBLISH_DIRECTORY)'
      artifactName: 'dotnetBuild'
    displayName: '发布.NET构建产物'
 
  # 步骤10：部署到Azure Web App，指向wwwroot
  - task: AzureRmWebAppDeployment@4
    inputs:
      ConnectionType: 'AzureRM'
      azureSubscription: 'abc-PCS'
      appType: 'webApp'
      WebAppName: 'abcpcs'
      packageForLinux: '$(PUBLISH_DIRECTORY)/*.zip'  # 根据实际路径或文件名调整
    displayName: '部署到Azure Web App'

遇到的问题 #

1. Vite构建语法错误 #

解决Vite未识别的问题后，出现以下构建错误：

作者       : Microsoft Corporation
帮助文档   : https://docs.microsoft.com/azure/devops/pipelines/tasks/utility/command-line
==============================================================================
生成脚本。
脚本内容: shell
npm run build
========================== 开始命令输出 ===========================
"C:\Windows\system32\cmd.exe" /D /E:ON /V:OFF /S /C "CALL "D:\a\_temp\9abfa463-0928-4d82-b16a-f525c9bc3fca.cmd""

> reactwithasp.client@0.0.0 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'
       ^

语法错误: 意外的标记 {
    在 Module._compile (internal/modules/cjs/loader.js:723:23)
    在 Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    在 Module.load (internal/modules/cjs/loader.js:653:32)
    在 tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    在 Function.Module._load (internal/modules/cjs/loader.js:585:3)
    在 Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    在 startup (internal/bootstrap/node.js:283:19)
    在 bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
npm ERR! 代码 ELIFECYCLE
npm ERR! 错误码 1
npm ERR! reactwithasp.client@0.0.0 build: `vite build`
npm ERR! 退出状态 1
npm ERR!
npm ERR! 执行reactwithasp.client@0.0.0的build脚本失败。
npm ERR! 这可能不是npm的问题，上方可能有更多日志输出。

npm ERR! 完整日志可在以下路径查看:
npm ERR!     C:\npm\cache\_logs\2024-10-31T19_00_52_549Z-debug.log
##[error]Cmd.exe 退出代码为 '1'。
完成: 构建React应用

2. HTTPS证书创建失败（更新后） #

即使在vite.config.js中设置HTTPS=false，并在YAML中配置VITE_HTTPS=false，仍出现以下错误：

作者       : Microsoft Corporation
帮助文档   : https://docs.microsoft.com/azure/devops/pipelines/tasks/utility/command-line
==============================================================================
生成脚本。
脚本内容: shell
npm run build
========================== 开始命令输出 ===========================
"C:\Windows\system32\cmd.exe" /D /E:ON /V:OFF /S /C "CALL "D:\a\_temp\fcbec466-9955-4d29-8573-5410e178f18c.cmd""

> reactwithasp.client@0.0.0 build
> vite build

导出HTTPS开发者证书到文件时出错。
无法从D:\a\1\s\reactwithasp.client\vite.config.js加载配置
构建期间出错:
错误: 无法创建证书。
    在 file:///D:/a/1/s/reactwithasp.client/vite.config.js.timestamp-1730747332612-efccc51bf23a2.mjs:27:11
    在 ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    在 async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    在 async loadConfigFromBundledFile (file:///D:/a/1/s/reactwithasp.client/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:68112:21)
    在 async loadConfigFromFile (file:///D:/a/1/s/reactwithasp.client/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:67967:28)
    在 async resolveConfig (file:///D:/a/1/s/reactwithasp.client/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:67579:28)
    在 async build (file:///D:/a/1/s/reactwithasp.client/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:66729:20)
    在 async CAC.<anonymous> (file:///D:/a/1/s/reactwithasp.client/node_modules/vite/dist/node/cli.js:842:9)
##[error]Cmd.exe 退出代码为 '1'。
完成: 禁用HTTPS后构建React应用

3. 部署后404错误 #

排查发现构建文件未复制到wwwroot文件夹，导致网站显示404。相关路径信息：

• System.DefaultWorkingDirectory: D:\a\1\s
• Build.ArtifactStagingDirectory: D:\a\1\a
• 目标wwwroot路径: /c/home/site/wwwroot

已经卡了好几天，找不到问题根源，请求帮助。

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