كيفية نشر تطبيق React إلى منصة DigitalOcean App

اختار المؤلف Creative Commons لتلقي تبرع كجزء من برنامج الكتابة من أجل التبرعات.

المقدمة

منصة التطبيقات من DigitalOcean هي منتج المنصة كخدمة (PaaS) الذي يتيح لك تكوين ونشر التطبيقات من مستودع المصدر. بعد تكوين التطبيق الخاص بك، ستقوم DigitalOcean ببناء ونشر التطبيق في كل تغيير، مما يمنحك فوائد خادم الويب الكامل وخط أنابيب النشر مع الحد الأدنى من التكوين. يمكن أن يكون هذا وسيلة سريعة وفعالة لنشر تطبيقاتك React، وإذا كنت تستخدم React لبناء موقع بدون خادم، يمكنك استخدام الطبقة المجانية لمنصة التطبيقات.

في هذا البرنامج التعليمي، ستنشئ تطبيق React وتنشئه على منصة DigitalOcean App باستخدام الإصدار المجاني Starter tier. ستقوم ببناء التطبيق باستخدام Create React App، ودفع الشيفرة إلى مستودع GitHub، ثم تكوين التطبيق كتطبيق DigitalOcean. ستقوم بربط التطبيق بشيفرتك المصدرية ونشر المشروع كمجموعة من الملفات الثابتة.

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

المتطلبات المسبقة

• على جهازك المحلي، ستحتاج إلى بيئة تطوير تعمل بنظام Node.js. تم اختبار هذا البرنامج التعليمي على نسخة Node.js 10.22.0 ونسخة npm 6.14.6. لتثبيت ذلك على نظام macOS أو Ubuntu 20.04، اتبع الخطوات الموجودة في كيفية تثبيت Node.js وإنشاء بيئة تطوير محلية على macOS أو القسم تثبيت Node.js باستخدام Apt باستخدام مستودع PPA لـ NodeSource من كيفية تثبيت Node.js على Ubuntu 20.04.

• Git مثبت على جهازك المحلي. يمكنك اتباع البرنامج التعليمي المساهمة في المصدر المفتوح: البدء مع Git لتثبيت وإعداد Git على جهاز الكمبيوتر الخاص بك.

• حساب على DigitalOcean.

• حساب على GitHub، يمكنك إنشاؤه من خلال الانتقال إلى الصفحة إنشاء حسابك.

• ستحتاج أيضًا إلى معرفة أساسية بلغة JavaScript و HTML و CSS، التي يمكنك العثور عليها في سلسلةنا كيفية بناء موقع ويب باستخدام HTML، كيفية بناء موقع ويب باستخدام CSS، وأيضًا في كيفية البرمجة بلغة JavaScript.

الخطوة 1 — إنشاء مشروع React

في هذه الخطوة، ستقوم بإنشاء تطبيق React باستخدام Create React App وبناء نسخة يمكن نشرها منه.

للبدء، قم بإنشاء تطبيق جديد باستخدام Create React App على جهازك المحلي. في الطرفية، قم بتشغيل الأمر لبناء تطبيق يسمى digital-ocean-app:

npx create-react-app digital-ocean-app

سيقوم الأمر npx بتشغيل حزمة Node دون تنزيلها على جهازك. سيقوم النص create-react-app بتثبيت جميع الاعتمادات وبناء مشروع قاعدة في دليل digital-ocean-app. لمزيد من المعلومات حول Create React App، تحقق من البرنامج التعليمي كيفية إعداد مشروع React مع Create React App.

سيتم تنزيل الاعتمادات وإنشاء مشروع قاعدة. قد يستغرق الأمر بضع دقائق لإكماله. عندما يتم الانتهاء، ستتلقى رسالة نجاح. قد تكون الإصدارة الخاصة بك مختلفة قليلا إذا استخدمت yarn بدلاً من npm:

Output
Success! Created digital-ocean-app at your_file_path/digital-ocean-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd digital-ocean-app
  npm start

Happy hacking!

الآن بعد أن لديك مشروع قاعدة، قم بتشغيله محلياً حتى تتمكن من اختبار كيف سيظهر المشروع على الخادم. أولاً، قم بالتغيير إلى الدليل:

cd digital-ocean-app

قم بتشغيل المشروع باستخدام النص npm start:

npm start

عند تشغيل الأمر، ستتلقى الإخراج مع عنوان URL لخادم التطوير المحلي:

Output
Compiled successfully!

You can now view digital-ocean-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.110:3000

Note that the development build is not optimized.
To create a production build, use npm build.

افتح متصفحًا إلى http://localhost:3000 وستجد مشروعك:

قم بإيقاف المشروع بكتابة CTRL+C أو ⌘+C في الطرفية.

الآن بعد أن لديك تطبيق React يعمل، يمكنك دفع الشيفرة إلى مستودع GitHub.

الخطوة 2 — دفع الشيفرة إلى GitHub

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

قم بتسجيل الدخول إلى حسابك على GitHub. بعد تسجيل الدخول، أنشئ مستودعًا جديدًا باسم digital-ocean-app. يمكنك جعل المستودع سواءً كان خاصًا أو عامًا:

