سایت بالا بود و همه‌چیز ظاهراً درست کار می‌کرد. حتی لینک مستقیم عکس‌هایی که روی S3 بودند بدون مشکل باز می‌شدند و 200 برمی‌گشتند. اما کاور بعضی عکس‌ها در پروداکشن 500 می‌داد. وقتی DevTools را چک کردم، دیدم مرورگر به‌جای اینکه مستقیم عکس را از S3 بگیرد، دارد مسیر /_next/image را صدا می‌زند. همان‌جا مشخص شد مشکل از خود عکس یا S3 نیست، بلکه از Image Optimization در Next.js است. چون وقتی از کامپوننت Image استفاده می‌کنیم و optimization روشن باشد، Next.js عکس را از منبع می‌گیرد، resize و optimize می‌کند و بعد به مرورگر تحویل می‌دهد. این یعنی سرور کوچک من با 1 vCPU و 2GB RAM عملاً داشت نقش Image CDN را بازی می‌کرد. در محیط production، داخل Docker، با عکس‌های بزرگ PNG و سایزهایی مثل 3840، این پردازش گاهی به timeout یا خطای 500 می‌رسید. راه‌حل این بود که برای این شرایط، optimization را در Next.js خاموش کنم و images.unoptimized: true بگذارم تا مرورگر مستقیم عکس را از S3 بگیرد. خلاصه اگر لینک مستقیم S3 درست کار می‌کند اما /_next/image خطای 500 می‌دهد، احتمالاً مشکل از optimizer خود Next.js است، نه از فایل عکس یا S3.

نتیجه ساده است: اگر لینک مستقیم عکس درست کار می‌کند اما /_next/image خطای 500 می‌دهد، احتمالاً مشکل از S3 نیست؛ مشکل از این است که سرور Next.js توان پردازش و optimize کردن آن عکس را ندارد. برای سرورهای کوچک، image optimization واقعی باید روی CDN انجام شود، نه روی خود اپلیکیشن.

Hossein Molavi | The Engineering Mind

@codehalics | کدهالیک