部署至Google App Engine的NextJS应用缓存报错问题

问题说明 #

将Next.js应用部署到Google App Engine后，图片优化缓存写入时抛出以下错误——原因是GAE运行环境为只读，无法在默认的/workspace/.next/cache/images路径创建目录：

DEFAULT 2024-09-15T11:48:52.646123Z path: '/workspace/.next/cache/images'
DEFAULT 2024-09-15T11:48:52.646109Z syscall: 'mkdir',
DEFAULT 2024-09-15T11:48:52.646097Z code: 'ENOENT',
DEFAULT 2024-09-15T11:48:52.646093Z errno: -2,
DEFAULT 2024-09-15T11:48:52.646090Z at async /workspace/node_modules/next/dist/lib/batcher.js:45:32 {
DEFAULT 2024-09-15T11:48:52.646086Z at async /workspace/node_modules/next/dist/server/response-cache/index.js:121:25
DEFAULT 2024-09-15T11:48:52.646083Z at async ImageOptimizerCache.set (/workspace/node_modules/next/dist/server/image-optimizer.js:436:13)
DEFAULT 2024-09-15T11:48:52.646078Z at async writeToCacheDir (/workspace/node_modules/next/dist/server/image-optimizer.js:177:5)
DEFAULT 2024-09-15T11:48:52.646074Z at async Object.mkdir (node:internal/fs/promises:858:10)
DEFAULT 2024-09-15T11:48:52.646063Z ⨯ Failed to write image to cache Cyx4zJYF-A+sCaU4OaW1aqTtDqQ+UHD0kNi0DjBpqPk= Error: ENOENT: no such file or directory, mkdir '/workspace/.next/cache/images'
DEFAULT 2024-09-15T11:48:51.333178Z }

已尝试修改next.config.js将distDir指向/tmp/.next，但问题未解决：

const nextConfig = {
...
  distDir: path.join('/tmp', '.next'),
  async headers () {
    return [
      {
        source: '/images/(.*)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable'
          }
        ]
      }
    ]
  }
...
}

可行解决方案 #

1. 单独配置图片缓存目录到/tmp #

仅修改distDir不足以改变图片缓存的路径，需要在next.config.js中显式指定images.cacheDirectory到GAE允许写入的/tmp目录：

const path = require('path');

const nextConfig = {
  distDir: path.join('/tmp', '.next'),
  // 新增图片缓存目录配置
  images: {
    cacheDirectory: path.join('/tmp', '.next', 'cache', 'images'),
  },
  async headers() {
    return [
      {
        source: '/images/(.*)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable'
          }
        ]
      }
    ];
  }
};

module.exports = nextConfig;

2. 确保缓存目录提前创建 #

虽然/tmp目录在GAE实例启动时存在，但缓存子目录可能需要手动创建。可以在启动命令前添加目录创建步骤，修改package.json的start脚本：

{
  "scripts": {
    "start": "mkdir -p /tmp/.next/cache/images && next start"
  }
}

3. 禁用图片优化缓存（极端方案） #

如果上述方法仍无法解决，可以直接禁用Next.js的图片优化缓存，让图片优化由CDN或前端处理（需确保图片已提前优化）：

const nextConfig = {
  images: {
    unoptimized: true,
  },
  // 其他已有配置...
};

module.exports = nextConfig;

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