لماذا يتم طلب Cloudinary عند رفع الصور على vercel

Vercel يقوم بإستخدام Serverless Functions فعندما ترسل مشروعك Vercel يقوم بتحويل الوظائف الخلفية مثل API routes في Next.js إلى دوال خادمية بدون خادم (Serverless Functions) وتلك الدوال تنفذ في بيئة مؤقتة مثل AWS Lambda وليس على خادم ثابت مثل الذي لديك محليا.

ولذلك لا يوجد نظام ملفات محلي (No Persistent Filesystem) في البيئة هذه أى ليس هناك قرص صلب أو مجلدات ثابتة تستطيع أن تقرأ أو تكتب فيها باستخدام fs.writeFile أو fs.readFile أو path.join فالوظيفة تنفذ وتختفي فورا ولذلك فأي محاولة للتعامل مع ملفات محلية ستفشل برسالة خطأ مثل "ENOENT: no such file or directory" أو "fs module not found".

أما محلياً لديك على الجهاز (localhost) فإن fs تعمل بشكل عادي لأن لديك نظام ملفات حقيقيأم على Vercelفهو لا يسمح بذلك لأسباب أمان والكفاءة.

وإن Cloudinary خدمة سحابية للصور وليس Vercel نفسه الذي يطلب إذن Cloudinary تحديدا ولكن في الوثائق والأمثلة الرسمية ل Vercel يقوموا بالتوصية لإستخدام Cloudinary لأنها مصممة خصيصاً لرفع وتخزين وتوزيع الصور والفيديوهات في بيئات serverless.

يعني لازم اعدل كود مشروعي بالكامل

عندما تعمل على جهازك المحلي، لديك نظام ملفات دائم (persistent file system). هذا يعني أنك عندما تحفظ ملف باستخدام fs في مجلد معين، هذا الملف يبقى موجوداً حتى تحذفه أنت يدوياً. هذا منطقي وطبيعي.

لكن Vercel تعمل بنظام مختلف تماماً يسمى Serverless Functions. في هذا النظام، كل طلب (request) يتم معالجته في بيئة مؤقتة ومعزولة تسمى instance. ولذلك Cloudinary وخدمات التخزين السحابية الأخرى تحل هذه المشكلة 

بتاريخ 7 دقائق مضت قال Zen Eddin Allaham:

يعني لازم اعدل كود مشروعي بالكامل

ستحتاج لتعديل بعض الأجزاء فبدلاً من حفظ الملف باستخدام fs.writeFile، ستقوم برفعه مباشرة إلى Cloudinary. إليك مثال بسيط 

// بدلاً من 
fs.writeFileSync(path.join('uploads', filename), buffer);

// استخدم 
import { v2 as cloudinary } from 'cloudinary';

// رفع الصورة إلى Cloudinary
const result = await cloudinary.uploader.upload(file, {
  folder: 'your-project-name'
});

Vercel تستخدم بيئة serverless حيث الخوادم تنشأ وتحذف بسرعة، ولا تحتفظ بنظام ملفات دائم وعندما تستخدم fs لحفظ الصور فالملفات هنا ستكتب على القرص الصلب المؤقت للخادم، لكن هذا القرص سيختفي بعد انتهاء الطلب فتفقد الصور لهذا السبب Vercel توصي دوما باستخدام خدمات تخزين سحابية مثل Cloudinary أو AWS S3 أو Google Cloud Storage، لأنها توفر تخزين دائم خارج الخادم.

وحتى إذا أردت استخدام fs يمكنك فقط قراءة الملفات الموجودة مسبقا في مشروعك مثل الصور في مجلد /public لكن لا يمكنك حفظ ملفات جديدة بشكل دائم.

الان بدأ يرفع صور بنجاح لكن لا يتم عرض صور في واجهة رئيسية بعد ما استخدمنت Cloudinary 

https://image-gallery-72gqvgbz9-zen-allahams-projects.vercel.app/

"use server";
import { NextRequest, NextResponse } from "next/server";
import { connectDB } from "@/app/libs/connectDB";
import { isAuthenticate } from "@/app/libs/isAuthenticate";
import Image from "@/app/models/Image";
import { v2 as cloudinary } from "cloudinary";
import { Readable } from "stream";

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

function bufferToStream(buffer: Buffer) {
  const readable = new Readable();
  readable._read = () => {};
  readable.push(buffer);
  readable.push(null);
  return readable;
}

export async function POST(request: NextRequest) {
  try {
    await connectDB();

    const user = await isAuthenticate(request);
    if (!user) {
      return NextResponse.json({ message: "غير مصرح" }, { status: 401 });
    }

    const formData = await request.formData();

    const title = formData.get("title") as string;
    const description = formData.get("description") as string;
    const file = formData.get("file") as File;

    if (!file) {
      return NextResponse.json({ message: "اختر صورة أولاً" }, { status: 400 });
    }

    const fileBuffer = Buffer.from(await file.arrayBuffer());


    const uploadResult = await new Promise<any>((resolve, reject) => {
      const stream = cloudinary.uploader.upload_stream(
        { folder: "images" },
        (error, result) => {
          if (error) reject(error);
          else resolve(result);
        }
      );
      bufferToStream(fileBuffer).pipe(stream);
    });

    // إنشاء مستند جديد في MongoDB
    const newImage = await Image.create({
      title,
      description,
      imageUrl: uploadResult.secure_url,
      userId: user._id,
      likes: 0,
      likedBy: [],
    });

    return NextResponse.json({
      success: "تم رفع الصورة بنجاح",
      image: newImage,
    });
  } catch (err) {
    console.log(err);
    return NextResponse.json(
      { message: "حدث خطأ في السيرفر" },
      { status: 500 }
    );
  }
}

import { connectDB } from "@/app/libs/connectDB";
import Image from "@/app/models/Image";
import { NextRequest, NextResponse } from "next/server";


export async function GET(request:NextRequest){
    try{
       await connectDB();
       const images = await Image.find().sort({createdAt: -1});
       return NextResponse.json(images); 
    }catch(err){
        console.log(err);
        return NextResponse.json({ message: "حدث خطأ في السيرفر" }, { status: 500 });
    }
}