Backstageをとりあえず動かしてみた #devops

概要

最近、Platform Engineeringという言葉をよく目にして、その内容を追っていくと「Platform Engineeringを実現するツールはBackstageだ〜」ということですので、そのツールを試してみた記事です。

そもそも、なぜ「Platform Engineering」に興味を持ったか。
以前の職場で開発環境など諸々を準備することが多く、なんとなく「テンプレとかあれば、誰でも作れるのになぁ」と思っていました。そして、その考え方に対して「Platform Engineering」という名前が付いているのを知って、追いかけているという感じです。

そして、最近「Backstage」というツールを動かしてみました。ただ、まだ全然使いこなしていません。ですので、この記事では「とりあえず動かす」というレベルで、何かの参考になればなぁと思います。

Backstageとは

Backstageの概要や解説は下記リンク先の記事をご覧ください。私の解釈が入ると色々と間違えそうな気がしますので、、、、
https://techblog.ap-com.co.jp/entry/2023/03/05/095400

この記事に書いてあること

この記事ではBackstageの機能の一つ「テンプレート」の初歩に絞っています。
まぁ初歩までしか書けないので、下記の3つをポイントに。

Backstageを起動する
テンプレートからGitHubリポジトリを作成する
テンプレートの追加する

前提

この記事の開発環境は下記の通りです。

node version 20.11.1
yarn version 1.22.22
macOS
Laravelを導入できるように

Backstageはバージョンによって動かなくなるようで、最新版のnodeだと動かなかったですね〜やり方が悪かったかも知れないですが、、、

1. Backstageを起動する

まず、ターミナルからBackstageの構築を始めます。

ターミナルで以下のコマンドを入力します。
```
npx @backstage/create-app@latest
```
途中でアプリ名の入力を促されますので、適当な名前を入れます。
下記のコマンドを入力します。
```
cd test-backstage && yarn dev
```
localhost:3000の画面を表示します。

2. テンプレートからGitHubリポジトリを作成する

次はBackstageのテンプレートを元にGitHubのリポジトリを作成します。

デフォルトでルート直下のexamplesディレクトリに元になるテンプレートが用意されています。

.
├── examples
│   ├── entities.yaml
│   ├── org.yaml
│   └── template
│       ├── content
│       │   ├── catalog-info.yaml
│       │   ├── index.js
│       │   └── package.json
│       └── template.yaml

ここでは、リポジトリを作りcontentディレクトリ内のファイルをプッシュするのがゴールです。

GitHubでアクセストークンを作ります。
下記コードを参考にapp-config.local.yaml内にGitHubのアクセストークンを記載します。
```
integrations:
github:
- host: github.com
  token: {{ ここにGitHubトークンを入力 }}
```

/package/backend/src/index.tsに以下のコードを追加します。

~~~~~~~~~~~~上記略
backend.add(import('@backstage/plugin-scaffolder-backend-module-github'));

backend.start();

下記コマンドを入力してBackstageを再起動します。
```
export NODE_OPTIONS=--no-node-snapshot
```
Backstage画面の「Create...」をクリックします。
「Example Node.jp Template」の「CHOOSE」をクリックします。
コンポーネント名を入力して「NEXT」をクリックします。
オーナー名とリポジトリ名を入力して「NEXT」をクリックします。
問題がなければ「CREATE」をクリックします。
処理が終わるのを待ちます。
リポジトリを確認します。
一応、リポジトリの中身も確認します。

想定通りにリポジトリが作成されていれば良いです。

3. テンプレートの追加する

次はLaravelの基本のコードをテンプレートとして追加します。

ルートにて下記のコマンドを打ちます。

mkdir /laravel-example/template && cd /laravel-example/template
composer create-project laravel/laravel content --prefer-dist

/examples/template/content/catalog-info.yamlファイルをコピペして/laravel-example/template/content/catalog-info.yamlに配置します。

同様に/exampleディレクトリからtemplate.yaml、entities.yaml、org.yamlをコピペして同様の階層に配置します(ほぼコピペ、、、まだ詳細は不明です)。

.
├── entities.yaml
├── org.yaml
└── template
    ├── content
    │   ├── README.md
    │   ├── app
    │   ├── artisan
    │   ├── bootstrap
    │   ├── catalog-info.yaml
    │   ├── composer.json
    │   ├── composer.lock
    │   ├── config
    │   ├── database
    │   ├── package.json
    │   ├── phpunit.xml
    │   ├── public
    │   ├── resources
    │   ├── routes
    │   ├── storage
    │   └── tests
    └── template.yaml

app-config.yamlに下記のコードを追加します。

  - type: file
    target: ../../laravel-example/template/template.yaml
    rules:
      - allow: [Template]

template.yamlファイルの内容を変更しておきます。

apiVersion: scaffolder.backstage.io/v1beta3
kind: Template
metadata:
  name: example-laravel-template
  title: Example laravel Template
  description: An example template for the scaffolder that creates a simple laravel service

Backstageを再起動してテンプレート一覧に「example-laravel-template」が追加されていることを確認します。

最後に

とりあえず動くものということで、ざっくりとBackstageの立ち上げとテンプレート作成のイメージをつかんでいただければ幸いです。
確かにテンプレートを用意しておけば、開発者としてはGUIで開発環境ができあがるので便利かなと思います。とはいえ、ツールはツールですので、これからちゃんと使い方や思想を学習していきます。ファイルや変数の詳細の意味もちゃんと調べないと、、、

何かご指摘等ありましたらコメントをいただけると幸いですので、よろしくお願いいたします。