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

React هي مكتبة JavaScript شائعة لبناء واجهات مستخدم وظيفية في تطبيقات الويب الديناميكية. ربما تكون قد أمضيت ساعات طويلة في تصحيح أخطاء كود React في محاولة لإنشاء Instagram أو Airbnb التاليين.

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

تابع معنا لمعرفة كيفية نشر تطبيقات React باستخدام أدوات النشر سهلة الاستخدام من Netlify.

ما هو Netlify؟

Netlify عبارة عن نظام أساسي للتطوير قائم على السحابة مع ميزات تجعل استضافة التطبيقات ونشرها على الويب أسهل كثيرًا. ببساطة ، إنه يوفر مجموعة من الأدوات والخدمات التي تبسط وتبسط العملية مما يسمح لك بنشر واستضافة تطبيق ويب في غضون ثوانٍ.

الميزات الرئيسية لـ Netlify

Netlify لديها مجموعة من الميزات التي تبسط عملية النشر.

• يوفر ميزات الوصول الأساسية والتحكم في الإصدار لتمكين فرق التطوير من التعاون بكفاءة وفعالية في المشاريع.
instagram viewer
• يقدم خدمات استضافة آمنة يمكنك تعديلها لتناسب احتياجاتك. بالإضافة إلى ذلك ، فإنه يوفر نسخًا احتياطية آلية في حالة فقد البيانات.
• يتكامل بسلاسة مع خدمات تطوير السحابة الشهيرة مثل GitHub و GitLab و Bitbucket.
• يوفر ميزات تسهل إعداد وتكوين عنوان URL لمجال مخصص وشهادة SSL لتطبيقك.

قم بإنشاء تطبيق تجريبي

1. للبدء ، ستحتاج أولاً إنشاء تطبيق تجريبي React والتي ستنشرها في النهاية على Netlify. قم بتشغيل الأمر أدناه على جهازك لإنشاء تطبيق React:

   npx إنشاء-تفاعل-تطبيق تجريبي-رد فعل-تطبيق netlify

2. بعد ذلك ، قم بتشغيل هذا الأمر الطرفي لتدوير خادم التطوير:

   بدء npm

   انطلق واعرض النتائج في متصفحك على http://localhost: 3000.
3. أخيرًا ، قم بتشغيل هذا الأمر لإنشاء إصدار جاهز للإنتاج من تطبيقك:

   npm تشغيل البناء

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

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

يوفر Netlify ثلاث طرق يمكنك استخدامها لنشر تطبيق React الخاص بك. أنت تستطيع:

• قم باستيراد مشروعك من مضيف مستودع Git مثل GitHub.
• استخدم ميزة السحب والإفلات.
• استخدم أداة سطر الأوامر ، CLI الخاص بـ Netlify.

انشر باستخدام ميزة استيراد GitHub

1. ابدأ ب إنشاء مستودع على جيثب لإيواء ملفات مشروع تطبيق React. بدلاً من ذلك ، يمكنك أيضًا استضافة ملفات مشروعك على أي موفر Git مدعوم آخر مثل GitLab أو Bitbucket أو Azure DevOps.
2. بعد ذلك ، قم بالتسجيل للحصول على حساب على نيتليفاي. بمجرد التسجيل ، انتقل إلى لوحة معلومات حسابك وحدد ملف المواقع فاتورة غير مدفوعة.
3. اضغط على الاستيراد من Git زر.
4. حدد النظام الأساسي لموفر Git المفضل لديك. سيطالبك Netlify بالمصادقة مع موفر Git الخاص بك لمنحه حق الوصول إلى حسابك ومستودعاتك.
5. بمجرد القيام بذلك ، سيعرض Netlify قائمة بالمستودعات على موفر Git الخاص بك. حدد مستودع مشروع React الذي دفعته في البداية إلى موفر Git الخاص بك.
6. بعد تحديد المستودع ، تحتاج إلى تحديد كيفية تعامل Netlify مع عملية النشر. عادةً ، بالنسبة إلى مواقع الويب الثابتة ، لا يتعين عليك إجراء أي تغييرات ، ومع ذلك ، بالنسبة لمواقع الويب الديناميكية مثل تطبيقات React ، فسيتعين عليك تعيين إعدادات الإنشاء. لحسن الحظ ، يقوم Netlify بشكل افتراضي بالكشف التلقائي عن الإطار المستخدم لبناء التطبيق ويملأ الحقول بإعدادات البناء المطلوبة.
7. أخيرًا ، انقر فوق نشر الموقع لإنهاء العملية.

