Azure DevOps部署React至Azure Linux Web App后页面空白求助

问题描述 #

刚开启DevOps职业生涯，首个项目是将两个Node.js React Web应用部署至Azure Linux Web App。第一个应用部署后运行正常，克隆流水线部署第二个应用时，流水线无报错完成，但浏览器中页面空白。开发人员表示两个应用几乎完全一致，查看Web App文件未发现明显问题，可能未找对排查位置。

流水线配置 #

trigger:
- main

variables:

  # Azure Resource Manager connection created during pipeline creation
  azureSubscription: '3d20b47e-76d8-4913-9809-a463ae10f0b3'

  # Web app name
  webAppName: 'app-pblp-dev'

  # Environment name
  environmentName: 'dev'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)

    steps:
    - task: NodeTool@0
      inputs:
        versionSource: 'spec'
        versionSpec: '20.x'
        checkLatest: true
      displayName: 'Install Node.js'

    - script: |
       cd ./frontend/pbl-management-portal-ui
       npm install
      displayName: 'npm install'

    - script: |
       cd ./frontend/pbl-management-portal-ui
       npm run build
      displayName: 'npm build'

    - task: ArchiveFiles@2
      displayName: 'Archive files'
      inputs:
        rootFolderOrFile: '$(System.DefaultWorkingDirectory)/frontend/pbl-management-portal-ui'
        includeRootFolder: false
        archiveType: zip
        archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
        replaceExistingArchive: true

    - upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
      artifact: drop

- stage: Deploy
  displayName: Deploy stage
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deploy
    displayName: Deploy
    environment: $(environmentName)
    pool:
      vmImage: $(vmImageName)
    strategy:
      runOnce:
        deploy:
          steps:
          - task: AzureRmWebAppDeployment@4
            displayName: 'Azure App Service Deploy: Management Portal React Front End'
            inputs:
              azureSubscription: $(azureSubscription)
              appType: webAppLinux
              WebAppName: $(webAppName)
              packageForLinux: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
              RuntimeStack: 'NODE|20-lts'
              StartupCommand: 'pm2 serve /home/site/wwwroot/public --no-daemon --spa'

更新：App Service日志错误 #

错误
2023-12-14T15:16:28.637
ERROR - 站点app-pblp-dev的容器app-pblp-dev_0_3406cf6e未在预期时间内启动。耗时=230.1702239秒

容器app-pblp-dev_0_34fce3c4未响应端口8080上的HTTP探测，站点启动失败。请查看容器日志进行调试。

排查与修复步骤 #

• 修正构建产物打包路径：当前ArchiveFiles@2任务打包了整个项目目录，而React构建后的静态文件在build子目录中。需将rootFolderOrFile修改为$(System.DefaultWorkingDirectory)/frontend/pbl-management-portal-ui/build，确保仅部署构建完成的静态资源。
• 验证启动命令的目录一致性：检查第二个应用的npm run build输出目录是否为public（第一个应用可能是build）。如果输出目录是build，则启动命令需改为pm2 serve /home/site/wwwroot/build --no-daemon --spa。
• 明确指定监听端口：在启动命令中添加端口参数，确保pm2 serve监听Azure探测的8080端口：pm2 serve /home/site/wwwroot/build 8080 --no-daemon --spa。
• 查看容器详细日志：登录Azure门户，进入目标App Service的「日志流」或「高级工具」→「Kudu」→「日志」目录，查看容器启动时的具体报错信息，排查是否存在文件缺失、权限问题或依赖加载失败。
• 对比两个应用的配置差异：核对两个应用的package.json中build脚本的输出路径、依赖版本，以及流水线中是否存在目录名称拼写错误（比如第二个应用的前端目录是否与第一个不同，但流水线仍沿用了第一个的路径）。

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