Next.js部署Azure Web App成功但线上未显示更新

问题背景 #

使用Visual Studio Code部署Next.js项目到Azure Web App，流程为：

1. 根目录执行npm run build生成.next文件夹
2. VS Code右键.next文件夹选择「Deploy to Web App」，部署成功后访问站点仍显示旧版本

针对你的疑问的解答 #

1. 部署.next文件夹后，是否需要额外步骤确保线上显示最新更改？ #

是的，仅部署.next文件夹是不够的。Next.js的运行依赖package.json中的启动脚本、相关依赖包，以及next.config.js这类配置文件。只部署.next会导致Azure Web App无法正确加载新的运行环境，自然无法显示最新更改。

2. 这是否是Azure的缓存问题，或是需要部署后重启Web App？ #

两者都有可能：

• 浏览器缓存：浏览器会缓存静态资源，尝试用Ctrl+F5强制刷新页面，跳过本地缓存验证。
• Azure Web App缓存：Azure会对.next/static下的静态资源做缓存，可在Azure门户的Web App「配置」→「常规设置」中调整缓存规则，或直接重启Web App清除服务器端缓存。
• 服务端未加载新构建：如果是SSR/ISR页面，新的构建产物需要重启Web App才能被加载，部署后手动重启是稳妥的操作。

3. 从Visual Studio Code部署Next.js到Azure的理想流程是什么？ #

推荐使用Next.js的独立部署模式，既缩小部署包体积，又能避免依赖缺失问题，流程如下：

1. 配置项目：在next.config.js中添加独立输出配置：

   module.exports = {
     output: 'standalone',
   }
   

2. 本地构建：根目录执行npm run build，生成.next、standalone文件夹及public目录（如有）。
3. 配置Azure启动命令：在Azure门户的Web App「配置」→「常规设置」中，设置启动命令为：

   node server.js
   

4. VS Code部署：右键项目根目录（或选择standalone + .next/static + public + package.json这些关键文件/文件夹），选择「Deploy to Web App」，不要仅部署.next文件夹。
5. 部署后验证：
   • 部署完成后，在Azure门户手动重启Web App
   • 用Ctrl+F5强制刷新浏览器查看最新内容

额外排查步骤 #

• 登录Azure门户，进入Web App的「部署中心」，确认新的构建产物已上传
• 查看Web App的「日志流」，检查是否有启动错误或依赖缺失提示
• 如果使用了Azure CDN，需要刷新CDN缓存才能让静态资源生效

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