كيفية أتمتة النشر على صفحات GitHub باستخدام Travis CI

إخلاء المسؤولية: هذه القصة ليست برعاية أي من الأدوات التي تم وصفها في المقالة (Travis-CI ، Github ، Github-Pages)

لقد أنشأت مشروعًا في React.js ونشرته على صفحات GitHub (ليس بعد ؟؟ - أنشئ مشروعك الأول في React.js) ولكن ماذا لو كنت تُجري تغييرات متكررة في قاعدة الشفرة وتريد أيضًا الاحتفاظ بـ نشر نسخة محدثة إلى الأحدث؟ ... ستجد نفسك في عملية شاقة تتمثل في تشغيل البرامج النصية للنشر مرارًا وتكرارًا !!!

ماذا لو يمكن أتمتة عملية النشر ؟؟

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

ماذا ستتعلم>

في هذه المقالة ، ستتمكن من معرفة كيفية تنفيذ النظام الذي سيؤدي إلى تشغيل البرامج النصية للتفاعل باستخدام TRAVIS-CI لنشر المشروع على صفحات GitHub كلما وجدت أي تغييرات في الفرع الرئيسي لمستودع الكود .

  • الإعداد الآلي نشر " رد فعل-محفظة ' مشروع
  • تعرف على بعض الأخطاء المتكررة التي تمت مواجهتها أثناء العملية
  • تعرف على بعض المفاهيم المتعلقة بـ " النشر المستمر"

دعنا نتعلم بعض الأساسيات

تخطي هذا القسم إذا كنت تعلم أنك لست من هذا النوع !!

التكامل المستمر (CI) والتسليم المستمر (CD)>

"في هندسة البرمجيات ، التكامل المستمر (CI) هو ممارسة دمج نسخ عمل المطورين كافة إلى خط رئيسي مشترك عدة مرات في اليوم" - ويكيبيديا

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

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

ترافيس سي آي>

Travis CI هي خدمة تكامل مستمرة مستضافة تُستخدم لبناء واختبار مشاريع البرامج المستضافة في GitHub. يمكن اختبار المشاريع مفتوحة المصدر دون أي رسوم !!

يمكن تكوين Travis CI عن طريق إضافة .travis.ymlملف إلى المستودع. عندما يتم تنشيط Travis CI لمستودع معين ، ستقوم GitHub بإخطار كلما تم دفع التزامات جديدة إلى المستودع أو يتم تقديم أي طلب سحب ، ثم وفقًا للقواعد المحددة في .travis.ymlالملف ، سيقوم Travis CI بتنفيذ الخطوات التي يمكن أن تكون أي شيء - من إجراء الاختبارات وبناء التطبيق أو نصوص النشر. يقدم Travis CI مجموعة واسعة من الخيارات لبناء البرنامج وبالطبع ، أحببنا ❤️ javascriptهو واحد منهم.

ملاحظة : يحتوي Github على حزمة مطور طلاب متوفرة مع مجموعة من الميزات المتميزة من منصات مختلفة (يعد Travis CI أحدها) مجانًا للطلاب الذين يرغبون في تعلم أشياء جديدة - احصل على حزمة الطلاب الآن !!

DevOps>

DevOps عبارة عن مجموعة من ممارسات تطوير البرامج التي تجمع بين تطوير البرامج ( Dev ) وعمليات تكنولوجيا المعلومات ( Ops ) لتقصير دورة حياة تطوير الأنظمة أثناء تقديم الميزات والإصلاحات والتحديثات بشكل متكرر. تأسس مفهوم DevOps على بناء ثقافة التعاون بين الفرق.

"DevOps أكثر من مجرد ممارسة - إنه يتعلق بالثقافة"

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

كفى كلام !!! لنقم ببعض الإجراءات

نظرًا لأنك قمت بالفعل بالنشر على صفحات GitHub باستخدام gh-pagesوحدة العقدة ، فسيكون هناك فرع يسمى gh-pagesفي المستودع يحتوي على الملفات التي يتم نشرها على خوادم صفحات Github. بعد دمج Travis CI ، سنكون قادرين على تنفيذ النظام حيث تؤدي أي تغييرات يقوم بها المستخدم على masterالفرع تلقائيًا إلى إنشاء. إذا كان البناء ناجحًا ، فسيتم تشغيل البرامج النصية للبناء والتي ستعمل على تحديث gh-pagesالفرع. سيتم إخطار المستخدم بحالة البناء عبر إشعارات البريد الإلكتروني من Travis CI

