كيفية نشر تطبيقات الواجهة الأمامية على صفحات Cloudflare؟

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

تسمح لنا العديد من منصات الاستضافة بنشر تطبيقات الواجهة في دقائق. سيكون موقعنا جاهزًا للجمهور في غضون دقائق.

أليس رائعا؟

نعم انها كذلك.

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

تطبيقات الواجهة الأمامية

قبل الغوص في جزء النشر من التطبيق ، نحتاج إلى إنشاء تطبيق واحد للواجهة الأمامية.

كيف افعلها؟

حتى أنت تعرف ذلك. لذلك ، لن نناقشه هنا الآن.

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

هناك React و Vue و Angular و JavaScript وغيرها الكثير. يمكن للمرء إنشاء تطبيقات بناءً على متطلباتهم.

كما نرى ، هناك مجموعة من الخيارات لإنشاء تطبيقات الواجهة الأمامية. ماذا عن النشر؟ هل هي نفس العملية لجميع تطبيقات الواجهة الأمامية؟

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

سيكون هناك أمر لإنشاء معظم تطبيقات الواجهة الأمامية التي تم إنشاؤها باستخدام مكتبات وأطر. قد تعرف بالفعل عن ذلك. إذا كنت لا تعرف ما هو ، فقد تضطر إلى النظر فيه بناءً على مكتبة الواجهة الأمامية أو إطار العمل.

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

يثبت

قبل الإعداد ، يجب أن نكون على دراية بشيء واحد. يجب أن تكون نقطة الدخول index.html لتطبيق الواجهة الأمامية الخاص بنا لنشرها في صفحات Cloudflare. قد تجد ملف index.html (قد يختلف الموقع بناءً على المكتبة وإطار العمل) بعد عملية الإنشاء.

سنقوم بإنشاء تطبيق React و Plain JavaScript بسيط للعرض التوضيحي. يمكنك اختيار أي مكتبة أو إطار عمل آخر تعرفه. لنقم بإعداد تطبيق React أولاً.

قم بتشغيل الأمر التالي لإنشاء تطبيق React.

 npx create-react-app demo

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

الآن ، لنقم بإنشاء تطبيق JavaScript عادي.

وجود index.html إلزامي بالنسبة لنا. لذلك ، دعونا ننشئ الملف بالاسم index.html . الآن ، يمكنك إضافة المزيد من الملفات مثل styles.css و script.js والصور وما إلى ذلك لجعلها تبدو رائعة. لكنها ليست إلزامية ، على الرغم من :).

اكتمل الآن الإعداد البسيط للنشر. ماذا بعد؟ حان وقت النشر. الغوص في ذلك.

تعيين

تسمح لنا صفحات Cloudflare بنشر تطبيق الواجهة الأمامية الخاص بنا من GitHub. لذلك ، هناك جزأين لعملية النشر.

• أولاً ، نحتاج إلى رمز التطبيق الخاص بنا على GitHub.
• ثانيًا ، نشر التطبيق على صفحات Cloudflare.

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

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

1. دفع كود إلى جيثب

هل لديك حساب جيثب؟ نعم ، أعتقد في معظم الحالات. إذا لم يكن لديك واحد ، فقم بإنشاء واحد هنا.

• انتقل إلى GitHub وقم بتسجيل الدخول إلى حسابك.
• قم بإنشاء مستودع باسم مشروعك. هنا ، نقوم بتسميته مثل العرض التوضيحي .

• سيبدو المستودع الذي تم إنشاؤه حديثًا على النحو التالي. يعرض بعض أوامر git لملء المستودع الخاص بك بالشفرة.

دعنا ندفع الكود الخاص بنا إلى المستودع الذي أنشأناه للتو. يمكنك اتباع الخطوات التالية أو القيام بذلك بنفسك إذا كنت معتادًا عليها بالفعل. لنبدأ بفتح مشروعنا في Terminal أو cmd.

