نشر تطبيق React.js وNode.js على Heroku

نشر تطبيق React.js مع واجهات خلفية Node.js على منصة Heroku

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

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

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

قبل البدء في نشر تطبيق React.js و Node.js على Heroku، يجب أن تتأكد من أنك قد قمت بتثبيت الأدوات التالية على جهازك:

• Node.js: ستحتاج إلى تثبيت Node.js على جهازك لتتمكن من تشغيل التطبيقات باستخدام JavaScript على الخادم. يمكنك تنزيله من الموقع الرسمي Node.js.

• Git: منصة Heroku تعتمد بشكل كبير على Git لإدارة الإصدار. لذا تأكد من تثبيت Git على جهازك من خلال زيارة Git official website.

• Heroku CLI: هو واجهة سطر الأوامر الخاصة بمنصة Heroku التي تسمح لك بالتفاعل مع التطبيق على Heroku. يمكن تنزيله من موقع Heroku الرسمي Heroku CLI.

2. إعداد البيئة المحلية

قبل نشر التطبيق على Heroku، سنحتاج إلى إعداد بيئة التطوير المحلية وتطوير التطبيق بشكل منفصل للواجهة الأمامية والخلفية.

2.1 إعداد الواجهة الخلفية باستخدام Node.js

1. إنشاء مجلد جديد للمشروع:
   ابدأ بإنشاء مجلد جديد لمشروعك الذي سيحتوي على الكود الخاص بالواجهة الخلفية.

   bash
   CopyEdit
   mkdir my-app-backend
   cd my-app-backend
   

2. تهيئة المشروع:
   قم بتهيئة مشروع Node.js داخل المجلد باستخدام الأمر التالي:

   bash
   CopyEdit
   npm init -y
   

3. تثبيت الحزم الأساسية:
   ستحتاج إلى تثبيت Express.js، وهي مكتبة تسهل بناء الخوادم في Node.js. كما ستحتاج إلى cors لتجنب مشاكل الوصول بين الخوادم. قم بتثبيتهما باستخدام npm:

   bash
   CopyEdit
   npm install express cors
   

4. إنشاء ملف الخادم:
   أنشئ ملف server.js الذي سيعمل كخادم Node.js:

   js
   CopyEdit
   const express = require('express');
   const cors = require('cors');
   
   const app = express();
   const port = process.env.PORT || 5000;
   
   app.use(cors());
   app.use(express.json());
   
   app.get('/', (req, res) => {
     res.send('Hello from Node.js backend!');
   });
   
   app.listen(port, () => {
     console.log(`Server running on port ${port}`);
   });
   

5. اختبار الخادم محلياً:
   قم بتشغيل الخادم باستخدام الأمر التالي:

   bash
   CopyEdit
   node server.js
   

   يمكنك زيارة http://localhost:5000 للتأكد من أن الخادم يعمل بشكل صحيح.

2.2 إعداد الواجهة الأمامية باستخدام React.js

1. إنشاء تطبيق React.js:
   للبدء في إنشاء واجهتك الأمامية، يمكنك استخدام Create React App لإنشاء هيكل مشروع React.js بسهولة:

   bash
   CopyEdit
   npx create-react-app my-app-frontend
   cd my-app-frontend
   

2. تشغيل التطبيق محلياً:
   قم بتشغيل التطبيق باستخدام الأمر التالي:

   bash
   CopyEdit
   npm start
   

   يمكنك فتح http://localhost:3000 لمعاينة واجهة المستخدم الخاصة بك.

3. إجراء التعديلات على التطبيق:
   يمكنك الآن إضافة المكونات اللازمة لواجهة المستخدم الخاصة بك. لتسهيل الاتصال بين واجهة React وواجهة Node.js، يمكن إرسال الطلبات إلى الخادم باستخدام fetch أو axios.

3. إعداد Heroku

3.1 تثبيت Heroku CLI

إذا لم تكن قد قمت بتثبيت Heroku CLI بعد، يجب عليك تحميله وتثبيته. بعد التثبيت، قم بتسجيل الدخول إلى حسابك على Heroku باستخدام الأمر:

bash
CopyEdit
heroku login

3.2 إعداد تطبيق Heroku

1. تهيئة التطبيق على Heroku:
   بعد تسجيل الدخول إلى Heroku CLI، ابدأ بإنشاء تطبيق جديد باستخدام الأمر التالي:

   bash
   CopyEdit
   heroku create
   

2. إعداد Git:
   إذا لم تكن قد قمت بإعداد Git في مشروعك بعد، قم بتهيئته باستخدام الأوامر التالية:

   bash
   CopyEdit
   git init
   git add .
   git commit -m "initial commit"
   

3.3 نشر واجهة Node.js

لنفترض أن لديك تطبيق Node.js يعمل على localhost، والآن يمكنك نشره على Heroku.

1. إضافة ملف Procfile:
   في جذر مشروع Node.js، أنشئ ملفاً يسمى Procfile بدون امتداد، يحتوي على السطر التالي:

   makefile
   CopyEdit
   web: node server.js
   

2. إضافة ملفات package.json و package-lock.json:
   تأكد من وجود الملفات package.json و package-lock.json في مشروعك لتحديد الحزم التي تم تثبيتها.

3. دفع التغييرات إلى Heroku:
   الآن، قم بدفع المشروع إلى Heroku باستخدام الأوامر التالية:

   bash
   CopyEdit
   git push heroku master
   

4. تشغيل التطبيق على Heroku:
   بعد أن يتم الدفع بنجاح، يمكنك تشغيل التطبيق على Heroku باستخدام الأمر:

   bash
   CopyEdit
   heroku open
   

   سيقوم Heroku بفتح المتصفح في الصفحة الرئيسية للتطبيق.

3.4 نشر واجهة React.js

1. إعداد البناء للبناء الأمامي:
   قم بإنشاء نسخة من الإنتاج لتطبيق React باستخدام الأمر التالي:

   bash
   CopyEdit
   npm run build
   

2. دمج الواجهة الأمامية مع الخادم:
   في تطبيق Node.js، يجب تعديل الخادم لتقديم ملفات React. يمكنك استخدام express.static لتقديم محتوى React بعد أن يتم بناؤه:

   js
   CopyEdit
   app.use(express.static(path.join(__dirname, 'client/build')));
   
   app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname + '/client/build/index.html'));
   });
   

3. إضافة الواجهة الأمامية إلى المشروع الخلفي:
   بعد بناء تطبيق React.js، قم بنقل ملفات المجلد build إلى مجلد الخادم Node.js في مشروعك.

4. دفع التغييرات إلى Heroku:
   الآن، قم بدفع التغييرات النهائية إلى Heroku باستخدام Git:

   bash
   CopyEdit
   git add .
   git commit -m "Integrate React with Node"
   git push heroku master
   

5. التحقق من التطبيق:
   بعد الدفع، يمكنك التحقق من التطبيق مرة أخرى عبر Heroku. يجب أن يعرض التطبيق الصفحة النهائية التي تحتوي على واجهة React.js.

4. الخاتمة

تمكنك منصة Heroku من نشر تطبيقات React.js و Node.js بشكل سهل وفعّال. من خلال استخدام Heroku CLI وأدوات Git، يمكنك نشر تطبيقك على الويب في دقائق. الخطوات التي تم شرحها في هذا المقال توفر لك الطريق الكامل لنقل تطبيق React.js مع واجهته الخلفية Node.js إلى السحابة باستخدام Heroku.