قم بإنشاء حساب على Travis-CI>

  • انتقل إلى Travis-ci.com واشترك في GitHub .
  • اقبل شروط وأحكام Travis CI. ستتم إعادة توجيهك إلى GitHub.
  • انقر فوق الزر تنشيط ، وحدد المستودعات التي تريد استخدامها مع Travis CI.
  • إضافة رمز التفويض (سيتم ذلك تلقائيًا عند تسجيل الدخول باستخدام GitHub)

أضف ملف travis.yml إلى المستودع>

يحتوي هذا الملف على التعليمات التي تخبر Travis-CI - ماذا؟ .. كيف؟ .. متى؟

ملاحظة : عند تشغيل مهمة في Travis-CI ، فإنها ستقوم بتشغيل جهاز افتراضي ببيئة النشر المناسبة التي تم تكوينها في .travis.yml

لنفصل الكود -

language: node_js node_js: - "stable" cache: directories: - node_modules script: - npm run build deploy: provider: pages skip_cleanup: true github_token: $github_token local_dir: build on: branch: master

on : سوف يقوم Travis-CI تلقائيًا بتشغيل وظيفة عندما يتم إجراء بعض التغييرات على الفرع المحدد في هذا الحقل.

deploy : في هذا الحقل أعلنا أننا سنستخدم موفر النشر لصفحات GitHub التي يوفرها Travis-CI والتي ليست سوى تعليمات التكوين لإعداد البيئة للنشر.

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

cache: يوفر Travis-CI خيارًا للتخزين المؤقت لملفات المكتبة والوحدات النمطية التي ستكون ثابتة لجميع البنيات. يمكن استخدام الملفات المخزنة مؤقتًا مرة أخرى بواسطة مهام الإنشاء اللاحقة مما يقلل من وقت تشغيل المهمة من طرف إلى طرف.

كل مجموعة>

Ohkay كل شيء في مكانه ، الآن فصاعدًا إذا قمت بارتكاب أي شيء في الفرع الرئيسي ، فسيؤدي ذلك إلى إنشاء وظيفة بناء Travis-CI والتي ستبدو كما في لقطات الشاشة أدناه. يمكنك أيضًا تشغيل تصميم يدويًا من لوحة معلومات Travis-CI نفسها.

لكن …. (هناك دائما لكن !! هاه !!)

أنا متأكد من أن لوحة معلومات البناء الخاصة بك لن تبدو كما هي أعلاه لأن الحياة لم تكن سلسة قيل لنا أنها ستكون؟. يمكن أن تكون هناك أسباب غير محدودة بسبب امتلاء لوحة معلومات Travis-CI بالبنيات الفاشلة (أعلم .. لقد مررت بهذا)

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

  • أخطاء أمنية
  • أخطاء الرمز
  • مجرد أخطاء عشوائية (عليك أن تتسخ وتجد الحل !!)

أخطاء الرمز>

If your builds are failing due permissions error then there are high chances that there is some problem with tokens. You need to go to the token URL //github.com/settings/tokens and see when it was used lately, if it shows never then you have found your culprit.

Follow the below steps,

  • Delete and create a new token
  • Add it to the Travis environment variables ( Go to job settings )
  • Re-try the build

Security errors >

There are plenty of security practices we ignore while coding & building web applications. When we run in local these security errors are not given much emphasis and often discarded as warning messages, but when we are trying to deploy the service using the Travis-CI these warnings will cause the build failure.

I will mention the errors I encountered while working on my project(I would encourage you to mention the errors you have encountered) The great thing is that most of them have their own dedicated web-pages which explain the underlying problem and offers the solutions/workarounds ( Workarounds — we all love it even knowing that we shouldn’t !! )

  • Using target=_blank in HTML tag : This is more serious security flaw than it looks. You can learn more about it here.
  • Redundancy in HTML code: There were many redundant tags/class names which were making the code look like junk.

Best way to prevent these errors is to install the es-lint plug-in in whichever text-editor you are using.

Built some project? — Share it

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

  • قناة Gitter: //gitter.im/weekend-devs/community
  • منظمة جيثب: //github.com/weekend-developers

تغليف

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

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