وقتی پروژه ری اکتی مون رو روی هاست اشتراکی cpanel دیپلوی میکنیم بعد از رفرش کردن مرورگر در صفحات داخلی یا بازکردن لینک مستقیم اون صفحات در تب جدید با خطای 404 روبرو میشیم. امروز قراره یاد بگیریم چطور این خطا رو برطرف کنیم.
اما قبلش بیاین ببینیم ریشه این مشکل کجاست و چه عاملی باعث میشه پروژه در لوکال هاست و حالت دولوپ بدون مشکل کار کنه ولی بعد از build گرفتن با خطا مواجه بشه.
در حالت عادی و نرمال ما صفحه های سایتمون رو با فایل های html برای سرور مشخص می کنیم، زمانی که این صفحه رو در مرورگر باز میکنیم یک درخواست برای سرور ارسال میشه و سرور هم فایل های مورد نیاز رو برای ما برمیگردونه، مثل:
site.com/index.html
site.com/products.html
site.com/posts/index.html
اگه بخوام خیلی ساده بگم به این روت بندی و مسیردهی که توسط سرور هندل میشه و متناسب با درخواست کاربر محتوای مختص اون رو برمیگردونه مسیردهی سمت سرور - Server side rendering یا SSR گفته میشه.
در تکنولوژی های جدید از جمله React عزیز ما سایت های تک صفحه ای رو توسعه میدیم ، در این تکنولوژی ها روت بندی یا مسیردهی رو مرورگر هندل میکنه.!
در واقع فقط یک فایل html خواهیم داشت که برای روت اصلی سایت تعریف شده.
پس اگر از مسیری غیر از صفحه اصلی درخواستی برای سرور ارسال کنیم ، سرور هیچ فایل html تعریف شده ای برای ارسال پیدا نمیکنه و در نتیجه با خطای 404 روبرو میشیم.
در سایت های SPA با اولین درخواست فایل های مورد نیاز برای اجرای برنامه رو از سرور میگیریم و با کمک جاوااسکریپت، داخل خود مرورگر مسیر های مختلفی مشخص میکنیم که هرکدوم میتونن صفحه های مجزایی باشن.
در مراحل بعدی فقط فایل ها و اطلاعات مورد نیاز اون صفحه رو توسط ajax و fetch از سرور میگیریم ، در نتیجه این کار باعث کمتر شدن فشار روی منابع سرور ، همینطور کاهش پهنای باند کاربر میشه که عملا سرعت و عملکرد سایت رو بهبود میبخشه.
برای حل مشکل از روش rewrite استفاده میکنیم ، یعنی به سرور میگیم: اگر درخواستی از هر مسیری دریافت کردی فایل html روت اصلی رو برگردون به همین سادگی :)
1- بررسی و موجود بودن فایل .htaccess در هاست
معمولا این فایل در روت اصلی هاست یعنی پوشه public_html وجود داره اما قابل مشاهده نیست، پس برای دیدن فایل های مخفی در نوار بالا روی دکمه Settings کلیک میکنیم و بعد تیک Show Hidden Files رو میزنیم.
اگر فایل وجود داشت با راست کلیک روی اون نوار ابزار فایل مینجر باز میشه ، ازبین گزینه ها گزینه Edit رو انتخاب و در نهایت ok رو میزنیم تا صفحه ویرایش فایل در پنجره جدید باز بشه.
2- ساخت فایل .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>
اگه مثل من دارین نمونه کارتون رو داخل یه پوشه مثل mySite.com/projects/react-app ذخیره میکنید، باید کمی تغییر در فایل ها package.json , index.js و htaccess ایجاد کنیم.
1- تغییر homepage پروژه
برای اینکار فایل package.json رو داخل vscode باز می کنیم و آدرس دقیق پوشه ای که قراره پروژه رو در اون آپلود کنیم رو جلوی homepage می نویسیم.
2- تعریف basename در react-router-dom
برای اضافه کردن basename ابتدا فایل index.js یا هر فایلی که در اون از BrowserRouter استفاده کردید رو باز کنید و طبق عکس یک پراپرتی به همین اسم برای BrowserRouter روتر تعریف کنید
مقدار پراپرتی basename باید با اسلش ( / ) شروع بشه و در ادامه مسیر پوشه پروژه باشه مثل :
/projects/react-app
ما توی پروژه هامون کلی لینکدهی به صفحات مختلف داریم که همه با ( / ) مثل:
/posts
/products/candy
وقتی درحالت دولوپ هستیم برای دسترسی به این صفحات از همچین لینک هایی استفاده میکنیم:
localhost:3000/posts
localhost: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 و .... استفاده میکنیم، این سرویس ها پروژه رو در حالت دولوپ اجرا میکنن و از فایل های استاتیک استفاده نمیکنن پس مشکلی هم ندارن.
خوبه که هر فرانت اند کاری بتونه با سرور و هاست هم کار کنه تا با چالش های این سرویس ها آشنا باشه.
درآخر مرسی که تا انتها با من همراه بودی امیدوارم این آموزش برات مفید باشه.
