كيفية تثبيت React.js في cPanel: الدليل 2024

أصبحت React.js إحدى مكتبات JavaScript الأكثر شيوعًا لبناء واجهات مستخدم ديناميكية وتفاعلية. على الرغم من استخدامه بشكل شائع مع أطر عمل الواجهة الخلفية مثل Node.js، يسعى العديد من المطورين إلى نشر تطبيقات React.js الخاصة بهم على بيئات الاستضافة المشتركة التي تستخدم cPanel، وهي لوحة تحكم شائعة لإدارة حسابات استضافة الويب.

سترشدك هذه المقالة خلال عملية تثبيت تطبيق React.js ونشره باستخدام cPanel، حتى لو كان موفر الاستضافة الخاص بك لا يلبي أطر عمل JavaScript على وجه التحديد.

يمكنك أيضًا قراءة: أفضل 7 استضافة لتطبيقات React لعام 2024 (مقارنة)

المتطلبات الأساسية

قبل الغوص في عملية التثبيت، هناك بعض المتطلبات الأساسية التي يجب أن تتوفر لديك:

1. تطبيق React.js جاهز للنشر : تأكد من أن تطبيق React الخاص بك مكتمل وجاهز للإنتاج. وهذا يعني أن جميع أعمال التطوير قد تم إنجازها، وأنك جاهز لإنشاء نسخة من التطبيق يمكن تقديمها للمستخدمين.
2. الوصول إلى cPanel : أنت بحاجة إلى الوصول إلى cPanel، الذي توفره خدمة استضافة الويب الخاصة بك. يقدم معظم موفري الاستضافة المشتركة cPanel كجزء من خدمتهم. (نوصي بـ Hostinger مع عرضنا الخاص باستخدام رمز القسيمة " Codeless ")
3. اسم المجال : مجال مسجل أو مجال فرعي حيث ستنشر تطبيق React الخاص بك. إذا لم تقم بإعداد هذا بعد، فيمكنك إما استخدام نطاق موجود أو إنشاء نطاق فرعي من خلال cPanel.

الخطوة 1: قم بإعداد تطبيق React.js الخاص بك

إنشاء بناء الإنتاج

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

1. افتح الوحدة الطرفية : انتقل إلى دليل مشروع React باستخدام الوحدة الطرفية أو موجه الأوامر.
2. قم بتشغيل أمر البناء : npm run build إذا كنت تستخدم Yarn كمدير للحزم لديك، فستستخدم: yarn build يقوم هذا الأمر بإنشاء مجلد build في دليل المشروع الخاص بك. يحتوي مجلد build على جميع الملفات الثابتة اللازمة لتشغيل تطبيقك، بما في ذلك ملفات HTML وCSS وJavaScript.

معاينة البناء (اختياري)

قبل النشر، من الجيد معاينة إصدار الإنتاج محليًا للتأكد من أن كل شيء يعمل بشكل صحيح. يمكنك القيام بذلك باستخدام أداة خادم بسيطة:

1. تثبيت الخدمة على مستوى العالم : npm install -g serve
2. خدمة البناء : serve -s build سيبدأ هذا الأمر خادمًا محليًا ويخدم تطبيقك من دليل build ، مما يسمح لك بمعاينته في متصفحك.

الخطوة 2: إعداد بيئة cPanel الخاصة بك

بمجرد أن يصبح تطبيق React جاهزًا للنشر، ستحتاج إلى تكوين بيئة cPanel الخاصة بك.

إنشاء نطاق فرعي (اختياري)

إذا كنت تريد إمكانية الوصول إلى تطبيق React الخاص بك عبر نطاق فرعي (على سبيل المثال، react.yourdomain.com )، فأنت بحاجة إلى إنشاء واحد في cPanel:

1. تسجيل الدخول إلى cPanel : استخدم بوابة تسجيل الدخول الخاصة بموفر الاستضافة للوصول إلى cPanel.
2. انتقل إلى النطاقات الفرعية : في قسم النطاقات، انقر على "النطاقات الفرعية".
3. إنشاء نطاق فرعي جديد : أدخل الاسم المطلوب لنطاقك الفرعي وحدد الدليل الجذر للمستند. إذا تركت الإعدادات الافتراضية، فسيقوم cPanel بإنشاء دليل جديد ضمن public_html باسم النطاق الفرعي الخاص بك.

قم بتحميل ملفات البناء

بعد أن أصبحت نسخة الإنتاج جاهزة، يمكنك الآن تحميلها على الخادم الخاص بك.

1. الوصول إلى مدير الملفات : في cPanel، حدد موقع "مدير الملفات" ضمن قسم "الملفات".
2. انتقل إلى الدليل المطلوب : إذا قمت بإنشاء نطاق فرعي، فانتقل إلى الدليل المقابل (على سبيل المثال، public_html/react ). إذا كنت تقوم بالنشر على المجال الرئيسي، فاستخدم دليل public_html .
3. قم بتحميل مجلد البناء :
   • أولاً، قم بضغط مجلد build الموجود على جهازك المحلي في ملف ZIP.
   • استخدم الزر "تحميل" في مدير الملفات لتحميل ملف ZIP هذا إلى الدليل المطلوب.
   • بمجرد التحميل، انقر بزر الماوس الأيمن فوق الملف وحدد "استخراج" لفك ضغط المحتويات

