كيفية نشر تطبيق React على Netlify

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

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

تقدم Netlify خطة مجانية. لذلك أولاً ، سنقوم بتسجيل الدخول إلى Netlify باستخدام أي من الخيارات (Github و Gitlab و Bitbucket والبريد الإلكتروني) الواردة في صفحة تسجيل الدخول.

سنبدأ بإنشاء بناء لتطبيقنا عن طريق تشغيل هذا الأمر:

npm run build

لذلك ، سيتم الآن إنشاء مجلد الإنشاء الخاص بنا والذي سيحتوي على جميع الملفات الجاهزة للإنتاج.

الآن ، هناك طريقتان لنشر تطبيقنا على Netlify.

السحب والإفلات

جعلت Netifly أنه من السهل جدا أن علينا أن عادل السحب والإسقاط لدينا مجلد بناء في مجتمعاتهم التطبيق على الانترنت (صورة أقصى اليمين أعلاه)، وسوف تحصل على نشر تطبيقنا لURL الحية.

ملاحظة: تطبيق Netlify عبر الإنترنت هو الشاشة التي تظهر بعد تسجيل الدخول إلى حساب netlify الخاص بك.

Netlify CLI

يوفر Netifly أيضًا واجهة سطر أوامر تتيح لك نشر تطبيقك مباشرة من سطر الأوامر. هذا ما سنفعله الآن.

لذلك أولاً ، سنقوم بتثبيت CLI باستخدام الأمر التالي:

npm install netlify-cli -g

الآن ، نحن جاهزون لنشره. لنشر التطبيق ، يتعين علينا التأكد من أننا في مجلد المشروع ثم سنقوم بتشغيل هذا الأمر:

netlify deploy

قد نحصل على نافذة منبثقة تطلب منا تسجيل الدخول باستخدام Netlify ومنح الوصول إلى Netlify CLI .

الآن ، سنضغط على تخويل. الآن بعد أن تم تفويضنا ، يمكننا اتباع موجهات سطر الأوامر لنشر التطبيق.

موجهات سطر الأوامر

  1. في وحدة التحكم ، تقول أن " هذا المجلد ليس مرتبطًا بأي موقع بعد. ماذا تريد ان تفعل؟" إنه يريد معرفة ما إذا كنا نريد ربط هذا الدليل بموقع موجود أو إنشاء موقع جديد وتكوينه. نظرًا لأن هذا موقع جديد ، فسنحدد إنشاء وتهيئة موقع جديد.

2. يمنحنا خيار إعطاء اسم لموقعنا. انا اكتب محفظة على netlify (يمكنك كتابة أي اسم المتاحة التي تريد).

3. سيطلب الآن حساب Netlify الذي تريد استخدامه ، لذلك سأختار حسابي (Abhishek Jakhar) ، يمكنك تحديد حسابك.

4. الآن ، كمسار نشر ، نحتاج إلى تحديد دليل بناء مشروعنا الذي يحتوي على الأصول للنشر. لذلك ، سنكتب build هناك ونضغط على Enter.

5. الآن ، سيتم إنشاء موقعنا وسيتم نشره في مسودة عنوان URL أولاً ، والذي يمكننا عرضه عن طريق نسخ عنوان URL ولصقه في المتصفح.

الآن ، مرة أخرى في وحدة التحكم ، تقول "إذا كان كل شيء يبدو جيدًا في مسودة عنوان URL ، فاستخدمه لتعيش مع علامة --prod" .

لذلك لجعل تطبيقنا مباشرًا ، سنقوم بتشغيل الأمر الموضح في سطر الأوامر

netlify deploy --prod

سيطلب منا مرة أخرى تحديد مسار النشر للبناء المباشر الذي يعد مجلد الإنشاء مرة أخرى.

الآن ، في إخراج وحدة التحكم ، نحصل على عنوانين URL. A فريد نشر URL، والذي يمثل URL فريد لكل نشر الفردي، و URL لايف الذي يعرض دائما نشر أحدث الخاص بك.

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

ملاحظة: Netlify يؤمن تلقائيا موقعك على HTTPS لل مجانا .

الصفحة غير موجودة خطأ

إذا كنت تنشر تطبيقًا يستخدم جهاز توجيه مثل React Router ، فستحتاج إلى تكوين عمليات إعادة التوجيه وإعادة كتابة القواعد لعناوين URL الخاصة بك. لأنه عندما ننقر فوق أي عنصر تنقل لتغيير الصفحة (المسار) وتحديث المتصفح ، نحصل على صفحة خطأ 404.

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

/* /index.html 200

ستعمل قاعدة إعادة الكتابة هذه على عرض ملف index.html بدلاً من إعطاء 404 ، بغض النظر عن عنوان URL الذي يطلبه المتصفح.

الآن ، لعرض أحدث التغييرات في عنوان URL المباشر ، نحتاج إلى النشر باستخدام netlify deploy. مرة أخرى ، سنحدد build كمسار نشر. الآن ، عندما نرى عنوان URL المباشر ونقوم بتحديث التطبيق بعد تغيير المسار ، لن نرى بعد الآن صفحة الخطأ 404.

هذا كل ما في الامر. على netlify.com يمكنك رؤية إعدادات موقعك. هناك يمكنك القيام بأشياء مثل إعداد مجال مخصص أو توصيل الموقع بمستودع GitHub.

Netlify: منصة الكل في واحد لأتمتة مشاريع الويب الحديثة

انشر مواقع الويب الثابتة الحديثة باستخدام Netlify. احصل على CDN ، النشر المستمر ، HTTPS بنقرة واحدة ، وجميع الخدمات التي ... www.netlify.com

آمل أن تكون قد وجدت هذا المنشور مفيدًا ومفيدًا. أنا أحب أن أسمع رأيك!

شكرا لقرائتك!