Turbo Monorepo中Next.js 14部署Azure App Service遇阻求助

先调整项目配置 #

1. 根目录.npmrc配置：确保依赖正确hoist，避免子项目缺失依赖

node-linker=hoisted
hoist-pattern[]=*

2. Next.js项目开启Standalone模式：在next.config.js中添加，大幅缩减部署包体积

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone', // 关键配置：生成独立运行的产物
};

module.exports = nextConfig;

3. Turbo构建配置：确保turbo.json中build任务的输出包含Next.js产物

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    }
  }
}

完整Azure Pipeline YAML脚本 #

替换脚本中的占位符（比如项目路径、App Service名称、Azure订阅连接）即可直接使用：

trigger:
  branches:
    include:
      - main # 替换为你的主分支名称

variables:
  nextAppDir: 'apps/web' # 替换为你的Next.js项目在monorepo中的路径（如apps/frontend）
  appServiceName: 'your-app-service-name' # 替换为你的Azure App Service名称
  nodeVersion: '18.x' # Next.js 14推荐Node.js 18+

stages:
- stage: Build
  displayName: 构建Next.js应用
  jobs:
  - job: Build
    pool:
      vmImage: 'ubuntu-latest'
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: $(nodeVersion)
      displayName: 安装Node.js

    - script: |
        npm install -g pnpm@latest
      displayName: 安装pnpm包管理器

    - script: |
        pnpm install
      displayName: 安装所有依赖（含开发依赖用于构建）

    - script: |
        pnpm turbo build --filter=$(nextAppDir)
      displayName: 使用Turbo构建目标Next.js项目

    - script: |
        cd $(nextAppDir)
        # 创建部署目录并复制必要文件
        mkdir -p deploy
        cp -r .next/standalone/* deploy/
        cp -r .next/static deploy/.next/
        cp -r public deploy/
        cp package.json deploy/
        cp pnpm-lock.yaml deploy/
      displayName: 整理部署文件（仅保留运行必需内容）

    - task: ArchiveFiles@2
      inputs:
        rootFolderOrFile: '$(nextAppDir)/deploy'
        includeRootFolder: false
        archiveType: 'zip'
        archiveFile: '$(Build.ArtifactStagingDirectory)/next-deploy.zip'
        replaceExistingArchive: true
      displayName: 打包部署文件为ZIP

    - publish: '$(Build.ArtifactStagingDirectory)/next-deploy.zip'
      artifact: nextDeployPackage
      displayName: 发布构建产物到Pipeline

- stage: Deploy
  displayName: 部署到Azure App Service
  dependsOn: Build
  jobs:
  - job: Deploy
    pool:
      vmImage: 'ubuntu-latest'
    steps:
    - download: current
      artifact: nextDeployPackage

    - task: AzureWebApp@1
      inputs:
        azureSubscription: '你的Azure订阅服务连接名称' # 替换为你的Azure订阅连接
        appType: 'webAppLinux'
        appName: $(appServiceName)
        package: '$(Pipeline.Workspace)/nextDeployPackage/next-deploy.zip'
        runtimeStack: 'NODE|$(nodeVersion)'
        startupCommand: 'node server.js' # Standalone模式的启动文件
        appSettings: '-NODE_ENV production'
      displayName: 部署到Azure App Service

关键说明 #

• Standalone模式：Next.js会自动把运行所需的依赖、代码打包到.next/standalone，无需上传整个node_modules，部署包体积通常能压缩到几十MB以内，解决B1计划部署超时问题。
• Turbo过滤构建：--filter=$(nextAppDir)确保只构建目标Next.js项目，避免处理monorepo中其他无关项目，节省构建时间。
• 依赖管理：pnpm的hoisted模式确保所有子项目的依赖统一放在根目录node_modules，构建时不会出现依赖缺失问题，无需手动移动node_modules。

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