Azure Windows WebApp部署Next.js应用遇ESLint错误求助

核心问题分析 #

开启SCM_DO_BUILD_DURING_DEPLOYMENT=true后，Azure默认执行npm install --production，不会安装devDependencies中的ESLint；而你的postinstall脚本会触发next build，Next.js默认在build阶段会执行ESLint检查，导致报错。关闭该设置后，流水线部署的是本地build产物，但因为Windows环境下Node.js包链接支持有限，导致应用无法运行。

方案1：让Azure部署时安装开发依赖（最简单） #

• 在Azure门户的WebApp应用设置中，添加新配置：
  • 名称：NPM_CONFIG_PRODUCTION
  • 值：false
    该设置会让Azure执行npm install时安装所有依赖（包括ESLint等dev依赖），确保next build正常执行。
• 保留SCM_DO_BUILD_DURING_DEPLOYMENT=true，让Azure在服务器端完成build，解决包链接问题。
• 可选优化：build完成后清理dev依赖减少磁盘占用，修改package.json脚本：

  "scripts": {
      "dev": "node server.js",
      "build": "next build",
      "start": "node server.js",
      "lint": "next lint",
      "postinstall": "next build && npm prune --production"
  }
  

方案2：禁用Next.js build时的ESLint检查 #

如果已在本地或GitHub Actions中完成ESLint检查，可让build阶段跳过检查：

• 在项目根目录创建/修改next.config.js，添加配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    eslint: {
      ignoreDuringBuilds: true,
    },
  }
  module.exports = nextConfig
  

• 保留SCM_DO_BUILD_DURING_DEPLOYMENT=true，此时next build不会触发ESLint检查，无dev依赖也能完成构建。

方案3：调整GitHub Actions流水线，云端完成build并部署 #

通过流水线控制build流程，同时解决包链接问题：

• 修改GitHub Actions workflow文件，添加build步骤：

  jobs:
    build-and-deploy:
      runs-on: windows-latest # 匹配Azure Windows环境
      steps:
        - uses: actions/checkout@v4
        - name: Setup Node.js
          uses: actions/setup-node@v4
          with:
            node-version: '20' # 需与Azure WebApp的Node版本一致
            cache: 'npm'
        - name: Install dependencies
          run: npm install
        - name: Build application
          run: npm run build
        - name: Deploy to Azure WebApp
          uses: azure/webapps-deploy@v3
          with:
            app-name: '<你的WebApp名称>'
            slot-name: 'production'
            publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
            package: '.' # 部署包含.build的整个项目目录
  

• 在Azure WebApp中关闭SCM_DO_BUILD_DURING_DEPLOYMENT=true，避免重复build。
• 确保Azure WebApp的启动命令为npm start（默认读取package.json的start脚本）。

方案4：自定义Azure部署脚本（进阶） #

如需更灵活控制部署流程，可自定义部署脚本：

1. 运行Azure CLI命令生成默认部署脚本：

   az webapp deploy --resource-group <你的资源组名称> --name <你的WebApp名称> --generate-script
   

2. 修改生成的deploy.cmd脚本，找到npm install --production行，替换为：

   call npm install
   call npm run build
   call npm prune --production
   

3. 在项目根目录创建.deployment文件，指定脚本路径：

   [config]
   command = deploy.cmd
   

4. 提交文件到GitHub，开启SCM_DO_BUILD_DURING_DEPLOYMENT=true，Azure将使用自定义脚本完成部署。

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