كيف ارفع موقع مبني بReact على هده الاستضافة dzsecurity.com ؟

الاستضافة توفر لوحة تحكم cPanel لذا سترفع المشروع كملفات ثابتة static، بمعنى بناء المشروع وتجهيزه للنشر من خلال الأمر:

npm run build

وستحصل على مجلد  جديد داخل مشروعك باسم build أو dist في حال تستخدم Vite، فقم بضغط محتويات المجلد وليس المجلد نفسه أي ما بداخله في ملف مضغوط بصيغة .zip

ثم سجل الدخول إلى حسابك في DZSecurity وانتقل إلى لوحة التحكم cPanel وابحث عن File Manager وادخل إليه واذهب إلى المجلد public_html.

واحذف أي ملفات افتراضية قديمة مثل default.cgi أو مجلدات فارغة ثم اضغط على زر Upload من الشريط العلوي واختر ملف الـ .zip الذي قمت بإنشائه، وبعد انتهاء الرفع، عد إلى public_html، اضغط بالزر الأيمن على الملف المضغوط واختر Extract لاستخراج ما به.

وفي نفس المجلد public_html، قم بإنشاء ملف جديد وسمه:

.htaccess

وإن لم يظهر الملف بعد إنشائه، اضغط على Settings في أعلى اليمين وفعل خيار Show Hidden Files لإظهار الملفات المخفية.

واضغط بالزر الأيمن على ملف .htaccess ثم Edit وضع الكود التالي داخله واحفظ الملف:

<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>

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

استضافة dzsecurity هي استضافة تقليدية (Shared Hosting)، وهذا النوع من الاستضافات لا يشغّل React مباشرة لأنه لا يدعم Node.js لتشغيل السيرفر، لكن يمكن رفع موقع React عليها بعد تحويله إلى ملفات ثابتة.

الفكرة ببساطة أن React أثناء التطوير يعمل كسيرفر، أما عند النشر فنحن لا نرفع المشروع كاملًا، بل نرفع الناتج النهائي فقط.

أول خطوة على جهازك هي بناء نسخة الإنتاج من المشروع. تدخل إلى مجلد مشروع React وتنفّذ أمر البناء. هذا الأمر يقوم بتحويل المشروع إلى HTML وCSS وJavaScript جاهزة للتشغيل على أي استضافة عادية. بعد الانتهاء سيظهر لديك مجلد جديد غالبًا اسمه build أو dist حسب الأداة المستخدمة.

بعد ذلك تدخل إلى لوحة التحكم في استضافة dzsecurity، وغالبًا ستكون cPanel. من هناك تفتح مدير الملفات وتدخل إلى مجلد public_html، لأن هذا هو المجلد الذي تُعرض منه الملفات على المتصفح. إذا كان داخله ملفات قديمة يمكنك حذفها أو نقلها.

الآن تقوم برفع محتويات مجلد build نفسه إلى داخل public_html، وليس المجلد كاملًا. المهم أن يكون ملف index.html موجودًا مباشرة داخل public_html.

بعد رفع الملفات، افتح موقعك من المتصفح. في أغلب الحالات سيعمل مباشرة. إذا وجدت أن التنقل بين الصفحات لا يعمل ويظهر لك خطأ 404 عند تحديث الصفحة، فهذا بسبب أن React يعتمد على routing داخلي، والاستضافة لا تعرف ذلك.

لحل هذه المشكلة تحتاج إلى إضافة ملف بسيط اسمه .htaccess داخل public_html. هذا الملف يخبر السيرفر أن أي رابط غير معروف يجب أن يعود إلى index.html، وبهذا يعمل الموقع بشكل طبيعي.

أيضًا انتبه قبل البناء أن تضبط المسار الصحيح للموقع. إذا كان الموقع على الدومين الرئيسي فالأمر طبيعي، أما إذا كان داخل مجلد فرعي فيجب تعديل إعدادات React قبل البناء حتى لا تتكسر المسارات.

باختصار، React لا يُرفع ككود تشغيل، بل يُرفع كناتج جاهز. طالما حصلت على ملفات HTML وJS النهائية، فهذه الاستضافة كافية تمامًا.

إذا أردت لاحقًا موقع React مع Backend أو API، فستحتاج إما إلى استضافة تدعم Node.js أو فصل الواجهة الأمامية عن الخلفية كل واحد على استضافة مختلفة.

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

أولا لنجهز مشروع React للبناء من خلال الأمر :

# في بيئة التطوير المحلية
npm run build
# أو
yarn build

وهكذا سيتم إنشاء مجلد build يحتوي على الملفات المجهزة والمجمعة.

ثانيا رفع الملفات إلى الاستضافة :

الطريقة الأولى وهي عبر cPanel قم بسجيل الدخول إلى cPanel الخاص بموقع dzsecurity.com ومن ثم انتقل إلى File Manager

وافتح مجلد public_html أو المجلد الرئيسي لموقعك وقم برفع جميع محتويات مجلد build مباشرة إلى المجلد الرئيسي.

أو الطريقة الثانية وهي من خلال FTP الخاص بموقعك وإستخدام برنامج مثل filezilla لرفع الملفات من خلاله.

ثالثا تكوين خاص لموقع React : مثل ملف .htaccess للخوادم التي تدعم Apache وأنشئ ملف .htaccess في المجلد الرئيسي وأضف:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

وإذا كان لديك دومين فرعيتأكد من رفع الملفات في المجلد الصحيح مثل subdomain.dzsecurity.com.

رابعا إعدادات DNS والدومين :

تأكد من توجيه الدومين إلى الخادم الصحيح وقد تحتاج لضبط إعدادات A Record أو CNAME لو كنت قد اشتريت النطاق domain بشكل منفصل