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

## 概要
最近、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つをポイントに。
1. Backstageを起動する
1. テンプレートからGitHubリポジトリを作成する
1. テンプレートの追加する

### 前提
この記事の開発環境は下記の通りです。
* node version 20.11.1
* yarn version 1.22.22
* macOS
* Laravelを導入できるように

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

### 1. Backstageを起動する
まず、ターミナルからBackstageの構築を始めます。
1. ターミナルで以下のコマンドを入力します。

    ```
    npx @backstage/create-app@latest
    ```
    <br>

2. 途中でアプリ名の入力を促されますので、適当な名前を入れます。
    ![スクリーンショット 2024-06-15 22.09.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321920/e65e8c65-1288-8308-2029-99d3f532bbf1.png)
    <br>

3. 下記のコマンドを入力します。
    ```
    cd test-backstage && yarn dev
    ```
    <br>
4. `localhost:3000`の画面を表示します。
    ![スクリーンショット 2024-06-15 22.19.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321920/43149c11-0f99-de2a-6824-24b089dee55e.png)


### 2. テンプレートからGitHubリポジトリを作成する
次はBackstageのテンプレートを元にGitHubのリポジトリを作成します。

デフォルトでルート直下のexamplesディレクトリに元になるテンプレートが用意されています。
```
.
├── examples
│   ├── entities.yaml
│   ├── org.yaml
│   └── template
│       ├── content
│       │   ├── catalog-info.yaml
│       │   ├── index.js
│       │   └── package.json
│       └── template.yaml
```
ここでは、リポジトリを作り`content`ディレクトリ内のファイルをプッシュするのがゴールです。

1. GitHubでアクセストークンを作ります。
    <br>
1. 下記コードを参考に`app-config.local.yaml`内にGitHubのアクセストークンを記載します。
    ```
    integrations:
    github:
    - host: github.com
      token: {{ ここにGitHubトークンを入力 }}
    ```
    <br>
1. `/package/backend/src/index.ts`に以下のコードを追加します。
    ```
    ~~~~~~~~~~~~上記略
    backend.add(import('@backstage/plugin-scaffolder-backend-module-github'));

    backend.start();
    ```
    <br>
1. 下記コマンドを入力してBackstageを再起動します。
   ```
   export NODE_OPTIONS=--no-node-snapshot
   ```
   <br>
1. Backstage画面の「Create...」をクリックします。
    ![スクリーンショット 2024-06-15 23.37.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321920/2ab7e79a-0e26-958c-7be4-d9e7556d950d.png)

    <br>

1. 「Example Node.jp Template」の「CHOOSE」をクリックします。
    ![スクリーンショット 2024-06-15 23.39.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321920/ba13f304-ca09-4e19-b40b-3492f23839b5.png)

    <br>

1. コンポーネント名を入力して「NEXT」をクリックします。
    ![スクリーンショット 2024-06-15 23.41.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321920/f0bcec32-d105-c920-5820-47e3840a60ee.png)
    <br>

1. オーナー名とリポジトリ名を入力して「NEXT」をクリックします。
    ![スクリーンショット 2024-06-15 23.42.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321920/62b36a2f-af69-0449-59f0-15e3e89d77f9.png)


    <br>

1. 問題がなければ「CREATE」をクリックします。
    ![スクリーンショット 2024-06-15 23.43.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321920/bd1dfc27-fc16-72ae-7c32-19782d4a606a.png)
    <br>

1. 処理が終わるのを待ちます。
    ![スクリーンショット 2024-06-16 0.02.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321920/a8a458b9-bbd7-eb7e-966c-e19e16390ede.png)

    <br>

1. リポジトリを確認します。
    ![スクリーンショット 2024-06-16 0.03.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321920/31a384ef-703e-c3c7-1b96-34feff2b33ae.png)

    <br>

1. 一応、リポジトリの中身も確認します。
    ![スクリーンショット 2024-06-16 0.04.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321920/ac7260a5-6a1e-603b-3115-3271506e9155.png)

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

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

1. ルートにて下記のコマンドを打ちます。
    ```
    mkdir /laravel-example/template && cd /laravel-example/template
    composer create-project laravel/laravel content --prefer-dist
    ```
    <br>
1. `/examples/template/content/catalog-info.yaml`ファイルをコピペして`/laravel-example/template/content/catalog-info.yaml`に配置します。
    <br>
1. 同様に`/example`ディレクトリから`template.yaml`、`entities.yaml`、`org.yaml`をコピペして同様の階層に配置します(ほぼコピペ、、、まだ詳細は不明です:bow_tone1:)。
    ```
    .
   ├── 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
    ```
    <br>
1.  `app-config.yaml`に下記のコードを追加します。
    ```
      - type: file
        target: ../../laravel-example/template/template.yaml
        rules:
          - allow: [Template]
    ```
    ![スクリーンショット 2024-06-16 0.24.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321920/79532ad8-85ed-b034-13b9-a19a76c2d413.png)

    <br>
    
1. `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
    ```
    <br>
1. Backstageを再起動してテンプレート一覧に「example-laravel-template」が追加されていることを確認します。
    ![スクリーンショット 2024-06-16 0.29.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321920/a0ea4eae-3eb0-f0cb-b35c-f73052f5d357.png)


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

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