Next.js部署Azure遇静态资源404及虚拟路径配置问题

核心问题是静态资源目录未被正确打包部署，加上Azure路径映射配置缺失，导致静态资源请求返回404。以下是具体修复步骤：

1. 修正GitHub Actions部署脚本 #

当前的mv命令逻辑错误，不仅没用上Next.js编译生成的_next静态目录，还误移了不必要的文件。替换npm install, build, and test步骤的脚本：

npm install
npm run build
# 将静态资源目录复制到standalone部署包中
cp -r ./build/_next ./build/standalone/
cp -r ./build/public ./build/standalone/

说明：Next.js开启output: 'standalone'后，build/_next存储所有编译后的JS、CSS、图片等静态资源，build/public是自定义静态文件目录，这两个目录必须随standalone一起部署，Azure才能找到对应资源。

2. 配置Azure Web App虚拟路径映射 #

登录Azure门户，找到目标Web App，进入配置 > 路径映射，添加两条规则：

• 虚拟路径：/_next

• 物理路径：site\wwwroot\_next

• 类型：保持默认（或选择“应用程序”）

• 虚拟路径：/public

• 物理路径：site\wwwroot\public

• 类型：保持默认

说明：这一步是告诉Azure，当用户请求/_next/static/xxx这类路径时，直接到服务器的site\wwwroot\_next/static目录查找文件，解决路径不匹配导致的404问题。

3. 验证Next.js配置 #

你的next.config.js配置完全正确，output: 'standalone'和distDir: 'build'符合部署要求，无需修改。

4. 重新部署 #

将修改后的GitHub Actions脚本提交到main分支，触发自动部署。部署完成后，清除浏览器缓存再访问网站，静态资源即可正常加载。

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