Backstage | 開発者向けポータルの強化

この抜粋の内容は次のとおりです。

- Backstage 開発環境の構築 | devcontainer
- Backstage App の作成
- 永続化 | PostgreSQL
- 認証 | GitHub

さらに詳しく知りたい方は読み続けてください。

---

2023年7月3回目です。

[Backstage](https://backstage.io/) についてです。
ご存じのとおり、Backstage は、Spotify 社が開発し、[CNCF](https://www.cncf.io/projects/backstage/) に寄贈された開発者ポータルです。

https://github.com/backstage/backstage

Schema 駆動開発は、API の仕様をあらかじめ決めることで、Frontend と Backend の開発をスムーズにします。

弊社では、
GraphQL でいえば、Apollo Client
gRPC でいえば、Buf Schema Registry
REST でいえば、Swagger
です。

用途に合わせて API を開発することで、Schema が各所に散らばります。
これでは、本来の Schema 駆動開発の意義が薄れていきます。
また、Frontend Engineer からすると「どこを見れば良いのか統一してくれ！」と。

その悩みを解決してくれるのが、Backstage です。

Backstage では、直接 API を呼ぶことができます。Frontend は、API ができるまで Backstage を見るようにできる。
Schema 管理以外にも Docs や Data Lineage Graph など便利な機能があります。

## 開発環境の構築 | devcontainer
ローカルでの検証に devcontainer を使用します。

- Node.js は、Backstage に合わせるため、`1.18` を使います。

https://github.com/danny-yamamoto/backstage-example/blob/91f026197db44a409edfd53d22f667bd1df95b89/.devcontainer/Dockerfile#L1

## Backstage App の作成
次に Backstage を起動します。
これで、基本構成は、完了です。
```bash
node ➜ /workspaces/backstage-example (main) $ npx @backstage/create-app@latest
Need to install the following packages:
  @backstage/create-app@0.5.2
Ok to proceed? (y) y
? Enter a name for the app [required] backstage
```

App を起動します。
```bash
node ➜ /workspaces/backstage-example/backstage (main) $ yarn dev
```

## 永続化 | PostgreSQL
次は、データの永続化のために、SQLite から PostgreSQL に変更します。
devcontainer は、Node.js + PostgreSQL を使っているため、それをそのまま使います。

https://github.com/danny-yamamoto/backstage-example/blob/91f026197db44a409edfd53d22f667bd1df95b89/.devcontainer/docker-compose.yml#L21-L35

Ctl+c で一度停止し、PostgreSQL 用の環境変数を定義します。

https://github.com/danny-yamamoto/backstage-example/blob/91f026197db44a409edfd53d22f667bd1df95b89/backstage/app-config.yaml#L30-L39

再度、App を起動します。
```bash
node ➜ /workspaces/backstage-example/backstage (main) $ yarn dev
```

## 認証 | GitHub
次は、ログイン認証を設定します。
いくつか選択肢がありますが、今回は GitHub を使います。

Ctl+c で一度停止し、Auth 用の環境変数を定義します。

https://github.com/danny-yamamoto/backstage-example/blob/91f026197db44a409edfd53d22f667bd1df95b89/backstage/app-config.yaml#L71-L79

OAuth Apps　で作成した client/secret を環境変数に設定します。
```bash
node ➜ /workspaces/backstage-example/backstage (main) $ export AUTH_GITHUB_CLIENT_ID=01234567890123456789
node ➜ /workspaces/backstage-example/backstage (main) $ export AUTH_GITHUB_CLIENT_SECRET=0123456789012345678901234567890123456789
node ➜ /workspaces/backstage-example/backstage (main) $ echo $AUTH_GITHUB_CLIENT_ID
node ➜ /workspaces/backstage-example/backstage (main) $ echo $AUTH_GITHUB_CLIENT_SECRET
```

再度、App を起動します。
```bash
node ➜ /workspaces/backstage-example/backstage (main) $ yarn dev
```

![backstage-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569971/8c97823e-2f13-867b-6c88-65abb259fe73.jpeg)
![backstage-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569971/755f014e-0ddf-917c-d408-19c4766e9b16.jpeg)

## summary
- Backstage について、書きました。
- Backend API は、用途に合わせて選べる状況です。
   - Mobile App なら GraphQL だな。最低限のデータを効率良く通信できる。👍
   - Device を使う高速な通信なら gRPC だな。REST だと、GET で POST みたいな API 書く人いるし、強制できる。👍
   - レガシーな連携なら REST だな。しょうがなく。
- 「方針だから REST にしろ！」とか思考停止でしょ。😤    
- ぼくたちは、可能な限り自由に開発したい。でも、管理もしたい。そんな時に Backstage が有用なんだと思います。

---
### 参考
- [Spotifyが開発者ポータル「Backstage」をオープンソース化](https://atmarkit.itmedia.co.jp/ait/articles/2003/17/news068.html#:~:text=SharePocket%20Button-,Spotify%E3%81%AF2020%E5%B9%B43%E6%9C%8816%E6%97%A5%EF%BC%88%E7%B1%B3%E5%9B%BD%E6%99%82%E9%96%93,%E3%81%BE%E3%81%A8%E3%82%81%E3%80%81%E5%88%86%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%8F%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%80%82)