معاينة مواقع GitLab

عندما أكتب مقالات متعلقة بـ Apache APISIX، أرغب في أن يراجعها زملائي أولاً. ومع ذلك، فهي مدونتي وبما أنني أخلط بين المحتوى الشخصي والتجاري، أرغب في إبقائها من المستودع. أحتاج إلى معاينة يمكن الوصول إليها فقط من قبل عدد قليل، شيء مثل معاينة Vercel. أنا أستخدم GitLab Pages، ولا يوجد ميزة مثل هذه مضمنة.

I tried two methods: GitHub gists and PDFs. Both have issues.

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

علاوة على ذلك، لا تعرض gists الصور بما أنني أكتب مقالاتي باستخدام Asciidoc. يجب أن أضع الصور في التعليقات، وهذا يفسد التدفق. حاولت إرفاق الصور بالgist، لكنها لا تظهر في تدفق المقال على أي حال. الإيجابية على التعليقات هي أنها مرتبة؛ السلبية هي أنني بحاجة إلى تغيير Asciidoc.

I used gists because I’m used to GitHub reviews. But since it’s my blog, I neither need nor want the same kind of reviews as in a regular Merge Request. I need people to point me to when something needs to be clarified or I missed a logical jump, not that I made a typo (I use Grammarly for this). For this reason, a PDF export of a post is enough to review.

ومع ذلك، تشكل الملفات النصية المضغوطة (PDF) مشاكل خاصة بها: الصفحة الويب “يمكن أن تكون لا نهائية”، بينما الصفحة النصية المضغوطة تقوم بتقسيم الأول إلى صفحات معيارية. يمكن أن تحدث التقسيمات عبر المخططات. علاوة على ذلك، تجعل الملفات النصية المضغوطة التوزيع أصعب بكثير.

في هذا المقال، سأصف كيف حصلت على المعاينة التي أرغب بها عن طريق تكوين GitLab Pages.

ملخص لـ GitLab Pages

تشبه GitLab Pages GitHub Pages:

باستخدام GitLab Pages، يمكنك نشر مواقع إبتكارية ساكنة مباشرة من مستودع في GitLab.

لنشر موقع باستخدام Pages، يمكنك استخدام أي مولد موقع إبتكاري ساكن، مثل Gatsby، Jekyll، Hugo، Middleman، Harp، Hexo، أو Brunch. يمكنك أيضًا نشر أي موقع مكتوب مباشرة في HTML عادي، CSS، و JavaScript.

— GitLab Pages

هكذا ترى هذه المشاركة في المدونة. لم أجد ميزة معاينة لـ GitLab Pages. سألت خبراء بلا جدوى؛ GitLab لا توفر معاينات.

تنظيم العمل

I didn’t believe it initially, but you only need to create a dedicated artifact. Since the artifact consists of web files, the browser will render them.

الفكرة هي إنشاء مثل هذا النصيح، الذي يمكن الوصول إليه عبر عنوان URL، والذي لا يمكن التنبؤ به بسهولة. بعدها يمكنني مشاركة الـ URL مع زملائي وطلب مراجعتهم. للبدء، يمكننا نسخ البناء الحالي على master:

stages:
  - preview

preview:
  stage: preview
  image:
    name: registry.gitlab.com/nfrankel/nfrankel.gitlab.io:latest
  before_script: cd /builds/nfrankel/nfrankel.gitlab.io
  script: bundle exec jekyll b --future -t --config _config.yml -d public
  artifacts:
    paths:
      - public
  only:
    refs:
      - preview
  variables:
    JEKYLL_ENV: production

في هذه النقطة، يكون الموقع متاحًا على https://$CI_PROJECT_NAMESPACE.gitlab.io/-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/public/index.html. يتطلب الأمر إصلاح العديد من المشكلات، على الرغم من ذلك.

جعله يعمل

دعونا نصلح المشكلات حسب ترتيب أهميتها.

