مقدمة إلى Backstage

Backstage هو الإطار الرائد مفتوح المصدر لبناء بوابات المطورين، أنشأته Spotify أصلاً وهو الآن مشروع CNCF في مرحلة الحضانة. إنه الأساس الذي تختاره معظم المؤسسات عند بناء منصة المطور الداخلية.

لماذا Backstage؟

بنت Spotify منصة Backstage لحل مشكلة شائعة: مع مئات الخدمات المصغرة، كان المهندسون يقضون وقتاً طويلاً في البحث عن معلومات حول الخدمات والتوثيق والملاك. أصبح Backstage "نافذتهم الواحدة" لكل الهندسة.

قبل Backstage:
┌─────────────┬─────────────┬─────────────┐
│    Wiki     │   GitHub    │  Confluence │
├─────────────┼─────────────┼─────────────┤
│  PagerDuty  │    Jira     │    Slack    │
├─────────────┼─────────────┼─────────────┤
│  Datadog    │   Grafana   │   Jenkins   │
└─────────────┴─────────────┴─────────────┘
"أين أجد معلومات عن الخدمة X؟"
"من يملك هذا؟ هل يوجد توثيق؟"

بعد Backstage:
┌─────────────────────────────────────────┐
│              BACKSTAGE                   │
│  ┌─────────────────────────────────────┐│
│  │ الخدمة X                            ││
│  │ المالك: فريق Alpha                  ││
│  │ التوثيق: [رابط] | المناوبة: [رابط]  ││
│  │ APIs: 3 | التبعيات: 5               ││
│  └─────────────────────────────────────┘│
│  كل شيء في مكان واحد                    │
└─────────────────────────────────────────┘

ميزات Backstage الأساسية

يوفر Backstage أربع قدرات أساسية:

الميزة	الوصف	القيمة
كتالوج البرمجيات	سجل لجميع الخدمات وAPIs والموارد	معرفة ما يوجد
قوالب البرمجيات	بناء هيكلي للمشاريع الجديدة	إنشاء متسق
TechDocs	التوثيق كرمز	التوثيق حيث يبحث المطورون
الإضافات	بنية قابلة للتوسيع	دمج كل شيء

نظرة عامة على البنية

لدى Backstage بنية من ثلاث طبقات:

┌─────────────────────────────────────────────────────────┐
│                    الواجهة الأمامية                     │
│                    (React SPA)                           │
│  ┌──────────┬──────────┬──────────┬──────────┐          │
│  │ الكتالوج │ المُنشئ  │ TechDocs │ الإضافات │          │
│  │   UI     │    UI    │    UI    │    UI    │          │
│  └──────────┴──────────┴──────────┴──────────┘          │
├─────────────────────────────────────────────────────────┤
│                    الواجهة الخلفية                       │
│                  (Node.js + Express)                     │
│  ┌──────────┬──────────┬──────────┬──────────┐          │
│  │ الكتالوج │ المُنشئ  │ TechDocs │ المصادقة │          │
│  │  API     │   API    │   API    │   API    │          │
│  └──────────┴──────────┴──────────┴──────────┘          │
├─────────────────────────────────────────────────────────┤
│                     طبقة البيانات                        │
│  ┌──────────────────┬───────────────────────┐           │
│  │    PostgreSQL    │    APIs خارجية        │           │
│  │  (بيانات الكتالوج)│  (GitHub, K8s, إلخ)  │           │
│  └──────────────────┴───────────────────────┘           │
└─────────────────────────────────────────────────────────┘

التثبيت

تشغيل Backstage محلياً:

# المتطلبات: Node.js 20 LTS أو 22 LTS، Yarn 1.x
node --version  # يجب أن يكون 20+ (Node 18 انتهى دعمه في أبريل 2025)
yarn --version  # يجب أن يكون 1.x (Classic)

# إنشاء تطبيق Backstage جديد
npx @backstage/create-app@latest

# اتبع المطالبات:
# ? أدخل اسماً للتطبيق (مثال، acme-backstage)
# جاري إنشاء التطبيق...

# انتقل إلى مجلد التطبيق
cd acme-backstage

# البدء في وضع التطوير
yarn dev

# Backstage يعمل الآن على:
# الواجهة: http://localhost:3000
# الخلفية: http://localhost:7007

أساسيات التكوين

تكوين Backstage في app-config.yaml:

# app-config.yaml
app:
  title: بوابة مطوري Acme
  baseUrl: http://localhost:3000

organization:
  name: شركة Acme

backend:
  baseUrl: http://localhost:7007
  listen:
    port: 7007
  database:
    client: better-sqlite3
    connection: ':memory:'  # استخدم PostgreSQL للإنتاج

# المصادقة (مثال: GitHub)
auth:
  environment: development
  providers:
    github:
      development:
        clientId: ${GITHUB_CLIENT_ID}
        clientSecret: ${GITHUB_CLIENT_SECRET}

# مواقع الكتالوج (أين تجد ملفات catalog-info.yaml)
catalog:
  import:
    entityFilename: catalog-info.yaml
  locations:
    # بيانات المثال المحلية
    - type: file
      target: ../../examples/entities.yaml
    # مؤسسة GitHub
    - type: github-org
      target: https://github.com/acme-corp

المفاهيم الرئيسية

فهم هذه المفاهيم ضروري:

# مفاهيم Backstage الأساسية
concepts:

  entities:
    description: "الأشياء المتتبعة في الكتالوج"
    types:
      - Component (الخدمات، المواقع، المكتبات)
      - API (REST, GraphQL, gRPC)
      - Resource (قواعد البيانات، الحاويات، الطوابير)
      - System (مجموعة من المكونات)
      - Domain (قدرة العمل)
      - Group (الفريق)
      - User (الشخص)

  plugins:
    description: "توسيع وظائف Backstage"
    examples:
      - kubernetes: "إظهار حالة البود"
      - github-actions: "إظهار حالة CI/CD"
      - pagerduty: "إظهار جدول المناوبة"
      - techdocs: "عرض التوثيق"

  templates:
    description: "منشئات للمشاريع الجديدة"
    actions:
      - fetch:template
      - publish:github
      - catalog:register

في الدرس التالي، سنغوص عميقاً في كتالوج البرمجيات ونموذج الكيانات. :::