8 خدمات استضافة تطبيقات React مجانية1 min read

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

لقد بنينا تطبيقنا في Figma باستخدام ‏Anima البرنامج الإضافي، والذي سمح لنا بإضافة وظائف وسلوك سريع الاستجابة ووسائط غنية تصدير رمز React الجاهز للتطوير لواجهة المستخدم بأكملها. لقد استغرقنا يومًا للتصميم والنشر.

مكان استضافة تطبيق React الخاص بك مجانًا

هناك عدد متزايد من حلول الاستضافة بدون خادم بفضل ظهور الأطر القائمة على المكونات مثل React. تعد Amazon AWS وMicrosoft Azure وGoogle Cloud هي المنصات المهيمنة حاليًا. ومع ذلك، هناك تحول متزايد نحو خدمات استضافة الواجهة الأمامية المخصصة التي تتطلب جهدًا أقل، ويمكن أن تساعدك على العمل في وقت قصير – ومعظمها يتضمن CI/CD. فيما يلي 8 خدمات استضافة تطبيقات React مجانية اختبرناها:

1. نيتليفي

2. ‏Vercel

3. تضخيم AWS

4. ‏Firebase

5. صفحات GitHub

6. صفحات جيتلاب

7. تقديم

8. اندفاع

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

نيتليفي

الخلفية

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

كيفية الاستخدام

1. من الناحية المثالية، عليك التسجيل أو تسجيل الدخول باستخدام GitHub. وهذا يضمن إمكانية الوصول إلى المستودعات الموجودة في ملف التعريف الخاص بك ونشرها بسرعة.
2. بمجرد تسجيل الدخول، انقر فوق “إضافة موقع جديد” واختر “استيراد مشروع موجود”.
3. ثم انقر فوق GitHub كمزود لك.
4. اختر “موقع البنك” أو أيًا كان اسم مشروعك.
5. اضبط إعدادات النشر (في حالة موقعنا الإلكتروني، تعمل الإعدادات الافتراضية بشكل مثالي)، ثم انقر فوق “نشر الموقع”.
6. بمجرد نشره، يمكنك مشاهدته على URL العام والذي يمكنك مشاركته مع العالم. ياي!

هنا تم نشر التطبيق المباشر على Netlify.

إيجابيات وسلبيات

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

‏Vercel

الخلفية

تأسست Vercel (المعروفة أصلاً باسم Zeit) في عام 2015 وسرعان ما اشتهرت. إنهم المشرفون على Next.js، وهو إطار عمل React شائع لبناء مواقع الويب. إنهم يقدمون طبقة مجانية لمواقع الويب غير التجارية، بالإضافة إلى طرق لاستخدام شبكة Edge الخاصة بهم للوظائف بدون خادم.

كيفية الاستخدام

1. قم بتسجيل الدخول أو التسجيل في GitHub.
2. انقر على القائمة المنسدلة “إضافة جديد…” وحدد “مشروع”.                                                             
3. اختر “موقع البنك” أو مشروع React المفضل لديك.
4. لقد اتبعنا الإعدادات الافتراضية لإعدادات النشر ثم نقرنا على “نشر”.
5. وبعد مرور بعض الوقت، قمنا بنشر الموقع.

هنا ‏URL المباشر.

إيجابيات وسلبيات

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

تضخيم AWS

الخلفية

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

كيفية الاستخدام

1. قم بالتسجيل أو تسجيل الدخول إلى AWS، ثم ابحث عن AWS Amplify وانقر على “البدء”.
2. اختر GitHub وقم بتخويله (لقد سمحت به فقط لمستودع “موقع البنك الإلكتروني”).
3. حدد الريبو في قسم “المستودعات المحدثة مؤخرًا”.
   1. في إعداد البناء، سيتعين علينا تغيير دليل قاعدة ليكون التطبيق لدينا حي هكذا: بعد ذلك، يجب أن تبدو إعدادات البناء كما يلي:
4. في الخطوة التالية، انقر فوق “حفظ ونشر”.
5. وبعد مرور بعض الوقت، سيتم نشر الموقع الإلكتروني وسيكون جاهزًا للاستخدام.

ونحن على قيد الحياة! هنا ‏URL.

إيجابيات وسلبيات

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

‏Firebase

الخلفية

