BackStageに入門1~起動編~

Gartnerのハイプサイクルで俄かに流行しつつあるPlatformEngineeringという考え方。
そのPlatformEngineeringを推進している、PlatformEngineering.orgの中で面白いサービスがあったので触れてみる。
Backstageといわれるサービスで実際は開発者用のポータルサイトであり、非常に拡張性が高くいろいろなことができるので、また日本語もサイトもあまりないので、紹介を兼ねて触っていきたい。
なお業務でも採用を検討しており、備忘を兼ねている。

# Backstageとは

BackStageはSpotifyが開発したプロダクトで、開発者やリーダーが悩んでいるあれやこれやを解決しようという目論見をもったプロダクトであり、現在はOSSとしてCNCFに寄贈され、日夜開発が進められている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2374913/e69e9de9-e125-ab0e-75cf-a10555c39b44.png)

## Backstageが生まれた背景

Spotifyはご存じのように高度で洗練された最先端Tech企業の一員であることは疑いようなく、素早く様々なサービスを展開してきていた。その中で以下のような課題感を持ったことに端を発する。

1. 社内のエコシステムは断片化
1. ドキュメントが散逸化
1. オーナーやドキュメントのメンテ不足による陳腐化

恐らく開発者の皆さんが経験したことがあるかと思う。
これを一手に解決しようという試みがこのBackStageというOSSである。

## BackStageって何ができるの？

BackStageはポータルサイトであり、開発にともなう情報を一元管理することができる。
コアな機能として以下を有する。

1. ソフトウェアカタログ
1. ソフトウェアテンプレート
1. Kubernetes連携
1. 検索機能
1. TechDocs

これら機能はテンプレート化による標準化やカタログによるサービスのカタログ化。
それぞれに対するオーナーやラベル化による検索の容易さ。
TechDocsによる資料の一括管理することができる。

これらに加え多くのPluginが利用できるので、非常に高い拡張性を有する。
デフォルトでも十分に活用可能である。

# 触ってみよう

しゃらくせえ、とりあえず触りたいという人はデモサイトを触ってみるのもあり
https://backstage.io/demos

## 環境
MacBookAir 2021(M1)
*AWSのCloud9やEC2で起動する場合注意が必要なので、後ほど追記

## 前提条件
以下をインストール済みであること。
https://backstage.io/docs/getting-started/

## Backstageをインストール
前提モジュールをダウンロードすると、以下のコマンドを実行する。
```
npx @backstage/create-app@latest
```
問題ない場合は、Backstageの最小構成が作成される。
yarn installで失敗する場合は、GCC系が足りない場合失敗することがあるので、要注意。


## 起動
backstageフォルダへ移動し、コマンドを実行することで起動する。
```
cd backstage
yarn dev
```
このyarn devは、appとbackendそれぞれを起動するのをまとめているだけ。
package.jsonに書いてある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2374913/bbf0a13a-d340-c4a6-fb32-f5a626b6a4e0.png)

この場合ローカル起動され、以下にアクセスすることでアクセス可能になる。
```
http://localhost:3000
```

以下のようにサイトが表示されれば成功。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2374913/db77ed65-5622-596a-c905-3a939f988c7d.png)

ローカルではなく、パブリッククラウドを使う場合について注意事項を記載する。
## EC2で起動する場合
起動にはインスタンスタイプLargeおよびストレージは30GBは最低限必要である。
ubuntuでもAmazonLinux2023でもどちらでも起動できる。

EC2で起動する場合は、app-config.yamlの修正が必要となる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2374913/7e3eb45d-70d4-4db8-2fc4-b94e89c8d620.png)

appのbaseUrlには、内部IPアドレスを設定
backendのbaseUrl及びCORSには、PublicIPアドレスを設定すると起動することができる。

## Cloud9で起動する場合
Cloud9でローカル起動する場合は、上記のnpxからモジュールインストールしても起動できない。
というのもInvalidHostHeaderが発生してしまうため。
回避方法はcliのserver.tsを修正する必要があり、Gitからソースをcloneして、コードを書き換えて起動する必要がある。
修正箇所は以下のserver.tsのallowedHostを書き換える。
以下のurl.hostnameを
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2374913/ffe21c0d-3f29-34fd-e85d-ff6624a4c184.png)

↓のようにallに変更することで起動可能となる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2374913/56b5d150-1814-d8da-ded5-05732cdb5fa0.png)

### Cloud9で起動する場合の注意
githubのリポジトリはサイズが大きいため、デフォルトのストレージでは足りないので、余裕を持って30GB必要であるため拡張が必須となる。
またインスタンスタイプもt3では遅く、メモリをよく使うので、m系インスタンスだと起動が早いと思う（未検証）
私の場合Mac 16GBなので結構サクサク動くので、手元で同一スペックがあるならば、ローカルで開発した方が早い。


## 動かしてみる
APIやTechDocsはデフォルトでインストールされている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2374913/cf649d99-34ff-5a5f-ea8c-c80ced8e1d53.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2374913/d8c23457-a01c-8a6c-cf42-9e57c55998dc.png)

画面上に表示されているHomeやAPIのサンプルはexampleディレクトリに配置されているものである。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2374913/cf649d99-34ff-5a5f-ea8c-c80ced8e1d53.png)

Kubernetesのマニフェストに近い形式をとっており、使い慣れている人にとってはわかりやすい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2374913/4240ad92-734f-0003-8364-81db4f80a158.png)

本来運用していく場合、ComponentはGithubといった外部サービスやS3などに配置することで、CICDで運用回していく。

# DBや設定
現状はDBはmemory上で動かしており、サイトを動かし、登録しても、保存されない。
PostgresSQLやRDSなどに永続化する必要があるが、次章以降に記載する。
また設定を変更する勘所も記載していくので、興味あれば参照されたい。


＃ 参考になったURL
公式
https://backstage.io/docs/getting-started/
https://github.com/backstage/backstage


以下に勉強になった（大変ありがたい）URLを記載する。
非常にわかりやすいので、参照していただきたい。
https://qiita.com/tsutorm/items/1120293943418e28de0e
https://techblog.ap-com.co.jp/entry/2023/03/05/095400