صفحات html و الصور لا تشتغل في موقعي على vercel.app

وعليكم السلام ورحمة الله وبركاته،

المشكلة التي تواجهك تحدث لأن إعدادات ملف vercel.json توجّه جميع الطلبات إلى مجلد api/ وتتعامل مع الملفات على أنها ملفات PHP فقط. وهذا يؤدي إلى عدم إمكانية الوصول إلى ملفات HTML، CSS، JavaScript، والصور داخل مجلد api/. لإصلاح هذه المشكلة، يجب تعديل ملف vercel.json للسماح بعرض الملفات الثابتة مثل HTML، CSS، الصور، و JavaScript بشكل صحيح.

{
  "functions": {
    "api/**/*.php": {
      "runtime": "vercel-php@0.6.0"
    }
  },
  "routes": [
    {
      "src": "/api/(.*).php",
      "dest": "/api/$1.php"
    },
    {
      "src": "/api/(.*)",
      "dest": "/api/$1"
    },
    {
      "src": "/(.*)",
      "dest": "/$1"
    }
  ]
}

بسبب تكوين vercel.json، فالخطأ يكمن في routes الذي يحاول توجيه جميع الطلبات إلى مجلد api، بمعنى أن أي طلب لملف HTML أو صورة يتم معالجته كطلب لملف PHP، مما يؤدي إلى خطأ.

أفضل حل هو إعادة تنظيم هيكل مشروعك، فلا يجب أن يكون لديك ملفات HTML و CSS و JS و الصور داخل مجلد api، فيجب أن يكون مجلد api مخصصًا فقط لملفات PHP الخاصة بواجهة برمجة التطبيقات، ضع ملفاتك الثابتة في مجلد منفصل، مثل public أو web.

أي للتوضيح:

my-project/
├── public/         
│   ├── index.html
│   ├── styles.css
│   ├── script.js
│   └── images/
│       └── myimage.jpg
└── api/            
    ├── index.php
    └── other.php

ثم قم بتعديل vercel.json كالتالي:

{
  "functions": {
    "api/**/*.php": {
      "runtime": "vercel-php@0.6.0"
    }
  },
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "/api/:path*"
    }
  ]
}

هنا، rewrites يوجه فقط الطلبات التي تبدأ بـ /api/ إلى مجلد api. جميع الطلبات الأخرى سيتم التعامل معها بشكل افتراضي بواسطة Vercel وسيتم تقديم الملفات من مجلد public.

ويوجد طريقة أخرى لكنها ليست الأفضل وهي معقدة وقد لا تعمل بشكل مثالي من خلال استخدام headers في vercel.json، بمعنى تعتمد على تحديد أنواع الملفات المختلفة في headers لتوجيهها بشكل صحيح، ولكنها أحيانًا تسبب مشاكل في التوافق مع بعض المتصفحات. لذلك، الطريقة الأولى هي الأفضل.

أي لا أنصح بتلك الطريقة، لكنها هنا للعلم فقط:

{
  "functions": {
    "api/**/*.php": {
      "runtime": "vercel-php@0.6.0"
    }
  },
  "headers": [
    {
      "source": "/api/(.*)\\.(html|css|js|jpg|png|gif)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000"
        }
      ]
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/$1"
    }
  ]
}

بالطبع تأكد من أن لديك ملف vercel.json في الجذر الرئيسي لمشروعك، بعد إجراء التغييرات، قم بدفع التغييرات إلى مستودع GitHub، وسيعيد Vercel بناء مشروعك تلقائيًا.

شكرا اخي عدنان @Adnane_Kadri على الاجابة و الرد

جربت الكود الذي وضعته ولم يحدث اي تغير مازال المجلد api يشغل ملفات php فقط

شكرا اخي مصطفى @Mustafa_Suleiman على الاجابة و الرد

كان بودي تشغيل الصور و ملفات الاخرى من غير php في مجلد api .

هل يوجد طريقة ام مستحيل ذلك .؟؟؟؟؟؟؟؟؟؟؟؟؟؟

بارك الله فيكم و شكرا جزيلااااااااااااااااااا