نشر تطبيق React على الويب

الدرس الواحد والثلاثون: نشر تطبيق React على الويب

في هذا الدرس، سنتعلم كيفية نشر تطبيق React على الويب باستخدام منصات مختلفة مثل Netlify، Vercel، و GitHub Pages. كما سنتناول كيفية التعامل مع نشر التطبيقات باستخدام CI/CD (التكامل المستمر والتسليم المستمر).

1. نشر تطبيق React على Netlify

Netlify هي منصة شهيرة لاستضافة التطبيقات التي تستخدم JavaScript، مثل تطبيقات React. توفر Netlify عملية نشر سهلة وآلية مع العديد من الأدوات الإضافية لتحسين سير العمل.

الخطوات:

1. إعداد تطبيق React: أولاً، تأكد من أنك قمت ببناء التطبيق باستخدام الأمر: npm run build
2. إنشاء حساب على Netlify:
   • انتقل إلى Netlify وأنشئ حسابًا باستخدام حسابك في GitHub أو GitLab أو Bitbucket.
3. ربط التطبيق مع GitHub:
   • على لوحة التحكم الخاصة بـ Netlify، انقر على “New site from Git”.
   • اختر GitHub (أو المصدر الذي تستخدمه مثل GitLab أو Bitbucket) واربطه بحسابك.
   • اختر المستودع الذي يحتوي على تطبيق React الخاص بك.
   • اتبع الإرشادات لاختيار فرع النشر (عادةً ما يكون main أو master).
4. تكوين النشر:
   • في إعدادات البناء الخاصة بـ Netlify، تأكد من إدخال:
     • Build Command: npm run build
     • Publish Directory: build
   • بعد الانتهاء، اضغط على “Deploy Site” لنشر التطبيق.
5. التعامل مع النطاقات:
   • بعد النشر، ستتمكن من الحصول على رابط مخصص للتطبيق. يمكنك تعديل النطاق على Netlify إذا كنت ترغب في استخدام اسم نطاق خاص بك.

---

2. نشر تطبيق React على Vercel

Vercel هي منصة استضافة وتوزيع تطبيقات الويب التي تدعم JavaScript بشكل مدمج. من السهل نشر تطبيقات React عليها بفضل تكاملها الجيد مع أدوات مثل GitHub و GitLab.

الخطوات:

1. إعداد تطبيق React: تأكد من أنك قمت ببناء التطبيق باستخدام الأمر: npm run build
2. إنشاء حساب على Vercel:
   • انتقل إلى Vercel وأنشئ حسابًا باستخدام حسابك على GitHub أو GitLab أو Bitbucket.
3. ربط المشروع مع GitHub:
   • اختر “New Project” بعد تسجيل الدخول إلى لوحة التحكم الخاصة بـ Vercel.
   • اختر GitHub (أو مصدر آخر) لربط Vercel بمستودعك على GitHub.
   • اختر المستودع الذي يحتوي على تطبيق React الخاص بك.
4. تكوين النشر:
   • في إعدادات البناء، سيكتشف Vercel تلقائيًا كيفية بناء تطبيق React (افتراضيًا يستخدم npm run build).
   • اضغط على “Deploy” ليبدأ Vercel في بناء ونشر تطبيقك.
5. النطاقات:
   • بعد النشر، ستحصل على رابط مخصص لتطبيقك. يمكنك أيضًا تخصيص النطاق إذا كنت ترغب في ذلك.

---

3. نشر تطبيق React على GitHub Pages

GitHub Pages هي خدمة مجانية من GitHub تتيح لك نشر تطبيقات الويب الثابتة. وهي خيار رائع لنشر التطبيقات التي لا تحتاج إلى خوادم أو قواعد بيانات.

الخطوات:

1. إعداد تطبيق React: تأكد من أنك قمت بتثبيت حزمة gh-pages الخاصة بـ GitHub Pages: npm install --save gh-pages
2. تعديل package.json: قم بإضافة إعدادات النشر في package.json. أضف إلى ملف package.json الخاص بتطبيق React:
   • أضف خاصية homepage مع رابط إلى GitHub Pages الخاص بك:
   "homepage": "https://<اسم-المستخدم>.github.io/<اسم-المستودع>"
   • أضف السكربتات الخاصة بـ predeploy و deploy:
   "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" }
3. بناء التطبيق: بعد تعديل package.json, قم ببناء التطبيق باستخدام: npm run build
4. نشر التطبيق: قم بنشر التطبيق باستخدام الأمر: npm run deploy
5. التأكد من النشر: بعد تنفيذ هذه الخطوات، سيكون تطبيق React الخاص بك متاحًا على GitHub Pages عبر الرابط الذي حددته في خاصية homepage في package.json.

---

4. التعامل مع النشر باستخدام CI/CD (التكامل المستمر والتسليم المستمر)

CI/CD هو أسلوب لتطوير البرمجيات يتضمن تكامل التغييرات الجديدة باستمرار (CI) وتسليم التطبيقات بشكل تلقائي بعد التحقق من جودتها (CD). يساعد في جعل النشر أكثر سلاسة وفعالية.

إعداد CI/CD مع GitHub Actions:

GitHub Actions هي أداة CI/CD التي تأتي مع GitHub وتساعد في أتمتة عمليات البناء والنشر.

1. إنشاء ملف GitHub Actions: قم بإنشاء ملف في المجلد .github/workflows يسمى deploy.yml.
2. إعداد الملف: name: Deploy React App on: push: branches: - main jobs: build: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v2 with: node-version: '14' - name: Install dependencies run: npm install - name: Build the app run: npm run build - name: Deploy to GitHub Pages run: npm run deploy
3. النشر التلقائي: عندما تقوم بإجراء push إلى الفرع main، سيقوم GitHub Actions تلقائيًا بتثبيت الاعتمادات، بناء التطبيق، ثم نشره على GitHub Pages باستخدام gh-pages.

---

5. الملخص

لقد تعلمنا في هذا الدرس كيفية نشر تطبيق React على الويب باستخدام منصات متعددة:

1. Netlify: منصة رائعة للنشر المجاني مع تكامل GitHub سهل.
2. Vercel: أداة رائعة للنشر وخصوصًا في بيئات JavaScript مثل React.
3. GitHub Pages: طريقة بسيطة ومجانية لنشر تطبيقات React على الويب.
4. CI/CD: تعلمنا كيف يمكن لأدوات مثل GitHub Actions أتمتة عملية النشر من خلال CI/CD.

تُعد هذه الأدوات والممارسات جزءًا أساسيًا من سير العمل في تطوير الويب الحديث.