تقوم Create React App تلقائيًا بتهيئة مشروعك ب git، لذا يمكنك إعداد الدفع المباشر للشيفرة إلى GitHub. أولاً، أضف المستودع الذي ترغب في استخدامه باستخدام الأمر التالي:

git remote add origin https://github.com/your_name/digital-ocean-app.git

بعد ذلك، حدد أنك تريد الدفع إلى فرع main باستخدام الأمر التالي:

git branch -M main

وأخيرًا، قم بدفع الشيفرة إلى مستودعك:

git push -u origin main

أدخل بيانات اعتمادك على GitHub عندما يُطلب منك ذلك لدفع شيفرتك.

عند دفع الشيفرة، ستتلقى رسالة نجاح. ستكون رسالتك مختلفة قليلاً:

Output
Counting objects: 22, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (22/22), done.
Writing objects: 100% (22/22), 187.50 KiB | 6.94 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0)
To github.com:your_name/digital-ocean-app.git
   4011c66..647d2e1  main -> main

لقد قمت الآن بنسخ الشيفرة إلى مستودع GitHub.

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

الخطوة 3 — النشر على منصة DigitalOcean للتطبيقات

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

بحلول نهاية هذه الخطوة، ستكون قادرًا على نشر تطبيق مع توصيل مستمر على DigitalOcean.

للبدء، قم بتسجيل الدخول إلى حسابك على DigitalOcean واضغط على الزر إنشاء، ثم حدد التطبيقات:

سيتم بعد ذلك طلب ربط مستودع GitHub الخاص بك. إذا لم تقم بربطه بعد، ستحتاج إلى تسجيل الدخول باستخدام اسم المستخدم وكلمة المرور الخاصة بك ومنح DigitalOcean إذن الوصول إلى مستودعاتك:

بمجرد ربط حسابك، حدد المستودع الذي ترغب في الاتصال به على شاشة التفويض في GitHub. في هذه الحالة، أنت تستخدم مستودع digital-ocean-app، لكن يمكنك ربط مستودعات أخرى إذا كنت ترغب في ذلك:

بعد اختيار المستودع، ستعيد الاتصال بواجهة DigitalOcean. حدد digital-ocean-app من قائمة المستودعات، ثم اضغط على التالي. سيتم ربط تطبيقك مباشرة بمستودع GitHub:

الآن بعد اختيارك للمستودع، تحتاج إلى تكوين تطبيق DigitalOcean. في هذا المثال، سيتم استناد الخادم إلى أمريكا الشمالية عن طريق اختيار نيويورك في حقل المنطقة، وسيكون فرع النشر main. بالنسبة لتطبيقك، اختر المنطقة الأقرب إلى موقعك الفعلي:

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

اضغط على التالي للانتقال إلى شاشة تكوين التطبيق الخاص بك.

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

لديك أيضًا الخيار لاستخدام سكريبت بناء مخصص. ولكن في هذه الحالة، يمكنك الالتزام بأمر البناء الافتراضي npm run build. قد ترغب في إنشاء سكريبت بناء مخصص إذا كان لديك سكريبت بناء مختلف لضمان الجودة (QA) أو بيئة الإنتاج:

اضغط التالي للانتقال إلى صفحة الانتهاء والإطلاق.

هنا يمكنك اختيار خطة الأسعار. طبقة البداية Starter مجانية ومناسبة للمواقع الثابتة، لذا اختر هذه:

اضغط على زر تشغيل تطبيق البداية وسيبدأ DigitalOcean في بناء تطبيقك.

سيقوم التطبيق بتشغيل سكريبت npm ci و npm build في مستودعك. سيتم تنزيل جميع التبعيات وإنشاء مجلد build بنسخة مترجمة ومصغرة من جميع ملفات JavaScript و HTML الخاصة بك والموارد الأخرى. يمكنك أيضًا إنشاء سكريبت مخصص في ملف package.json الخاص بك وتحديث الأوامر في علامة المكونات في علامة التطبيق على منصة التطبيقات.

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

اضغط تطبيق مباشر للوصول إلى مشروعك في المتصفح. سيكون نفس المشروع الذي اختبرته محليًا، ولكن سيكون متاحًا على الويب بعنوان URL آمن:

الآن بعد تكوين مشروعك، في كل مرة تقوم فيها بتغيير المستودع المرتبط، ستقوم بتشغيل بناء جديد. في هذه الحالة، إذا قمت بدفع تغيير إلى الفرع الرئيسي، ستقوم DigitalOcean تلقائيًا بتشغيل نشر جديد. ليس هناك حاجة لتسجيل الدخول؛ سيتم تشغيله فور دفع التغيير:

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

الختام

منصة التطبيقات التابعة لـ DigitalOcean توفر لك أداة سريعة لنشر التطبيقات. مع إعدادٍ أولي صغير، سيتم نشر تطبيقك تلقائيًا بعد كل تغيير. يمكن استخدام ذلك بالتزامن مع React للحصول بسرعة على تطبيق الويب الخاص بك وتشغيله.

A possible next step for a project like this would be to change the domain name of the app. To do this, take a look at the official documentation for App Platform.