将Next.js(TypeScript)应用部署至Azure Web App时静态文件404问题求助

1. 路径映射错位：Next.js output: 'standalone' 模式生成的 server.js，默认会从自身所在目录的同级位置查找静态资源（.next/static、public）。当你部署整个 .next/ 目录并从 .next/standalone/server.js 启动时，server.js 会尝试访问 ./.next/static（即 .next/standalone/.next/static），但实际你的静态文件存放在上级目录的 .next/static，路径不匹配导致404。
2. 工作目录配置偏差：如果Azure Web App的默认工作目录未指向部署根目录，会进一步加剧路径解析错误，导致服务器无法定位到已存在的静态资源文件。

方案1：调整部署目录结构（推荐） #

• 构建完成后，不要直接打包整个 .next/ 目录，单独提取以下三个内容部署到Azure Web App的根目录：
  • .next/standalone/ 整个目录
  • .next/static/ 整个目录
  • public/ 整个目录
• 将Azure的启动命令改为：node server.js（此时 server.js 位于部署根目录下）
• 该方式完全匹配Next.js standalone模式的预期目录结构，服务器能直接找到同级的静态资源。

方案2：修改Next.js配置指定资源路径 #

• 在 next.config.js 中添加资源路径相关配置：

const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  assetPrefix: './', // 强制静态资源使用相对路径
  outputFileTracingRoot: path.join(__dirname, './'), // 指定资源追踪的根目录
};

module.exports = nextConfig;

• 部署时保持原有 .next/ 和 public/ 的结构不变，同时在Azure应用设置中添加环境变量 NEXT_PUBLIC_ASSET_PREFIX=./，确保客户端也能正确加载静态资源。

方案3：调整Azure启动命令的工作目录 #

• 如果不想修改部署结构，可在Azure Web App的启动命令中明确指定工作目录为部署根目录：

cd /home/site/wwwroot && node .next/standalone/server.js

• 确认Azure的默认工作目录为 /home/site/wwwroot（默认配置通常是这个路径），这样 server.js 能向上遍历找到 .next/static 目录。

1. 登录Azure Kudu控制台（https://<your-app-name>.scm.azurewebsites.net），检查部署后的目录结构是否符合预期。
2. 访问某一静态资源的直接URL（如 https://<your-app-name>.azurewebsites.net/_next/static/css/main.css），确认返回200状态码。

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