如何通过Azure Pipelines部署Azure Repos中的Nuxt 3项目？

核心问题分析 #

你部署后显示默认页面，本质是App Service没有正确识别或启动你的Nuxt3应用，分两种场景处理：

场景1：静态站点模式（无SSR，nuxt.config.ts 配置 ssr: false） #

如果你的Nuxt3是纯静态站点，构建后静态文件都在 .output/public 目录下：

1. 修改流水线打包路径
   将ArchiveFiles任务的rootFolderOrFile改为：

   $(System.DefaultWorkingDirectory)/frontend/.output/public
   

2. 开启App Service静态网站功能
   在Azure Portal的App Service配置→静态网站中，启用静态网站，设置默认文档为index.html，错误文档为404.html。
3. （可选）更推荐部署到Azure Static Web Apps，专门适配静态站点，无需额外配置。

场景2：SSR/混合模式（默认 ssr: true） #

如果是服务端渲染模式，需要让App Service启动Nuxt的Node.js服务：

步骤1：调整流水线打包内容 #

需要将package.json、锁文件和.output目录一起打包，确保App Service能安装生产依赖：
修改流水线，添加复制配置文件的步骤，完整流水线示例：

trigger:
- master

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSource: 'spec'
    versionSpec: '18.x'
    
- task: Npm@1
  inputs:
    command: 'install'
    workingDir: 'frontend'

- task: Npm@1
  inputs:
    command: 'custom'
    workingDir: 'frontend'
    customCommand: 'run build'

# 复制依赖配置文件到.output目录
- task: CopyFiles@2
  inputs:
    SourceFolder: 'frontend'
    Contents: |
      package.json
      package-lock.json
    TargetFolder: '$(System.DefaultWorkingDirectory)/frontend/.output'

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)/frontend/.output'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/frontend-plantool.zip'
    replaceExistingArchive: true

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'

步骤2：配置App Service启动命令 #

在Azure Portal的App Service→配置→常规设置中：

• 设置启动命令为：node .output/server/index.mjs
• 确保Node.js版本选择18 LTS（和流水线一致）
• 平台选择Linux（Nuxt3 SSR在Windows平台兼容性较差）

步骤3：确保依赖安装 #

在发布流水线中，添加一个Npm任务，部署完成后执行生产依赖安装：

• 任务选择Npm@1
• Command选install
• Working Directory设为App Service网站根目录
• Arguments填--production

步骤4：排查日志 #

如果仍无法启动，在App Service→日志→应用服务日志中开启文件系统日志，查看/home/LogFiles下的日志，定位具体错误（比如依赖缺失、端口冲突等）。

关于部署服务的选择 #

• 纯静态站点：优先用Azure Static Web Apps，部署更简单，自带CDN和预览环境
• SSR/混合模式：Azure App Service完全够用，也可以考虑Azure Container Apps（适合容器化部署）

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