‏Firebase هي إحدى خدمات Google المعروفة بمنصة التخزين في الوقت الفعلي. ولكنه يحتوي أيضًا على خيار استضافة لمواقع الويب الثابتة وخدمات Express.js الصغيرة أو APIs، ويدعم معاينة URLs للفروع التي يعمل عليها فريقك. كما هو الحال مع Netlify وVercel وغيرها، فهو يخدم المحتوى المنشور عبر شبكة CDN.

كيفية الاستخدام

1. تثبيت أدوات Firebase مع تثبيت npm -g أدوات Firebase.
2. قم بتسجيل الدخول إلى Firebase باستخدام تسجيل الدخول إلى Firebase. بمجرد تسجيل الدخول، يجب أن تشاهد رسالة مثل هذه:
3. انتقل إلى دليل المشروع وقم بتشغيله الحرف الأول من Firebase، يجب أن ترى شيئًا مثل هذا: اختر خيار تكوين الملفات لاستضافة Firebase مع عمليات نشر GitHub Action الاختيارية. بعد ذلك، يمكنك إنشاء مشروع مباشرة من واجهة سطر الأوامر (CLI) أو استخدام Firebase UI للقيام بذلك ثم توصيله لاحقًا. أنشأنا المشروع من سطر الأوامر، وهكذا أجبنا على الأسئلة الناتجة:                                                      بعد ذلك، سيتم إنشاء ملفات `firebase.json` و`.firebaserc` البسيطة.
4. ثم اركض نشر قاعدة النار لنشر الملفات فعليًا من ملف حيدليل. إذا كان الدليل مفقودًا، فتأكد من تشغيله بناء تشغيل npm أول من أنشأ الملفات . ال نشر قاعدة النار يجب أن يقوم الأمر بإنشاء مخرجات مشابهة للمثال أدناه:

الآن يمكنك عرض الموقع على URL المقدمة. ياي! 

إيجابيات وسلبيات

يعد Firebase بسيطًا إلى حد ما، ولكن عندما تقوم بإعداده داخل مشروعك، فإن الأسئلة التي تحتاج إلى إجابة تكون مربكة بعض الشيء. لحسن الحظ، قمنا بالرد عليك في القسم أعلاه، لكنها تتطلب فهم ميزات Firebase الفعلية قبل المتابعة. بخلاف ذلك، يتميز Firebase بسرعة النشر ويمكنه إنشاء URL حيث يمكنك معاينة الملفات المنشورة. يمكنك أيضًا تشغيله تلقائيًا بسهولة من خلال عمليات نشر GitHub Action باستخدام واجهة سطر الأوامر (CLI)، وهو أمر أنيق.

صفحات GitHub

الخلفية

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

كيفية الاستخدام