إصلاح أذونات الوصول

المشروع خاصprivate؛ وبالتالي، فقط يمكنني الوصول إلى النصيحة: إنه يفوق الغرض الأولي من تقديم المعاينة للآخرين.

I want to give my teammates only limited access to my GitLab repository. I gave them Guest access, according to the Principle of least privilege. However, it still didn’t work.

وفقًا للوثائق، يجب أيضًا جعل خطوطك الإنتاجيةpublic. انتقل إلى الإعدادات > CI/CD > الخطوط الإنتاجية العامة وتحقق من خانة الخطوط الإنتاجية العامة.

إصلاح الروابط النسبية

I use Jekyll to build HTML from Asciidoc. To generate links, Jekyll uses two configuration parameters:

• المجال، على سبيل المثال، محدد مع url
• المسار، على سبيل المثال، /، تم تعيينه مع baseurl

كلاهما مختلفان في المعاينة. يجب تعيين هذه المعلمات في ملف تكوين YAML؛ لا يوجد بديل لمتغير البيئة.

لنغير البناء وفقًا لذلك:

preview:
  stage: preview
  image:
    name: registry.gitlab.com/nfrankel/nfrankel.gitlab.io:latest
  before_script:
    - cd /builds/nfrankel/nfrankel.gitlab.io
    - "printf 'url: https://%s.gitlab.io\n' $CI_PROJECT_NAMESPACE >> _config_preview.yml"                        #1
    - "printf 'baseurl: /-/%s/-/jobs/%s/artifacts/public/\n' $CI_PROJECT_NAME $CI_JOB_ID >> _config_preview.yml" #2
    - cat _config_preview.yml                                                                                    #3
  script: bundle exec jekyll b --future -t --config _config.yml,_config_preview.yml -d public                    #4

1. تعيين url باستخدام متغير البيئة CI_PROJECT_NAMESPACE. كان بإمكاني استخدام قيمة محفوظة بالطريقة التقليدية لأنها ثابتة، لكنها تجعل السكريبت أكثر قابلية لإعادة الاستخدام
2. تعيين baseurl باستخدام متغيرات البيئة CI_PROJECT_NAME و CI_JOB_ID. الأخير هو الجزء العشوائي من المتطلبات
3. عرض محتوى التكوين لأغراض التصحيح
4. استخدامه!

تحسين القابلية للاستخدام

ممل أن توزع الرابط الصحيح في كل مرة. من الأفضل كتابته في وحدة التحكم بعد البناء:

after_script: echo https://$CI_PROJECT_NAMESPACE.gitlab.io/-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/public/index.html

لا يزال هناك شيء واحد مفقود. تقدم GitLab Pages صفحة الإدخال. على سبيل المثال، إذا طلبت https://blog.frankel.ch، سيقدمون الصفحة الرئيسية index.html. مع القطع الفعلية، ليس الأمر كذلك. بما أنني أرغب فقط في تقديم منشور واحد للمعاينة، فهذه ليست مشكلة، لذا لم أتمعن في التحقيق في التكوين بشكل أبعد.

استخدام

عند هذه النقطة، أحتاج فقط للدفع إلى فرعي preview:

git push --force origin HEAD:preview

المكسب الإضافي هو أننا لسنا بحاجة إلى وجود الفرع محليًا؛ فقط قم بالدفع إلى الفرع البعيد.

الخاتمة

في هذا المنشور، أوضحت كيفية معاينة صفحات GitLab ومشاركة عنوان URL المعاينة مع زملائك في خطوتين. الجزء الأصعب كان إدراك أن الأصول الويب تتم توليدها بانتظام باستخدام المتصفح.

للذهاب أبعد:

• إذونات GitLab CI/CD
• تعيين سلطة النظر للأصول بشكل مستقل عن سلطة النظر للمشروع أو المجموعة
• تغيير من يمكنهم مشاهدة الخطوط التوجيه الخاصة بك