Azure DevOps部署Next.js至Azure App Service成功但网站无法访问

核心问题分析 #

你的流水线虽执行成功，但两个关键配置错误导致网站无法正常启动：

1. 构建归档了冗余文件，Next.js运行必需的核心产物未被正确部署
2. 使用了静态文件服务的启动命令，而非Next.js的服务器启动命令

具体修复步骤 #

1. 修正构建归档范围 #

当前ArchiveFiles@2任务打包了整个项目目录（包括源码、开发依赖等冗余内容），需修改为只打包运行必需的文件：

- task: ArchiveFiles@2
  displayName: 'Archive application files'
  inputs:
    rootFolderOrFile: $(workingDirectory)
    includeRootFolder: false
    archiveType: zip
    archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
    replaceExistingArchive: true
    includeFiles: |
      .next/**/*
      package.json
      package-lock.json
      public/**/*

2. 替换启动命令 #

pm2 serve仅适用于托管静态HTML，不支持Next.js的SSR应用。直接调用你已配置好的npm start脚本即可：

- task: AzureWebApp@1
  inputs:
    # 其他配置保持不变
    startUpCommand: 'npm start'

3. 优化依赖安装（可选但推荐） #

构建时仅安装生产依赖，减少包体积并避免开发依赖引发的问题：

npm ci --only=production
npm run build --if-present

修复后的完整流水线 #

trigger: none

variables:
  azureSubscription: 'My Service Connection'
  webAppName: 'my-web-app'
  workingDirectory: '.'
  nodeVersion: '20.x'

stages:
- stage: Build
  displayName: Build stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: 'ubuntu-latest'
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: $(nodeVersion)
      displayName: 'Install Node.js'

    - script: |
        npm ci --only=production
        npm run build --if-present
      displayName: 'Install production dependencies and build'
      workingDirectory: $(workingDirectory)

    - task: ArchiveFiles@2
      displayName: 'Archive application files'
      inputs:
        rootFolderOrFile: $(workingDirectory)
        includeRootFolder: false
        archiveType: zip
        archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
        replaceExistingArchive: true
        includeFiles: |
          .next/**/*
          package.json
          package-lock.json
          public/**/*

    - upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
      artifact: drop
      
- stage: Deploy
  displayName: Deploy stage
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deploy
    displayName: Deploy
    environment: 'development'
    pool:
      vmImage: 'ubuntu-latest'
    strategy:
      runOnce:
        deploy:
          steps:
          - task: AzureWebApp@1
            inputs:
              azureSubscription: $(azureSubscription)
              appType: webAppLinux
              appName: $(webAppName)
              package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip
              startUpCommand: 'npm start'

额外排查点 #

• 进入Azure App Service的「配置」→「常规设置」，确认WEBSITE_NODE_DEFAULT_VERSION设置为20.x，与流水线使用的Node版本一致
• 查看App Service的「日志流」，排查启动时是否存在依赖缺失、端口错误等具体报错
• 若使用Next.js 13+ App Router，检查next.config.js中的路由配置是否正确

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