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

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

مع الحصول على React أكثر شيوعًا ، يوجد عدد قليل من المشروعات التي تهدف إلى مساعدة المطورين على إنشاء بيئة تطوير React مناسبة. create-react-app هو واحد من قوالب البدء الأكثر شعبية.

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

لم يعد المطورون يشعرون بالقلق بشأن كيفية إعداد حزمة الويب ، أو ما يجب تكوينه مع بابل لاستخدام es6 ، أو أي حزمة linter واختبار للاستخدام. كل شيء سوف تعمل فقط من خارج منطقة الجزاء. نعم ، إنه سهل للغاية!

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

كومة التنمية للرد

لقد كتبت الدليل التالي لمساعدة المطورين على إنشاء مكدس تكامل مستمر ونشر مستمر لتطبيق React الخاص بهم. سوف نستخدم CircleCI و CodeClimate و Heroku. إذا لم يكن لديك حساب في أي من الخدمات المذكورة أعلاه ، فاستعد للتسجيل - إنها مجانية!

في النهاية ، سيكون لدينا تطبيق React في Github Repo والذي سينشر تلقائيًا أي تغييرات على الفرع الرئيسي إلى Heroku بعد مرور جميع الاختبارات. فيما يلي عينة من موقع React المنشور.

لنبدأ!

الخطوة الأولى هي اتباع دليل create-react-app لإنشاء تطبيق React جديد. افعل هذا:

$ npm install -g create-react-app
$ create-react-app my-react-app
$ cd my-react-app /
$ npm البداية

ثم يجب على المتصفح فتح صفحة تلقائيًا على http: // localhost: 3000 /. إذا رأيت صفحة مرحبًا بك في رد الفعل قيد التشغيل ، فسيكون كل شيء جيدًا.

إعداد CircleCI

بعد ذلك ، نحتاج إلى إضافة القليل من الإعداد لإعداد CircleCI لمشروعنا. قم بإنشاء مجلد .circleci و config.yml في هذا الدليل وإضافة ما يلي:

الإصدار 2
وظائف:
  بناء:
    عامل ميناء:
      - الصورة: circleci / العقدة: 8
    خطوات:
      - الدفع
      - restore_cache: # خطوة خاصة لاستعادة ذاكرة التخزين المؤقت التبعية
          المفتاح: التبعية - ذاكرة التخزين المؤقت - {{checksum "package.json"}}
      - يركض:
          الاسم: تبعيات الإعداد
          القيادة: تثبيت npm
      - يركض:
          الاسم: إعداد رمز اختبار المناخ مراسل
          القيادة: |
            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64> ./cc-test-reporter
            chmod + x ./cc-test-reporter
      - save_cache: # خطوة خاصة لحفظ ذاكرة التخزين المؤقت التبعية
          المفتاح: التبعية - ذاكرة التخزين المؤقت - {{checksum "package.json"}}
          مسارات:
            -. / عقدة_النماذج
      - المدى: اختبارات المدى
          الاسم: تشغيل الاختبار والتغطية
          القيادة: |
            ./cc-test-reporter قبل الإنشاء
            اختبار npm - - تغطية
            ./cc-test-reporter after-build --exit-code $؟

هذا الإعداد مخصص لـ CircleCI 2.0. هم غروب الشمس دائرة 1.0 في 31 أغسطس 2018.

تقوم خطوة الإنشاء بإعداد عقدة: 8 مع صورة Docker. يتطلب v6 أو أعلى للعمل.

في خطوات ، نقوم أولاً بفحص المشروع واستعادته من ذاكرة التخزين المؤقت إن وجدت ، ثم تثبيت التبعيات. نقوم أيضًا بتثبيت cc-test-reporter ، وهي أداة توفرها CodeClimate لإرسال تقرير تغطية.

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

إعداد جيت

أنشئ ريبو في جيثب وقم بما يلي:

git init
$ git remote add origin git@github.com: username / new-repo-here
$ git add.
$ git -m "الالتزام الأول"
$ بوابة دفع أصل يو سيد

سيؤدي هذا إلى دفع المشروع الذي أنشأناه إلى GitHub.

بناء واختبار المشروع

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

رمز الإعدادالمناخ

الفشل أعلاه هو أننا غير مخولين بنشر تقرير إلى CodeClimate حتى الآن. لذلك ، الآن ، توجه إلى CodeClimate ، وقم بتسجيل الدخول وإنشاء مشروع GitHub الذي تم إنشاؤه. يجب أن نحصل على هذا في نهاية التحليل:

تحليل الترميز

لإصلاح مشكلة CircleCI واستخدام ملاحظات Cover Coverage ، سنحتاج إلى معرف مراسل الاختبار. يمكن استرداد ذلك من علامة التبويب الإعدادات> اختبار التغطية. انسخ معرف مراسل الاختبار دون مشاركته مع أي شخص.

في CircleCI ، انتقل إلى Project> الإعدادات> متغير البيئة وأضف CC_TEST_REPORTER_ID باستخدام معرف مراسل التقرير المنسوخ.

إعداد النشر Heroku

من أجل نشر React على Heroku ، سوف نستخدم buildpack. قم بما يلي:

$ heroku create REPLACE_APP_NAME_HERE - buildpack https://github.com/mars/create-react-app-buildpack.git
بوابة $ دفع هيروكو سيد
heroku $ مفتوحة

لقد دفعنا أحدث فرع ماجستير إلى heroku مع git push heroku master. سيتم فتح صفحة ويب في النهاية تعرض صفحة Welcome to React.

بعد ذلك ، سيتعين علينا الانتقال إلى التطبيق الذي تم إنشاؤه حديثًا في Heroku Dashboard لإعداد النشر التلقائي. قم بما يلي على لوحة القيادة:

  • انتقل إلى علامة تبويب النشر والاتصال بـ ريبو جيثب الصحيح.
  • تمكين النشر التلقائي وتحقق من انتظار مرور CI قبل النشر.
تمكين النشر التلقائي

لقد إنتهينا!

مع بضع خطوات ، لدينا مجموعة تكامل ونشر مؤتمتة بالكامل جاهزة. الآن مع كل التزام يتم دفعه إلى GitHub ، سيرسل المشغل إلى CircleCI و CodeClimate. بمجرد انتهاء الاختبار ، إذا كان في الفرع الرئيسي ، فسيتم أيضًا نشره تلقائيًا في Heroku.

شاهد نموذج الريبو هنا والموقع الإلكتروني المنشور هنا!

خاتمة

هذا هو تحديث لبلدي الوظيفة السابقة قبل عام تقريبا. تم تحديث استخدام CircleCI إلى 2.0 ، ونستخدم أيضًا مراسل cc المحدث من قِبل CodeClimate. إذا كنت مهتمًا بالترحيل ، يمكنك إلقاء نظرة على طلب السحب.

شكرا للقراءة! إذا كنت ترغب في ذلك ، يرجى ضرب

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