رفع خطاهای Vercel 404: راه حلی ساده برای پروژه های Node.js

Summarize this content to 400 words in Persian Lang
من اخیراً با یک مشکل ناامید کننده با پروژه Node.js خود در Vercel مواجه شدم که در آن همه مسیرها به جز صفحه اصلی (/) خطاهای 404 را برمی‌گرداندند. پس از ساعت ها اشکال زدایی و جستجو از طریق StackOverflow، بالاخره یک راه حل ساده پیدا کردم که می خواستم با جامعه به اشتراک بگذارم.

مشکل

پروژه GitHub Activity Generator من به صورت محلی کاملاً خوب کار می کرد، اما پس از استقرار در Vercel، هر گونه به روز رسانی مسیر منجر به خطای 404 می شود. صفحه اصلی ابتدا بارگیری می‌شود، اما به‌روزرسانی هر مسیر دیگری، برنامه را خراب می‌کند. این یک مشکل رایج است که زمانی رخ می دهد که پیکربندی مسیریابی به درستی برای برنامه های تک صفحه ای در Vercel تنظیم نشده باشد.

راه حل

ثابت شد که این تعمیر به طرز شگفت آوری ساده است. این شامل دو مرحله کلیدی بود:

ایجاد یک فایل پیکربندی حداقل vercel.json

{
“rewrites”: [
{
“source”: “/(.*)”,
“destination”: “/”
}
],
“buildCommand”: “npm run build”,
“outputDirectory”: “dist”
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تنظیم Framework Preset روی “Node.js” در تنظیمات پروژه Vercel.

چرا این کار می کند

جادو در پیکربندی بازنویسی اتفاق می افتد. مسیر catch-all “source”: “/(.*)” همه درخواست های دریافتی را دریافت می کند و آنها را به root هدایت می کند (“destination”: “https://dev.to/”). این تضمین می کند که برنامه Node.js ما به جای اینکه به Vercel اجازه دهد فایل های ثابت را برای هر مسیر پیدا کند، مسیریابی را مدیریت می کند.

مراحل پیاده سازی

در اینجا نحوه اجرای رفع مشکل آمده است:

ابتدا یک فایل vercel.json در ریشه پروژه خود ایجاد کردم
حداقل پیکربندی نشان داده شده در بالا اضافه شد
تغییرات را به مخزن GitHub من فشار داد
در داشبورد Vercel من به تنظیمات پروژه رفتم
در قسمت «Framework Preset»، «Node.js» را انتخاب کنید
برنامه را مجدداً مستقر کرد

و همینطور تمام مسیرهای من به خوبی شروع به کار کردند! دیگر خطای 404 در رفرش وجود ندارد.

آنچه می آموزم

وقتی صحبت از پیکربندی Vercel به میان می آید، کمتر است
انتخاب از پیش تعیین شده چارچوب برای مسیریابی مناسب بسیار مهم است
یک قانون بازنویسی ساده می تواند مسائل پیچیده مسیریابی را حل کند
اگر با مشکلات مشابه 404 در استقرار Vercel خود مواجه هستید، این راه حل را امتحان کنید.
برای پروژه من معجزه کرد و امیدوارم به شما هم کمک کند.

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ],
  "buildCommand": "npm run build",
  "outputDirectory": "dist"
}