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

1. مقدمة إلى صفحات جيثب

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

الفوائد الرئيسية:

مجانية وسهلة الاستخدام.

يدعم النطاقات المخصصة.

يقوم بإنشاء موقعك ونشره تلقائيًا.

لمزيد من المعلومات، راجع وثائق صفحات GitHub.

1. إعداد تطبيق React الخاص بك

قبل نشر تطبيق React الخاص بك على صفحات GitHub، تأكد من أن لديك تطبيق React فعال. إذا لم يكن لديك تطبيق بعد، فيمكنك إنشاء تطبيق React جديد باستخدام إنشاء تطبيق React (CRA).

npx create-react-app my-react-app
cd my-react-app

يقوم هذا الأمر بإعداد مشروع React جديد بجميع التكوينات اللازمة.

1. تحضير تطبيق React للنشر

لنشر تطبيق React على صفحات GitHub، يلزمك إجراء بعض التعديلات على تكوين تطبيقك.

تثبيت حزمة صفحات GitHub:

npm install gh-pages --save-dev

تحديث package.json:

أضف الحقول التالية إلى ملف package.json الخاص بك:

"homepage": "https://.github.io/",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

استبدل باسم مستخدم GitHub الخاص بك وباسم المستودع الخاص بك.

1. إنشاء مستودع جيثب

انتقل إلى GitHub وقم بإنشاء مستودع جديد.

قم بتسمية المستودع الخاص بك وقم بتعيينه إلى عام.

لا تقم بالتهيئة باستخدام README أو .gitignore أو الترخيص، حيث ستتم إضافتها لاحقًا.

1. نشر تطبيق React على صفحات GitHub

الآن بعد أن أصبح تطبيق React جاهزًا ولديك مستودع GitHub، فقد حان وقت النشر.

تهيئة Git والدفع إلى GitHub:

git init
git remote add origin https://github.com//.git
git add .
git commit -m "Initial commit"
git push -u origin master

نشر تطبيقك:

npm run deploy

سيعمل هذا الأمر على إنشاء تطبيقك ونشره على فرع gh-pages في مستودعك.

1. مشكلات النشر الشائعة واستكشاف الأخطاء وإصلاحها

قد يواجه نشر تطبيقات React على صفحات GitHub مشكلات في بعض الأحيان. فيما يلي المشاكل الشائعة وحلولها:

أخطاء 404: تأكد من تعيين حقل الصفحة الرئيسية في package.json بشكل صحيح.

فشل البناء: تحقق من البرامج النصية للبناء الخاص بك وتأكد من تثبيت جميع التبعيات.

مشكلات CORS: تأكد من أن نقاط نهاية API لديك تدعم CORS إذا كنت تقدم طلبات عبر الأصل.

لمزيد من النصائح حول استكشاف الأخطاء وإصلاحها، راجع دليل استكشاف أخطاء صفحات GitHub وإصلاحها.

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

توفر GitHub Actions إمكانات CI/CD قوية يمكنها أتمتة عملية النشر الخاصة بك. إليك كيفية إعداده:

إنشاء ملف سير العمل:

في المستودع الخاص بك، قم بإنشاء ملف باسم .github/workflows/deploy.yml.

إضافة نص النشر:

الاسم: نشر تطبيق React على صفحات GitHub

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    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 React app
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

سيقوم سير العمل هذا تلقائيًا بنشر تطبيق React الخاص بك عندما تدفع التغييرات إلى الفرع الرئيسي.

1. تقنيات النشر المتقدمة

بخلاف الأساسيات، هناك العديد من التقنيات المتقدمة التي يمكنك استخدامها لتحسين عملية النشر الخاصة بك:

النطاقات المخصصة: يمكنك استخدام نطاق مخصص مع موقع صفحات GitHub الخاص بك عن طريق إضافة ملف CNAME إلى مستودعك.

فرض HTTPS: تأكد من تقديم موقعك دائمًا عبر HTTPS من خلال تمكين خيار HTTPS في إعدادات المستودع الخاص بك.

عمليات النشر في الفروع: النشر من فروع مختلفة لبيئات التدريج والإنتاج.

للحصول على معلومات تفصيلية، راجع دليل المجال المخصص لصفحات GitHub.

1. أفضل الممارسات لنشر تطبيقات React

لضمان النشر الناجح وتجربة مستخدم عالية الجودة، اتبع أفضل الممارسات التالية:

تحسين الإصدار الخاص بك: استخدم أدوات مثل webpack وBabel لتحسين حزم JavaScript الخاصة بك.

استخدام متغيرات البيئة: إدارة الإعدادات الخاصة بالبيئة باستخدام متغيرات البيئة.

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

لمزيد من أفضل الممارسات، راجع دليل نشر React.

1. خاتمة

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

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