求助：通过Azure Pipeline部署Next.js到Azure App Service的问题

一、核心问题拆解 #

你之前的误区在于没必要打包node_modules——Azure App Service Linux环境会自动在部署后安装生产依赖，关键是要把构建、部署流程和App Service配置调整到位。

二、Pipeline构建阶段正确配置 #

• 先安装对应版本的Node.js（Next.js 13+建议用Node 18/20）
• 执行依赖安装与构建：

  npm install
  npm run build
  

• 归档时只保留必要文件：.next、public、package.json、next.config.mjs（如果有.env.production这类环境配置文件也必须加上），绝对排除node_modules

三、Pipeline部署阶段配置 #

用Azure App Service Deploy任务时，注意：

• 选择webAppLinux类型
• 在任务的「StartupCommand」字段填写npm run start
• 确保package.json里的scripts包含：

  "start": "next start"
  

四、Azure App Service Portal额外配置 #

这是很多人忽略的关键步骤：

1. 进入你的Web App→「配置」→「常规设置」
2. 「启动命令」填写npm run start
3. 添加环境变量：
   • NODE_ENV=production
   • PORT=80（Azure Linux Web App默认监听80端口，Next.js会自动读取这个变量）

五、修正后的Pipeline YAML核心片段 #

# 构建步骤
steps:
- task: NodeTool@0
  inputs:
    versionSpec: '20.x'
  displayName: '安装Node.js'

- script: |
    npm install
    npm run build
  displayName: '安装依赖并构建Next.js'

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/nextjs-app.zip'
    replaceExistingArchive: true
    filePatterns: |
      .next/**/*
      public/**/*
      package.json
      next.config.mjs
      # 如有.env.production请添加此行
  displayName: '归档构建产物'

# 部署步骤
- task: AzureRmWebAppDeployment@4
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: '你的Azure订阅名称'
    appType: 'webAppLinux'
    WebAppName: '你的Web App名称'
    packageForLinux: '$(Build.ArtifactStagingDirectory)/nextjs-app.zip'
    StartupCommand: 'npm run start'

六、验证与排错 #

1. 运行Pipeline确认构建、部署无报错
2. 访问Web App URL测试是否正常加载
3. 若仍有问题，查看「日志流」（Web App→监控→日志流），排查是否存在依赖缺失、端口冲突等问题

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