العربية
  • github actions workflow
  • CI/CD
  • النشر الآلي
  • تبسيط النشر
  • احضر واجهتك الخاصة
  • واجهة تسجيل دخول مخصصة
  • @logto/tunnel

أتمت نشر واجهة تسجيل الدخول المخصصة لك باستخدام سير عمل GitHub Actions

دعنا نعرض عليك كيف نؤتمت نشر واجهة تسجيل الدخول المخصصة لك إلى Logto Cloud في خط سير devops الخاص بك باستخدام سير عمل GitHub Actions.

Charles
Charles
Developer

الخلفية

Logto هو اختيارك الأفضل لحل إدارة هويات العملاء والوصول (CIAM). حديثًا، أطلقنا ميزة "اجلب واجهتك الخاصة" على Logto Cloud، مما يمكن المطورين من تخصيص واجهة تسجيل دخولهم بالكامل.

في منشور مدونة سابق، قمنا بتوفير دليل خطوة بخطوة حول كيفية إنشاء واجهة تسجيل دخول مخصصة، والتي تشمل:

  • تطوير صفحة تسجيل دخول مخصصة مع أمثلة تعليمات برمجية
  • إعداد CLI الخاص بـ @logto/tunnel لمراقبة الأخطاء محليًا
  • بناء وضغط أصول واجهتك المخصصة
  • تحميل حزمة الضغط ونشرها إلى Logto Cloud عبر واجهة المستخدم للكونسول

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

لقد استمعنا إلى ملاحظاتك، ونحن متحمسون لتقديم أمر deploy جديد في @logto/tunnel. يسمح لك هذا الأمر بأتمتة عملية النشر من خلال تنفيذ الأمر في المحطة الطرفية، أو دمجه في سير عمل GitHub Actions، وهو مفيد بشكل خاص لبناء خط سير CI/CD الخاص بك. لنبدأ!

المتطلبات الأساسية

قبل أن نبدأ في الإعداد، تأكد من أن لديك ما يلي:

  1. حساب Logto Cloud مع خطة اشتراك.
  2. تطبيق ماكينة لماكينة مع أذونات إدارة API في مستأجر Logto الخاص بك.
  3. يجب أن يكون كود مصدر مشروعك مستضافًا على GitHub.
  4. قم بتثبيت أداة CLI الخاصة بـ @logto/tunnel كاعتماد تطوير في مشروعك.

الخطوة 1: إنشاء سير عمل GitHub Actions

في مستودع GitHub الخاص بك، قم بإنشاء ملف سير عمل جديد. يمكنك القيام بذلك بالانتقال إلى .github/workflows/ وإنشاء ملف باسم deploy.yml.

تفسير سير عمل GitHub Actions

  • الإطلاق: يتم إطلاق سير العمل في كل عملية دفع للفرع الرئيسي.
  • الوظائف: تعمل وظيفة النشر على بيئة Ubuntu الأحدث، وستنفذ الخطوات التالية.
  • الخطوات:
    • Checkout code: هذه الخطوة تقوم بفحص كود المستودع الخاص بك.
    • Set up Node.js: هذه الخطوة تقوم بإعداد بيئة Node.js.
    • Install dependencies: هذه الخطوة تقوم بتثبيت الاعتماديات الخاصة بمشروعك.
    • Build: هذه الخطوة تبني كود مصدر مشروعك إلى أصول html. لنفترض أن مجلد الإخراج يُسمى dist في الدليل الجذر.
    • Deploy to Logto Cloud: هذه الخطوة تقوم بتشغيل أمر Tunnel CLI لنشر أصول html في دليل ./dist إلى مستأجر Logto Cloud الخاص بك. يستخدم متغيرات البيئة للمعلومات الحساسة.

لمزيد من المعلومات حول GitHub Actions. تفضل بزيارة وثائق GitHub Actions.

الخطوة 2: تكوين الأسرار في GitHub

لحفظ بيانات اعتمادك آمنة، يجب عليك تخزينها كأسرار في مستودع GitHub الخاص بك:

  1. اذهب إلى مستودع GitHub الخاص بك.
  2. انقر على "الإعدادات".
  3. انتقل إلى "الأسرار والمتغيرات > الإجراءات"
  4. انقر على إضافة سر مخزن جديد وأضف الأسرار التالية:
  • LOGTO_AUTH: بيانات اعتماد تطبيق Logto M2M الخاصة بك بالتنسيق <m2m-app-id>:<m2m-app-secret>.
  • LOGTO_ENDPOINT: URI لنقطة نهاية Logto Cloud الخاصة بك.
  • LOGTO_RESOURCE: مؤشر مورد Logto Management API الخاص بك. يمكنك العثور عليه في "موارد API -> Logto Management API". مطلوب إذا كان النطاق المخصص ممكّنًا في مستأجر Logto Cloud الخاص بك.

الخطوة 3: اختبار سير العمل الخاص بك

بمجرد إعداد سير العمل وتكوين الأسرار، يمكنك اختباره من خلال دمج PR في الفرع الرئيسي. سيتم تلقائيًا إطلاق سير عمل GitHub Actions، وسيتم نشر واجهة تسجيل الدخول المخصصة الخاصة بك إلى Logto Cloud.

نجاح النشر إلى Logto Cloud باستخدام GitHub Actions

الخاتمة

عبر دمج أمر CLI الخاص بـ @logto/tunnel في سير عمل GitHub Actions الخاص بك، يمكنك تبسيط عملية نشر واجهة تسجيل الدخول المخصصة الخاصة بك إلى Logto Cloud. هذه الأتمتة تتيح لك التركيز على التطوير بينما تضمن أن تغييراتك تُختبر باستمرار في بيئة حية.

استمتع بالتشفير!