Next.js生产环境无法加载MP4视频问题求助

问题核心 #

你的场景是：Next.js 12.1.6项目在本地/本地Docker中视频可正常加载，但部署到DigitalOcean Docker容器的生产环境时失败；npm run build后视频未进入.next/static/media，public/assets/videos下的MP4无法被访问，图片资源则正常。

1. 检查Docker构建时的资源复制逻辑 #

Docker构建过程中，若只复制了public/assets/images而遗漏videos目录，会导致生产环境容器内无视频文件。

• 修正Dockerfile中的复制指令，确保整个public目录被完整复制：

  # 替换原有的public目录复制逻辑
  COPY public ./public
  

• 若使用多阶段构建，确保在最终镜像中也包含public/assets/videos目录。

2. 确保Git LFS在服务器构建时拉取实际视频文件 #

服务器端构建Docker时，若未配置Git LFS，克隆仓库只会获取LFS指针文件而非实际视频：

• 在Dockerfile的构建步骤中添加Git LFS安装与拉取操作：

  # 安装Git LFS（基于Debian镜像）
  RUN apt-get update && apt-get install -y git-lfs
  # 拉取LFS托管的视频文件
  RUN git lfs pull
  

3. 改用import方式引入视频，让Next.js自动处理静态资源 #

当前直接使用/assets/videos/xxx.mp4的路径未触发Next.js的静态资源打包逻辑，改用import引入可让视频被放入.next/static/media：

• 先通过tsconfig.json的@videos路径导入：

  import videoSrc from '@videos/videolabone_.mp4';
  
  // 在组件中使用
  <div>
    <iframe
      width={windowSize.width}
      height={windowSize.height}
      allow="autoplay"
      src={videoSrc}
      title="videolabone"
    ></iframe>
  </div>
  

• 这种方式会让Next.js在构建时自动处理视频文件，生成带哈希的文件名并放入静态资源目录，避免路径匹配问题。

4. 检查Next.js配置与生产环境权限 #

• 若视频文件过大，可能导致构建超时，可在next.config.js中延长静态页面生成超时时间：

  module.exports = {
    staticPageGenerationTimeout: 1000, // 单位：秒，根据视频大小调整
  };
  

• 检查容器内public/assets/videos目录及文件的权限，确保Node.js进程（通常是node用户）拥有读取权限：

  # 在容器内执行
  chmod -R 644 public/assets/videos
  chown -R node:node public/assets/videos
  

5. 排查反向代理（如Nginx）的资源配置 #

若使用Nginx反向代理Next.js，需确保配置允许MP4文件的访问：

location ~* \.(mp4)$ {
  root /path/to/your/nextjs/public;
  expires 30d;
  add_header Cache-Control "public, no-transform";
}

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