• ابدأ الأمر git باستخدام الأمر git init .
• أضف جميع تغييراتك إلى git المحلي باستخدام الأمر git add . .
• قم git commit -m "message" التغييرات باستخدام الأمر git commit -m "message" . استبدل الرسالة برسالة مناسبة للالتزام.
• الآن ، يتعين علينا توصيل مستودعنا البعيد بالمشروع المحلي.
• الأمر لتوصيله هو git remote add origin 'your_repo_path' . استبدل your_repo_path بمستودعك البعيد. سيكون مسار المستودع كما يلي [email protected]:username/repo_name . مسار المستودع الخاص بي للعرض التوضيحي هو [email protected]:hafeezulkareem/demo .
• الخطوة الأخيرة هي دفع الكود إلى مستودعنا البعيد. يمكننا القيام بذلك باستخدام الأمر git push -u origin main .

دعنا نرى لقطات الكود في مستودع GitHub.

لقد انتهينا من دفع الكود الخاص بنا إلى Github. مهمتنا التالية هي نشرها في صفحات Cloudflare . دون مزيد من اللغط ، فلنبدأ في النشر.

2. النشر في صفحات Cloudflare

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

• انتقل إلى موقع صفحات Cloudflare.
• تسجيل الدخول إلى حسابك. سترى لوحة القيادة على النحو التالي.

• إذا قمت بتسجيل الدخول إلى موقع Cloudflare على الويب ، فقد لا ترى لوحة معلومات صفحاتك.
• انتقل إلى لوحة معلومات الصفحات بالنقر فوق الزر Pages على الجانب الأيمن من لوحة معلومات Cloudflare. الرجوع إلى الصورة أدناه.

• انقر على زر إنشاء مشروع من لوحة تحكم الصفحات.

• سوف تنتقل إلى الصفحة التالية.

• انقر فوق حساب Connect GitHub للحصول على مستودع التطبيقات الخاص بنا من GitHub .
• ستتم إعادة توجيهك إلى صفحة تطبيقات GitHub لترخيص صفحات Cloudflare.

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

• أدخل اسم المستودع الخاص بك على النحو التالي.

• سيتم عرض المستودع الخاص بك بمجرد إدخال الاسم. حدد المستودع. يمكنك رؤية المستودع المحدد في أعلى القائمة على النحو التالي.

• انقر فوق الزر " تثبيت وتخويل" . ستتم إعادة توجيهك إلى صفحة نشر Cloudflare Pages.
• سترى جميع المستودعات المصرح بها على الصفحة.

• حدد المستودع الذي تريد نشره.

• بعد تحديد المستودع للنشر ، انقر فوق زر بدء الإعداد .

• سينقلك إلى الخطوات التالية في عملية النشر ، أي إعداد الإنشاءات وعمليات النشر .

• عندما تقوم بالتمرير لأسفل ، ستجد قسمًا يسمى إعدادات البناء . يتعين علينا تحديد عملية البناء المناسبة لتطبيق الواجهة لدينا.
• يتعين علينا تحديد عملية الإنشاء بناءً على إطار العمل أو المكتبة التي نستخدمها.
• انقر فوق الإعداد المسبق لـ Framework لمشاهدة جميع الخيارات.

• هنا ، نقوم بنشر تطبيقات React و Plain JavaScript .
• إذا كنت تنشر تطبيق React ، فحدد إنشاء تطبيق React من القائمة المنسدلة.
• بالنسبة إلى تطبيق Plain JavaScript بدون أي حزم ، حدد لا شيء .

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

• ستستغرق العملية بضع دقائق لنشر موقعنا. انتظر واستمتع.
• بعد الانتهاء من عملية النشر ، يظهر لك عنوان URL الخاص بالموقع برسالة نجاح.

• قم بزيارة الموقع باستخدام عنوان URL المحدد.

• يمكننا تحديث إعدادات الموقع من صفحة المشروع.

• ستنشر صفحات Cloudflare التحديثات تلقائيًا كلما دفعنا رمزًا جديدًا إلى المستودع.

هذا هو. لقد انتهينا من نشر تطبيق الواجهة الأمامية لدينا على صفحات Cloudflare.

استنتاج

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

بعد ذلك ، ماذا عن نشر الواجهة الأمامية لـ Netlify؟

ملاحظة: قد لا تكون المواقع التجريبية المعروضة في المقالة متاحة للجمهور بعد مرور بعض الوقت.

انتشار سعيد