你知道如何从Angular和生成dist文件夹吗.使用Azure的YAML CI/CD的Net Core应用程序

Question

我正在尝试获取Angular/。NetCore应用程序生成dist文件夹并显示index.html文件，并尝试了经典管道和YAML。

但是，当我使用下面的YAML运行CI/CD管道时，它会运行并发出绿灯，但实际上并没有按预期部署应用程序dist文件夹。

它最终在浏览器中显示以下错误：

InvalidOperationException：SPA默认页面中间件无法返回默认页面"/index.html"，因为找不到该页面，并且没有其他中间件处理该请求。

YAML如下：

trigger:
- master
pool:
vmImage: windows-latest
steps:
- task: NodeTool@0
inputs:
versionSpec: '14.x'
displayName: 'Install Node.js'
- script: |
npm install -g @angular/cli
npm install    
ng build --prod #--optimization=false
displayName: 'npm install and build'
# Copy files from a source folder to a target folder using patterns matching file paths (not folder paths)
- task: CopyFiles@2
inputs:
sourceFolder: $(Build.SourcesDirectory)
contents: '**/dist' # Pull the dist directory (Angular)
targetFolder: $(Build.ArtifactStagingDirectory)
#used to look up directory of published files
- task: Bash@3
inputs:
targetType: inline
workingDirectory: $(Build.SourcesDirectory) 
script: ls -R
#install .net sdk 
- task: UseDotNet@2
displayName: Install .NET 5 SDK
inputs:
version: '3.1.x'
packageType: 'sdk'

#restore nuget packages from build
- task: DotNetCoreCLI@2
inputs:
command: 'restore'
projects: '**/*.csproj'
feedsToUse: 'select'
vstsFeed: '9e1f...'
#perform build action
- task: DotNetCoreCLI@2
displayName: Build .Net
inputs:
command: 'build'
projects: '**/*.csproj'
arguments: '--configuration $(BuildConfiguration)'
#perform publish
- task: DotNetCoreCLI@2
displayName: Publish
inputs:
command: publish
publishWebProjects: True
arguments: '--configuration $(BuildConfiguration) --output $(build.artifactstagingdirectory)'
zipAfterPublish: True

#perform publish of artifact
- task: PublishBuildArtifacts@1
displayName: 'Publish Artifact'
inputs:
PathtoPublish: '$(build.artifactstagingdirectory)'
condition: succeededOrFailed() 

这个版本看起来不错，也开了绿灯，但后来我出现了上面的错误。

我曾尝试更改PathToPublish以在之后添加/dist，还尝试添加CopyFiles任务以尝试将dist文件夹从源复制到目标，但没有成功。

发布管道将其作为要在发布管道的Deploy to Azure App Service部分发布的包：

$(System.DefaultWorkingDirectory(/drop/drop/。。。网状物NgClient.zip

如果您能理解为什么它没有创建dist文件夹，以及为什么它没有根据上面的错误提供index.html，我们将不胜感激。

Answer 1

问题可能在这个任务中：

# Copy files from a source folder to a target folder using patterns matching file paths (not folder paths)
- task: CopyFiles@2
inputs:
sourceFolder: $(Build.SourcesDirectory)
contents: '**/dist' # Pull the dist directory (Angular)
targetFolder: $(Build.ArtifactStagingDirectory)

复制文件任务复制指定文件夹内的内容，而不是文件夹及其内容。请阅读此处的Contents参数。

您需要指定类似targetFolder: $(Build.ArtifactStagingDirectory)/dist的内容，使其显示在名为dist.的文件夹中

它可能会生成你所有的文件，但在$(Build.ArtifactStagingDirectory(的根目录。