如何使用Output File Tracing部署Next.js(SSR)到Azure App Service

一、核心原理 #

Next.js的Output File Tracing会在构建阶段自动分析生产运行所需的所有依赖文件，只把必要的代码和依赖打包到.next/standalone目录里，完全不需要上传整个node_modules，能大幅缩减部署包体积。

二、使用步骤 #

1. 启用Standalone模式
   在项目根目录的next.config.js里添加output: 'standalone'配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  // 其他已有配置...
}

module.exports = nextConfig

2. 本地验证效果
   运行npm run build完成构建后，你会看到项目根目录下生成.next/standalone文件夹——这就是精简后的运行环境，里面只包含Next.js运行必需的依赖文件和编译后的代码，体积会比原node_modules小很多。

3. 调整启动命令
   原来的npm start不再适用，需要改成直接启动standalone里的服务文件：

node .next/standalone/server.js

三、对Azure Pipeline和Release的影响 #

1. Pipeline构建阶段调整

• 构建步骤不变：依然执行npm install和npm run build，因为需要完成依赖安装和生产构建。
• 打包环节优化：部署时只需要打包以下内容，不需要包含根目录的node_modules：
  • .next/standalone
  • .next/static
  • public
    比如在Azure Pipeline的Archive Files任务中，设置要包含的路径为这三个目录，排除其他不必要的文件（如node_modules、.git等）。

2. Release部署阶段调整

• 修改App Service启动命令：在Azure App Service的配置页面，把启动命令改成node .next/standalone/server.js；或者在Pipeline中通过设置环境变量APPSETTING_WEBSITE_START_COMMAND来指定。
• 无需额外依赖安装：因为.next/standalone已经包含了所有运行必需的依赖，部署后不需要在App Service上执行npm install，节省部署时间和磁盘空间。

3. 注意事项

• 如果你的项目有自定义的静态资源或配置文件（如.env.production），要确保这些文件被包含在部署包里。
• 若使用Next.js Image Optimization，Standalone模式已经自动处理了相关依赖，无需额外配置。

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