يرجى ملاحظة أنه يجب عليك تحرير ‏App.jsx حيث ندعو جهاز التوجيه وإضافة الاسم الأساسي إليها لتتناسب مع اسم الريبو. إذن هذه هي الطريقة ‏App.jsx يجب أن ننظر:                                                                                        علينا أن نغير الاسم الأساسي لأن صفحات GitHub ستنشر موقع الويب على URL بهذا النموذج `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. لن يعمل موقع الويب بشكل صحيح دون تعيين الاسم الأساسي لـ رد فعل جهاز التوجيه دوم.

1. بعد تغيير الكود، نحتاج إلى التثبيت صفحات gh الحزمة مع:
2. و أضف أ النشر المسبق و أ نشر البرنامج النصي ل ‏package.json:
3. ثم نركض بكل بساطة نشر تشغيل npm. سوف يؤدي بناء تشغيل npm وسوف تستخدم صفحات gh لنشر محتويات حي إلى فرع منفصل على GitHub يسمى صفحات gh.
4. وأخيرا، تحقق مما إذا كان صفحات gh يستخدم لصفحات GitHub كما هو موضح أدناه:

هنا ‏URL المباشر.

إيجابيات وسلبيات

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

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

صفحات جيتلاب

الخلفية

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

كيفية الاستخدام

1. قم بالتسجيل أو تسجيل الدخول إلى GitLab
2. أضف الريبو إلى GitLab إذا لم يكن لديك هناك بالفعل. يمكنك ذلك شوكة الذي أضفته هناك 
   على غرار صفحات GitHub، يتعين عليك تحرير ملف ‏App.jsx حيث ندعو جهاز التوجيه وإضافة  الاسم الأساسي إليها لتتناسب مع اسم الريبو. إذن هذا هو التغيير النهائي:                                                               علينا أن نغير الاسم الأساسي لأن صفحات GitLab ستقوم بنشر موقع الويب على URL من هذا النموذج: ‏https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. لن يعمل موقع الويب بشكل صحيح دون تعيين الاسم الأساسي لـ رد فعل جهاز التوجيه دوم.
3. بمجرد قيامك بتحرير المشروع ودفعه إلى GitLab، انتقل إلى الإعدادات > الصفحات وسيتم الترحيب بك بمعالج من أربع خطوات لنشر الريبو إلى صفحات GitLab. 
4. الخطوة الأولى في المعالج هي إدخال صورة البناء. سوف نستخدم Node.js LTS.
5. بعد ذلك، سوف ندخل أمر ما قبل البناء. ال ‏npm سي سوف يكون كافيا هنا.
6. الآن لخطوة البناء. نحن بحاجة إلى المرور — –dist-dir public لأن صفحات GitLab تتوقع إنشاء موقع الويب في عام دليل. لا يمكنك الهروب من أي دليل آخر، آسف.
7. ارتكاب المولد حديثا .gitlab-ci.yml الملف الذي يخبر GitLab بكيفية نشر موقع الويب الخاص بك.
8. الآن، انتقل إلى CI/CD -> قسم خطوط الأنابيب في الريبو ولاحظ أداء خط الأنابيب المضاف حديثًا.
9. بعد مرور بعض الوقت، ستنتهي مهمة المسار وسيتم نشر موقع الويب على صفحات GitLab.

هنا النتيجة.

إيجابيات وسلبيات

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

تقديم

الخلفية

‏Render هو طفل جديد في المجموعة التي سيتم إطلاقها في عام 2019. وهو يحاول تعطيل الطريقة التي ينشر بها الأشخاص خدماتهم (بما في ذلك مواقع الويب الثابتة). وحتى الآن، فإنهم في حالة جيدة وأعدادهم تتزايد.

كيفية الاستخدام

1. قم بالتسجيل أو تسجيل الدخول إلى Render.
2. قم بإنشاء موقع ويب ثابت جديد بالضغط على الزر “جديد” واختيار “الموقع الثابت”.
3. اختر الريبو الذي تريد نشره.
4. احتفظ بال غزل؛ بناء الغزل بناء الأمر في إعداد البناء. لسوء الحظ، فإنه لا يعمل مع نبم سي؛ بناء تشغيل npm كما تفعل الخدمات الأخرى. قم بتغيير “دليل النشر” إلى حي وانقر على “إنشاء موقع ثابت”.
5. بعد مرور بعض الوقت، سيقوم Render بنشر الكود.

هنا ‏URL المباشر من Render.

إيجابيات وسلبيات

إنه سريع حقًا، لكنه لا يعمل بشكل جيد مع مشروعنا باستخدام الأمرين `npm ci` و`npm run build`. يبدو أن “الغزل” فقط هو الذي يعمل.

اندفاع

الخلفية

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

كيفية الاستخدام

1. للتحضير، تشغيل بناء تشغيل npm لإنشاء ملفات ثابتة في الداخل حي دليل. ال زيادة سوف تستخدم تلك للنشر.
2. تشغيل تثبيت npm – الطفرة العالمية
3. ثم اركض زيادة.

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

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

ثم أدخل URL المستقبلي لموقع الويب الخاص بك. جرب شيئًا فريدًا لأن ماذا زيادة عرضت لم تنجح بالنسبة لي.

بعد إدخال URL، سيتم تشغيل ملف زيادة سيتم نشر محتويات من حي إلى URL المحدد. وهنا ما حصلت عليه:

إيجابيات وسلبيات

إنه سريع وبسيط ولا يتطلب منك اعتماد واجهة منفصلة، ​​لكنه يفشل في اقتراح URL متاح لتطبيقك.

حان الوقت للنشر لكل خدمة استضافة

أفضل 3 خدمات استضافة React مجانية لدينا

1. نيتليفي
2. ‏Vercel
3. اندفاع

الوجبات السريعة الرئيسية

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

قم بأتمتة إنشاء الواجهة الأمامية وشحن تطبيقك بشكل أسرع 10 مرات. يتعلم أكثر.