Backstage Developer Portal: центральная платформа для разработчиков enterprise

Привет! Я, Евгений Семенов, директор ITFresh. Сегодня я расскажу вам кое-что интересное. Знаете ли вы, что Backstage от Spotify — это бесспорный лидер среди Internal Developer Platforms (IDP)? Он занимает колоссальные 89% рынка! Более 3400 компаний уже выбрали Backstage, чтобы сделать работу своих разработчиков гораздо удобнее и унифицировать их опыт. Мы в ITFresh знаем эту платформу вдоль и поперек. Именно поэтому я подробно опишу, как мы выполняем полный production деплой Backstage для команд до 200 разработчиков. Конечно, речь пойдет и об обязательных интеграциях: GitHub, Kubernetes и наших CI/CD системах.

Что такое Backstage Developer Portal

Что такое Backstage? Это, прежде всего, мощная open source платформа. Ее главное назначение — создание Internal Developer Portal, или сокращенно IDP.

• Service Catalog — единый каталог всех сервисов, API, библиотек
• Software Templates — scaffolding новых проектов по стандартам
• TechDocs — docs-as-code, автогенерация из markdown
• Plugin Ecosystem — 150+ плагинов для интеграций
• Developer Self-Service — provision ресурсов без DevOps tickets

Архитектура Backstage для enterprise

# Enterprise Backstage stack
┌─────────────────────────────────────────┐
│ Frontend (React SPA)                    │
├─────────────────────────────────────────┤
│ Backend API (Express.js)                │
├─────────────────────────────────────────┤
│ PostgreSQL (catalog data)               │
├─────────────────────────────────────────┤
│ Integrations:                           │
│ • GitHub/GitLab (source control)        │
│ • Jenkins/ArgoCD (CI/CD)               │
│ • Kubernetes (deployments)              │
│ • Grafana (monitoring)                  │
│ • Sonar (code quality)                  │
└─────────────────────────────────────────┘

Production деплой Backstage

# 1. Создание Backstage app
npx @backstage/create-app@latest

# 2. Конфигурация app-config.production.yaml
app:
  title: Developer Portal
  baseUrl: https://backstage.company.com

backend:
  baseUrl: https://backstage.company.com
  database:
    client: pg
    connection:
      host: postgres.backstage.svc.cluster.local
      port: 5432
      user: backstage
      password: ${POSTGRES_PASSWORD}

auth:
  providers:
    github:
      development:
        clientId: ${GITHUB_CLIENT_ID}
        clientSecret: ${GITHUB_CLIENT_SECRET}

catalog:
  providers:
    github:
      company:
        organization: 'company-org'
        catalogPath: '/catalog-info.yaml'
        filters:
          branch: 'main'
          repository: '.*'

Настройка Service Templates

Надоело каждый раз начинать проект с нуля? Backstage предлагает крутые шаблоны! Они полностью автоматизируют создание новых проектов.

# template.yaml для React app
apiVersion: scaffolder.backstage.io/v1beta3
kind: Template
metadata:
  name: react-app-template
  title: React Application
  description: Create a new React application with CI/CD
spec:
  owner: platform-team
  type: website
  parameters:
    - title: Component Information
      properties:
        name:
          title: Name
          type: string
          pattern: '^[a-zA-Z0-9-]+$'
        description:
          title: Description
          type: string
        owner:
          title: Owner
          type: string
          ui:field: OwnerPicker
          ui:options:
            allowedKinds: [Group, User]
  steps:
    - id: fetch-base
      name: Fetch Base Template
      action: fetch:template
      input:
        url: ./skeleton
        values:
          name: ${{parameters.name}}
          description: ${{parameters.description}}
          owner: ${{parameters.owner}}
    - id: publish
      name: Publish to GitHub
      action: publish:github
      input:
        allowedHosts: ['github.com']
        repoUrl: github.com?repo=${{parameters.name}}
        description: ${{parameters.description}}
    - id: register
      name: Register to Catalog
      action: catalog:register
      input:
        repoContentsUrl: ${{steps.publish.output.repoContentsUrl}}
        catalogInfoPath: '/catalog-info.yaml'

Интеграция с CI/CD и Kubernetes

# Backstage actions для CI/CD
# actions/trigger-jenkins-build.ts
export const createTriggerJenkinsBuildAction = () => {
  return createTemplateAction({
    id: 'jenkins:trigger:build',
    schema: {
      input: {
        type: 'object',
        required: ['jobName'],
        properties: {
          jobName: { type: 'string' },
          parameters: { type: 'object' }
        }
      }
    },
    async handler(ctx) {
      const { jobName, parameters } = ctx.input;

      const jenkins = new Jenkins({
        baseUrl: process.env.JENKINS_URL,
        crumbIssuer: true,
        promisify: true
      });

      await jenkins.job.build({
        name: jobName,
        parameters
      });
    }
  });
};