Ubuntu服务器上Next.js应用图片无法显示的问题求助

问题背景 #

• 部署环境：Ubuntu服务器，Nginx反向代理Next.js应用
• Nginx已配置uploads目录规则：

location /uploads {
        alias /home/ubuntu/staging/thomson-print-portal/current/public/uploads;
        expires 1y;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

• 文件已成功上传至服务器目录：

total 17296
drwxrwxr-x 2 ubuntu ubuntu    4096 Aug 29 16:10 ./
drwxrwxr-x 3 ubuntu ubuntu    4096 Aug 24 18:52 ../
-rw-rw-r-- 1 ubuntu ubuntu  546325 Aug 24 19:38 1724528290711.png
-rw-rw-r-- 1 ubuntu ubuntu 3609033 Aug 24 19:38 1724528322595.png
-rw-rw-r-- 1 ubuntu ubuntu 1231890 Aug 24 19:56 1724529410208.png
-rw-rw-r-- 1 ubuntu ubuntu  369096 Aug 24 20:00 1724529613975.pdf
-rw-rw-r-- 1 ubuntu ubuntu 3609033 Aug 27 20:25 1724790319429.png
-rw-rw-r-- 1 ubuntu ubuntu 3609033 Aug 27 20:27 1724790479629.png
-rw-r--r-- 1 ubuntu ubuntu 3609033 Aug 29 15:41 1724946095568.png
-rw-r--r-- 1 ubuntu ubuntu  546325 Aug 29 15:44 1724946251056.png
-rw-r--r-- 1 ubuntu ubuntu  546325 Aug 29 16:10 1724947844252.png

• 异常表现：请求图片返回400错误，请求URL为：

GET https://print-portal.1905newmedia.com/_next/image?url=%2Fuploads%2F1724947844252.png&w=256&q=75 400 (Bad Request)

• 本地运行正常，数据库存储的fileURL格式为/uploads/1724947844252.png，ArtworkComponent和FileUpload组件均无法显示图片。

排查方向及解决方案 #

1. Next.js图片优化域名配置问题 #

Next.js的next/image组件默认会对图片URL做安全校验，由于uploads目录是Nginx直接静态托管，而非Next.js服务处理，需在next.config.js中配置允许当前域名的静态资源：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'print-portal.1905newmedia.com',
        pathname: '/uploads/**',
      },
    ],
    // 若使用Next.js 12及以下版本，改用domains配置：
    // domains: ['print-portal.1905newmedia.com'],
  },
};

module.exports = nextConfig;

修改后重新构建并部署应用。

2. Nginx配置有效性验证 #

• 检查配置语法：执行sudo nginx -t，确保无语法错误
• 重载Nginx配置：执行sudo systemctl reload nginx，使配置生效
• 注意：使用alias时，location /uploads末尾不要加斜杠，避免路径拼接错误

3. 文件权限检查 #

确认Nginx进程有权限读取uploads目录下的文件：

• 查看Nginx运行用户：ps aux | grep nginx，通常为www-data或nginx
• 调整目录及文件权限：

sudo chown -R ubuntu:www-data /home/ubuntu/staging/thomson-print-portal/current/public/uploads
sudo chmod -R 755 /home/ubuntu/staging/thomson-print-portal/current/public/uploads

4. 直接访问静态资源验证 #

尝试直接访问图片URL：https://print-portal.1905newmedia.com/uploads/1724947844252.png

• 若返回200，说明Nginx静态托管正常，问题出在Next.js图片组件配置
• 若返回404或其他错误，说明Nginx配置或文件权限存在问题

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