انقر فوق عنوان URL المقدم لعرض التطبيق على متصفحك. إذا كان لديك عنوان URL خاص بنطاق ، فيمكنك توجيه Netlify لاستخدامه مع موقعك عن طريق تحديث عنوان URL من إعدادات الموقع.

انشر باستخدام ميزة السحب والإفلات

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

1. في لوحة تحكم Netlify ، حدد ملف موقع فاتورة غير مدفوعة. بعد ذلك ، انقر فوق إضافة موقع جديد ثم حدد انشر يدويًا من خيارات القائمة المنسدلة.
2. في صفحة ميزة السحب والإفلات ، حدد المجلد الذي يحتوي على ملفات بناء React وقم بإفلاته في واجهة المستخدم هذه. سيتم نشر المشروع على الفور على Netlify. بدلاً من ذلك ، يمكنك النقر فوق تصفح للتحميل لتحديد مجلد البناء الخاص بك من نظام الملفات.

انشر باستخدام واجهة سطر أوامر Netlify

باستخدام واجهة سطر أوامر Netlify (CLI) ، يمكنك نشر تطبيق React الخاص بك مباشرة من محطة طرفية. بالإضافة إلى ذلك ، يسمح CLI من Netlify لك بتهيئة النشر المستمر بحيث يتم نشرها تلقائيًا عند الالتزام بدفع التحديثات الجديدة إلى مستودع Git الخاص بك.

1. قم بتشغيل الأمر أدناه على الجهاز الخاص بك لتثبيت CLI الخاص بـ Netlify:

   npm ثَبَّتَ netlify- cli -g

2. الآن ، قم بتشغيل الأمر أدناه لنشر التطبيق الخاص بك. تأكد من أنك في دليل عمل المشروع قبل النشر.

   نشر netlify

   سيطالبك CLI من Netlify بالسماح له بإجراء تغييرات على حسابك. بعد منح الإذن ، قدم اسم حساب الفريق الذي قدمته عند التسجيل ، ثم اختر ما إذا كنت تريد ربط دليل التطبيق بموقع ويب حالي أو إنشاء وتهيئة واحد. قم بالإنهاء من خلال توفير اسم موقع ويب مخصص واسم مجلد الإنشاء الخاص بك.
3. سينشر CLI نسخة أولية من تطبيقك. تأكد من أن كل شيء يعمل كما هو متوقع.
4. أخيرًا ، قم بتشغيل الأمر أدناه لنشر تطبيقك في الإنتاج.

   نشر netlify --همز

مقارنة طرق الانتشار الثلاثة

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

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

طريقة CLI هي الأكثر شمولاً ، حيث تمنحك التحكم الكامل في عملية النشر وتسمح بالتكوينات المخصصة. هذه الطريقة هي الأنسب إذا كان لديك بالفعل فهم قوي لـ Netlify وكنت مرتاحًا للعمل مع سطر الأوامر.

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

استخدام Netlify لنشر التطبيقات الأخرى

Netlify هي أداة قوية ومتعددة الاستخدامات يمكنك استخدامها لنشر التطبيقات الأخرى التي تتفاعل فقط. يمكنك استخدامه لنشر واستضافة مواقع الويب الثابتة والتطبيقات الديناميكية التي تم إنشاؤها باستخدام أطر عمل مختلفة مثل Angular.

تجعل الواجهة سهلة الاستخدام من السهل تكوين وإدارة ونشر واجهات برمجة التطبيقات الخاصة بك.