الخطوة 3: تكوين إعدادات الخادم

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

إعداد .htaccess (اختياري)

إذا كان تطبيقك يستخدم React Router، والذي يعتمد على HTML5 pushState History API، فيجب تكوين خادمك للتعامل مع الطلبات بشكل صحيح. يعد هذا مهمًا بشكل خاص إذا كان بإمكان المستخدمين التنقل مباشرة إلى مسارات أخرى غير الصفحة الرئيسية.

1. تحديد موقع أو إنشاء .htaccess :
   • في دليل public_html أو دليل النطاق الفرعي، تحقق مما إذا كان هناك ملف .htaccess .
   • إذا لم يكن الأمر كذلك، قم بإنشاء ملف جديد باسم .htaccess .
2. إضافة قواعد التوجيه :
   • افتح ملف .htaccess وأضف التكوين التالي: bashCopy code Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]
   يضمن هذا التكوين أن جميع الطلبات يتم توجيهها من خلال ملف index.html ، وهو أمر ضروري لتطبيقات الصفحة الواحدة مثل تلك التي تم إنشاؤها باستخدام React.

الخطوة 4: وضع اللمسات النهائية والاختبار

بعد تحميل كل شيء وتكوينه، فإن الخطوة التالية هي الانتهاء من النشر والتأكد من أن كل شيء يعمل كما هو متوقع.

تحقق من أذونات الملف

تأكد من أن الملفات والأدلة لديها الأذونات الصحيحة ليتم الوصول إليها بواسطة خادم الويب. بشكل عام، يجب أن يكون للمجلدات أذونات محددة على 755 وملفات على 644 .

اختبار النشر

قم بزيارة نطاقك أو نطاقك الفرعي (على سبيل المثال، react.yourdomain.com ) في متصفح الويب للتحقق من أن تطبيق React الخاص بك يعمل بسلاسة. تحقق من جميع الصفحات والميزات للتأكد من أن كل شيء يعمل بشكل صحيح.

إذا واجهت أية مشكلات، فيمكن أن تكون أدوات مطور المتصفح مفيدة في تشخيص المشكلات. بالإضافة إلى ذلك، يمكن أن توفر سجلات الأخطاء في cPanel رؤى حول المشكلات من جانب الخادم.

استكشاف الأخطاء وإصلاحها

قد يؤدي نشر تطبيق React على cPanel أحيانًا إلى حدوث مشكلات. فيما يلي بعض المشاكل الشائعة وحلولها:

• أخطاء التوجيه : إذا أدى التنقل إلى صفحات مختلفة من تطبيقك إلى حدوث أخطاء 404، فتأكد من تكوين ملف .htaccess الخاص بك بشكل صحيح للتعامل مع التوجيه من جانب العميل.
• أخطاء لم يتم العثور على الملف : تحقق مرة أخرى من أن جميع الملفات من مجلد build قد تم تحميلها بشكل صحيح وأنها موجودة في الدليل الصحيح على الخادم الخاص بك.
• أذونات الملف غير صحيحة : إذا لم يتم تحميل الملفات، فتأكد من تعيين أذونات الملف بشكل صحيح ( 755 للأدلة و 644 للملفات).
• مشكلات التخزين المؤقت : في بعض الأحيان، قد لا تظهر التغييرات على الفور بسبب التخزين المؤقت. امسح ذاكرة التخزين المؤقت للمتصفح الخاص بك أو حاول الوصول إلى الموقع في وضع التصفح المتخفي لمعرفة ما إذا كانت المشكلة لا تزال قائمة.

خاتمة

قد يبدو نشر تطبيق React.js على خادم مستضاف على cPanel أمرًا صعبًا في البداية، خاصة إذا كنت معتادًا على المزيد من عمليات النشر الآلية مع خدمات مثل Vercel أو Netlify أو راجع مقالتنا: أفضل 10 موفري استضافة Node.js لعام 2024 ( رخيصة ومجانية). ومع ذلك، باتباع الخطوات الموضحة في هذا الدليل، يمكنك بنجاح تشغيل تطبيق React على cPanel.

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

كلما اكتسبت المزيد من الخبرة، يمكنك استكشاف موضوعات أكثر تقدمًا مثل دمج الخدمات الخلفية، أو إعداد خطوط أنابيب النشر المستمر، أو تحسين الأداء بشكل أكبر. في الوقت الحالي، استمتع بمشاركة مشاريع React الخاصة بك مع العالم!

لودجون روشي

يمتلك لودجون، الذي شارك في تأسيس Codeless، شغفًا عميقًا بالتكنولوجيا والويب. مع أكثر من عقد من الخبرة في إنشاء مواقع الويب وتطوير سمات WordPress المستخدمة على نطاق واسع، أثبت Ludjon نفسه كخبير بارع في هذا المجال.