azure-devops - React JS Azure DevOps Web 应用程序不会运行，但文件存在于服务器中并且管道中没有错误

Question

我正在做一个简单的 Azure DevOps CICD 部署。我正在遵循所有步骤。首先，这是我的 YAML 文件。我保留了评论的原样，以防万一，我犯的错误比我意识到的要多。

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'


# Set variables
variables:
  directory: ReactJSRecipeApp


steps:
- task: NodeTool@0
  inputs:
    versionSpec: '12.13.0' 
  displayName: 'Install Node.js'

- script: 
    npm install
  displayName: 'npm install'

- script:
    npm run build
  displayName: 'npm build'  

- task: CopyFiles@2
  displayName: 'Copy files'
  inputs:
    sourceFolder: 'build' 
    Contents: '**/*'
    TargetFolder: '$(Build.ArtifactStagingDirectory)'
    cleanTargetFolder: true


- task: ArchiveFiles@2
  displayName: 'Archive files'
  inputs:
    rootFolderOrFile: '$(Build.ArtifactStagingDirectory)'
    includeRootFolder: false
    archiveType: zip
    archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
    replaceExistingArchive: true    


- task: PublishBuildArtifacts@1
  displayName: 'Publish Build Artifacts'
  inputs: 
    pathtoPublish: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
    ArtifactName: 'www' # output artifact named www


- task: AzureWebApp@1
  displayName: 'Deploy to App Service'
  inputs:
    azureSubscription: 'ReactJSRecipeAppConnection'
    appName: 'reactjsrecipeappwebapp2'
    appType: 'webApp'
    package: '$(System.ArtifactsDirectory)/$(Build.BuildId).zip'
    customWebConfig: '-Handler iisnode -NodeStartFile server.js -appType node' 

所以，当我运行它时，我在管道中没有错误。

此外，我想指出以下几点。

• 如果我下载了 artifacts zip 文件夹，我就可以在本地运行该文件夹并让我的 react 应用程序在 localhost 服务器中运行得很好。
• 我通过 Kudo Tools 检查了我的 Azure Web 应用程序，我看到了 wwwroot 中的所有文件，其时间戳与工件文件夹中的 zip 文件相匹配。所以，我假设这些文件确实被推送到了 Web 服务器中的正确位置。
• 在我运行 CICD 触发器之前，这些 azure Web 应用程序是全新创建的，我得到了标准的 azure 欢迎/登录页面。所以，网络应用程序本身很好。

毕竟，网站本身并不提供页面。我得到了 404。我在 Azure 上尝试了两个不同的 Web 应用程序，但结果相同。

任何建议，我哪里出错了？

更新 1

我决定手动检查 Filezilla 上的文件。但是，它是空的！

但是，KUDO 显示文件。我不明白！

更新 2

因此，我使用工件发布文件夹从 Visual Studio 代码直接部署。网络应用程序运行良好。因此，执行此步骤以确保 Web 应用程序配置正确。

标签： azure-devopsazure-pipelines

Answer 1

好吧，看来我的 YAML 文件不正确。我终于让它工作了。

如果有人来找一个现成的 React YAML 文件，我会在此处发布它（因为 Azure DevOps 文档在当前形式中没有那么有用）

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'

- task: CopyFiles@2
  inputs:
    Contents: 'build/**' # Pull the build directory (React)
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1
  inputs: 
    pathtoPublish: $(Build.ArtifactStagingDirectory) # dist or build files
    ArtifactName: 'www' # output artifact named www

# Default value: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.ArtifactStagingDirectory)/build/'
    includeRootFolder: false

- task: AzureWebApp@1
  inputs:
    azureSubscription: 'ReactJSRecipeAppConnection'
    appName: 'ReactJSRecipeApp4'
    package: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'

包含 YAML 的简单反应代码的完整存储库在这里。

https://github.com/Jay-study-nildana/ReactJSRecipeApp