https://virgool.io/feed/@alireza_hosseini آموختن کوچک‌ترین رسالتی است که بر دوش انسان‌هاست. من نیز خود را در انجام درست این رسالت شریک می‌دانم. fa 2026-06-17 07:48:42 https://files.virgool.io/upload/users/161478/avatar/n2VsAx.jpg?height=120&width=120 https://virgool.io/@alireza_hosseini https://virgool.io/@alireza_hosseini/fixing-404-error-react-js-projects-in-cpanel-ctl4cryzyaok خطای 404 در پروژه ری اکتی بعد از دیپلوی روی هاست وقتی پروژه ری اکتی مون رو روی هاست اشتراکی cpanel دیپلوی میکنیم بعد از رفرش کردن مرورگر در صفحات داخلی یا بازکردن لینک مستقیم اون صفحات در تب جدید با خطای 404 روبرو میشیم. امروز قراره یاد بگیریم چطور این خطا رو برطرف کنیم.اما قبلش بیاین ببینیم ریشه این مشکل کجاست و چه عاملی باعث میشه پروژه در لوکال هاست و حالت دولوپ بدون مشکل کار کنه ولی بعد از build گرفتن با خطا مواجه بشه.Server-side rendering ( SSR )در حالت عادی و نرمال ما صفحه های سایتمون رو با فایل های html برای سرور مشخص می کنیم، زمانی که این صفحه رو در مرورگر باز میکنیم یک درخواست برای سرور ارسال میشه و سرور هم فایل های مورد نیاز رو برای ما برمیگردونه، مثل:site.com/index.htmlsite.com/products.htmlsite.com/posts/index.htmlاگه بخوام خیلی ساده بگم به این روت بندی و مسیردهی که توسط سرور هندل میشه و متناسب با درخواست کاربر محتوای مختص اون رو برمیگردونه مسیردهی سمت سرور - Server side rendering یا SSR گفته میشه.مشکل چیه.؟در تکنولوژی های جدید از جمله React عزیز ما سایت های تک صفحه ای رو توسعه میدیم ، در این تکنولوژی ها روت بندی یا مسیردهی رو مرورگر هندل میکنه.!در واقع فقط یک فایل html خواهیم داشت که برای روت اصلی سایت تعریف شده.پس اگر از مسیری غیر از صفحه اصلی درخواستی برای سرور ارسال کنیم ، سرور هیچ فایل html تعریف شده ای برای ارسال پیدا نمیکنه و در نتیجه با خطای 404 روبرو میشیم.تفاوت بین SSR و CSR Client side rendering (CSR )در سایت های SPA با اولین درخواست فایل های مورد نیاز برای اجرای برنامه رو از سرور میگیریم و با کمک جاوااسکریپت، داخل خود مرورگر مسیر های مختلفی مشخص میکنیم که هرکدوم میتونن صفحه های مجزایی باشن.در مراحل بعدی فقط فایل ها و اطلاعات مورد نیاز اون صفحه رو توسط ajax و fetch از سرور میگیریم ، در نتیجه این کار باعث کمتر شدن فشار روی منابع سرور ، همینطور کاهش پهنای باند کاربر میشه که عملا سرعت و عملکرد سایت رو بهبود میبخشه.رفع خطا در هاست اشتراکی Cpanelبرای حل مشکل از روش rewrite استفاده میکنیم ، یعنی به سرور میگیم: اگر درخواستی از هر مسیری دریافت کردی فایل html روت اصلی رو برگردون به همین سادگی :)1- بررسی و موجود بودن فایل .htaccess در هاستمعمولا این فایل در روت اصلی هاست یعنی پوشه public_html وجود داره اما قابل مشاهده نیست، پس برای دیدن فایل های مخفی در نوار بالا روی دکمه Settings کلیک میکنیم و بعد تیک Show Hidden Files رو میزنیم.اگر فایل وجود داشت با راست کلیک روی اون نوار ابزار فایل مینجر باز میشه ، ازبین گزینه ها گزینه Edit رو انتخاب و در نهایت ok رو میزنیم تا صفحه ویرایش فایل در پنجره جدید باز بشه.بررسی موجود بودن فایل .htaccess2- ساخت فایل .htaccess در روت پروژهاگر این فایل از قبل رو هاست وجود نداشت هم مشکلی نیست، فقط کافیه از نوار بالا گزینه add new رو بزنی و یک فایل با اسم .htaccess بسازی.در نهایت باید فایل ایجاد شده رو با راست کلیک و گزینه Edit بازش کنی.3- کپی پیست کردن کد ها کد هایی رو که از قبل آماده کردم رو داخل فایل پیست کنید و حتما در آخر گزینه Save Changes نوار بالا بزنید تا تغییرات اعمال بشن ، حالا مشکل برطرف شده و دیگه با خطای 404 روبرو نمیشیم.<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l RewriteRule . /index.html [L] </IfModule>کانفیگ فایل htaccess برای فولدر هااگه مثل من دارین نمونه کارتون رو داخل یه پوشه مثل mySite.com/projects/react-app ذخیره میکنید، باید کمی تغییر در فایل ها package.json , index.js و htaccess ایجاد کنیم.1- تغییر homepage پروژهبرای اینکار فایل package.json رو داخل vscode باز می کنیم و آدرس دقیق پوشه ای که قراره پروژه رو در اون آپلود کنیم رو جلوی homepage می نویسیم.تغییر homepage در فایل package.json2- تعریف basename در react-router-domبرای اضافه کردن basename ابتدا فایل index.js یا هر فایلی که در اون از BrowserRouter استفاده کردید رو باز کنید و طبق عکس یک پراپرتی به همین اسم برای BrowserRouter روتر تعریف کنیدمقدار پراپرتی basename باید با اسلش ( / ) شروع بشه و در ادامه مسیر پوشه پروژه باشه مثل : /projects/react-appتعریف basename در react-router-dom چرا باید basename تعریف کنیم ؟ما توی پروژه هامون کلی لینکدهی به صفحات مختلف داریم که همه با ( / ) مثل:/posts/products/candyوقتی درحالت دولوپ هستیم برای دسترسی به این صفحات از همچین لینک هایی استفاده میکنیم:localhost:3000/postslocalhost:3000:/products/candyوقتی بدون basename پروژه رو دیپلوی کنیم تمام لینک ها به اینصورت خواهند بود:mySite.com/postsپس این لینک 404 خواهد بود چون ما پروژه رو داخل پوشه projects/ آپلود کردیم اینجا basename میاد و قبل تمام لینک ها قرار میگیره و نیازی نیست به صورت دستی این مسیر رو برای همه لینک ها بنویسیم.3- ویرایش فایل htaccess برای فولدرهاتوی خط چهارم و هشتم کد پایین به سرور گفتیم که از هر مسیری که ابتداش با این آدرس شروع شده بود درخواستی دریافت کردی فایل ها روت اصلی رو برای کاربر ارسال کن ، با این کار مرورگر فایل های مورد نیازش برای اجرای برنامه رو به دست میاره و طبق روت بندی اطلاعات رو به کاربر نشون میده.<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^projects/react-app/$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l RewriteRule . projects/react-app [L] </IfModule>دقت کنید اگر پروژه داخل پوشه ای قرار داره باید آدرس دهی به این صورت باشه projects/react-app و نیازی به وارد کردن دامنه نیست. مثال اشتباه : mySite.com/projects/react-app جمع بندی همه ما در ابتدا برای دیپلوی پروژه ها و نمونه کارهامون از سرویس هایی مثل liara , netlify , vercel و .... استفاده میکنیم، این سرویس ها پروژه رو در حالت دولوپ اجرا میکنن و از فایل های استاتیک استفاده نمیکنن پس مشکلی هم ندارن.خوبه که هر فرانت اند کاری بتونه با سرور و هاست هم کار کنه تا با چالش های این سرویس ها آشنا باشه.درآخر مرسی که تا انتها با من همراه بودی امیدوارم این آموزش برات مفید باشه. Alireza Hosseini Alireza Hosseini Tue, 30 May 2023 23:03:32 +0330