antony@notes:~/ops-automation$ cat "Getting-Started-configuring-Backstage.md"
Getting Started, configuring Backstage
Getting Started, configuring Backstage
Preface
本篇文章會主要會分做 3 個部分介紹
- 甚麼是 Backstage
- 透過 Podman Pod 建立與設定 Backstage 要使用的 Database - PostgreSQL
- 透過 Podman Pod 建立與設定 Backstage
可以透過點擊展開以下目錄,選擇想看的內容,跳轉至特定章節
:::warning
:::spoiler 目錄
[TOC]
:::
標題:Backstage 副標:解析企業開發導入 IDP 的需求與解決方案 簡報大綱規劃(持續調整中)
- 第一章|What is Backstage?
- Objectives and methods
- 第二章|系統架構
- Concepts
- Architecture
- 第三章|環境部署
- Containerize
- 相關服務的準備(ex:SQL)
- 配置檔案修改
- 第四章|應用實例
- 先以個別解說優先(後續完善再組裝起來)
研究方向

目前完成 Backstage Containerize 接下來研究 Software Catalog、Software Templates 功能,將 Backstage 部署與 Software Catalog、Software Templates 功能實作流程寫入 TechDocs,後續針對 Kubernetes 相關 plugin 進行實作,Search 於最後進行功能驗證。
下一步
- 首要目標:
- 完善基礎設施,先串接 CI/CD 有一個完整的 Demo 流程後,Backstage 再上 K8s
- 後續項目
- 修正導入誘因,不能只單獨強調整合的特點,還要列出實際解決的問題
- Kubernetes 部署 Backstage
- 要了解開發人員,在合作開發中的問題點,如開新專案的流程,專案的交接步驟等,backstage 可以怎麼執行
What is Backstage
Backstage 是 Spotify 公司開發的一個開放平台,用來建立開發人員的入口網站 ( developer portals )。
它旨在提供開發者一個統一的平台,讓團隊成員能夠釐清、管理、維運和自動化部屬企業應用系統和基礎架構
Backstage 的核心目標:
它旨在提供統一的開發平台,讓企業能有效率的開發和管理應用系統。
建立企業的開發平台,有效使用開發資源與提升管理效率。
在既有的基礎設施上,套上一層管理工具,提供統一介面,使團隊擁有一致的開發資源、資訊,如同傳送門匯聚在一起
Backstage 的實現手段: Backstage is aggregator|它著重的是基礎設施的聚合,而非替代 在既有的基礎設施上,套上一層管理工具,使團隊擁有一致的開發資訊界面,並透過高度彈性的外掛功能,實現不同的企業開發需求。
目前屬於 CNCF 的孵化專案

System Architecture overview
There are 3 main components in this architecture:
- The core Backstage UI
- The UI plugins and their backing services
- Databases
整體組成架構:
- Core:由開源專案的核心開發人員所建立的基本功能。
- App:Backstage 應用程式的實例,由應用程式開發人員(通常是公司內的生產力團隊)負責部署和調整。App 將核心功能與額外的插件結合在一起。
- Plugins:使您的 Backstage 應用程式對公司有用的額外功能。插件可以是特定於公司的,也可以是開源和可重用的。

backstage core functionalities
Backstage offers five core functionalities:
- a software catalog
- software templates
- a documentation generator
- a Kubernetes cluster visualizer
- cross-ecosystem search capabilities.
Introducing the Software Catalog
目的
將企業中的所有應用系統,包括網站、API、程式庫和資源,映射到一個集中式目錄。這種集中化旨在幫助團隊管理技術並實現可發現性。
重點功能
Catalog 能持續追蹤每個 Application 的 metadata ( 元數據 )、所有權和依賴關係,從而生成一個軟體圖,其中包含孤立的 entities。
描述
Catalog 非常靈活,可以容納各種 Application,在 Backstage 中稱為 entities。 由於網站與資料處理管道截然不同,因此 entities 可以按 Kind 種類區分。此外,即使在 entities 的種類中,也可以定義 Kind。
如何實現
Catalog 由儲存在 YAML 檔案中的 metadata 提供支持,YAML 檔案描述了每個檔案中單一 entitiy 的 kind ( 種類 )、type ( 類型 )、 name ( 名稱 )、owner ( 所有者 ) 和更多細節。 這些檔案通常儲存在各自的程式碼庫中,因此會經常更新。 有些 entities 類型可能有權威來源,但程式庫中沒有體現,例如,Okta 規定的使用者和團隊。
追蹤所有權和依賴關係是 Catalog 最重要的用例之一。 這些也在描述軟體元件的 YAML 檔案中聲明。 只有一個團隊可以成為元件的擁有者,這個團隊也必須作為一個 entities 在 Catalog 中註冊。 至於依賴關係,Backstage 可以讓你定義元件如何依賴另一個 entities ,以及元件暴露了哪些內容,以便其他人可以使用它。
根據這些 metadata 繪製的軟體圖可以發現一些問題,例如孤兒 entities ,這意味著它們沒有父 entities 。 此外,由於 Catalog 中存儲了有關所有軟體資產的大量信息,因此您還可以從中了解成熟度準備情況或安全警告等信息。
Introducing the Software Template
目的
Software Template 是一種工具,可幫助您在 Backstage 中建立元件。
Podman Pod Install and configure Backstage database - PostgreSQL
建立工作目錄
$ mkdir -p ~/backstage/{build-image,database,podman-pod,k8s-app}撰寫 PostgreSQL Pod Yaml
$ nano ~/backstage/podman-pod/postgres.yaml檔案內容如下 :
apiVersion: apps/v1
kind: Pod
metadata:
name: postgres
spec:
containers:
- name: postgres
image: postgres:13.2-alpine
ports:
- containerPort: 5432
hostPort: 5432
env:
- name: POSTGRES_USER
value: "bigred"
- name: POSTGRES_PASSWORD
value: "bigred"建立並測試 PostgreSQL Pod
$ sudo podman play kube ~/backstage/podman-pod/postgres.yaml檢視 Pod 運作狀態
$ sudo podman ps -a --pod螢幕輸出 :
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES POD ID PODNAME
6572b0f07e57 localhost/podman-pause:4.5.1-1691040180 19 seconds ago Up 8 seconds 0.0.0.0:5432->5432/tcp ed1a0e48edbc-infra ed1a0e48edbc postgres
8d79400d332e docker.io/library/postgres:13.2-alpine postgres 8 seconds ago Up 8 seconds 0.0.0.0:5432->5432/tcp postgres-postgres ed1a0e48edbc postgres使用 bigred 帳號登入測試 PostgreSQL
$ sudo podman exec -it postgres-postgres bash
bash-5.1# psql -U $POSTGRES_USER螢幕輸出 :
psql (13.2)
Type "help" for help.
bigred=# \l
List of databases
Name | Owner | Encoding | Collate | Ctype | Access privileges
-----------+--------+----------+------------+------------+-------------------
bigred | bigred | UTF8 | en_US.utf8 | en_US.utf8 |
postgres | bigred | UTF8 | en_US.utf8 | en_US.utf8 |
template0 | bigred | UTF8 | en_US.utf8 | en_US.utf8 | =c/bigred +
| | | | | bigred=CTc/bigred
template1 | bigred | UTF8 | en_US.utf8 | en_US.utf8 | =c/bigred +
| | | | | bigred=CTc/bigred
(4 rows)
bigred=# exit
bash-5.1# exit
exitPodman Pod Install and configure backstage
撰寫 Backstage-Base Dockerfile
$ nano ~/backstage/build-image/Dockerfile檔案內容如下
FROM quay.io/hahappyman/alpine:3.18.3
RUN apk update; apk add -U --update nodejs npm bash git curl python3 make g++ grep nano sudo
RUN npm install --global yarn
RUN echo backstage | npx -y @backstage/create-app@latest
CMD ["bash","-c","sleep infinity"]Build Image
$ sudo podman build --no-cache -t backstage:test-v3 ~/backstage/build-image/撰寫 Pod Yaml 檔
$ nano ~/backstage/podman-pod/backstage.yaml檔案內容如下
apiVersion: v1
kind: Pod
metadata:
name: backstage
spec:
hostNetwork: true
containers:
- name: backstage
image: localhost/backstage:test-v3建立 Pod
$ sudo podman play kube ~/backstage/podman-pod/backstage.yaml檢視 Pod 運作狀態
$ sudo podman ps -a --pod螢幕輸出
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES POD ID PODNAME
5c988d43542e localhost/podman-pause:4.5.1-1691040180 18 minutes ago Up 18 minutes 0.0.0.0:5432->5432/tcp a04d6f726984-infra a04d6f726984 postgres
6b82228580d5 docker.io/library/postgres:13.2-alpine postgres 18 minutes ago Up 18 minutes 0.0.0.0:5432->5432/tcp postgres-postgres a04d6f726984 postgres
b7446c631837 localhost/podman-pause:4.5.1-1691040180 13 minutes ago Up 13 minutes e16d6198a544-infra e16d6198a544 backstage
56c72ba57f21 localhost/backstage:test-v3 bash -c sleep inf... 13 minutes ago Up 13 minutes backstage-backstage e16d6198a544 backstage設定 Backstage
$ sudo podman exec -it backstage-backstage bash
backstage:/# cd backstage && nano -l app-config.yamlapp-config.yaml 要修改的檔案內容如下
## Setup IP Address and organization.Name
1 app:
2 title: Scaffolded Backstage App
3 baseUrl: http://192.168.61.4:3000
...
5 organization:
6 name: Bobo_backstage
...
8 backend:
15 baseUrl: http://192.168.61.4:7007
24 cors:
25 origin: http://192.168.61.4:3000
...
## Setting Up PostgreSQL
30 database:
31 client: pg
32 connection:
33 host: 192.168.61.4
34 port: 5432
35 user: bigred
36 password: bigred
...
## Setting up a GitHub Integration
42 integrations:
43 github:
44 - host: github.com
47 token: XXX
...
## 待確認
76 scaffolder:
77 github:
78 token: XXXapp-config.production.yaml 要修改的檔案內容如下
$ nano -l app-config.production.yaml## Setup IP Address and organization.Name
1 app:
2 # Should be the same as backend.baseUrl when using the `app-backend` plugin.
3 baseUrl: http://192.168.61.4:7007
...
5 backend:
11 baseUrl: http://192.168.61.4:7007
...
## Setting Up PostgreSQL
17 database:
18 client: pg
19 connection:
20 host: 192.168.61.4
21 port: 5432
22 user: bigred
23 password: bigred進入工作目錄並初始化 git
backstage:/backstage# git init設置 git 使用者資訊
backstage:/backstage# git config --global user.email "test@backstage.com"
backstage:/backstage# git config --global user.name "root"將工作目錄追加至 git stage
backstage:/backstage# git add .進行初次 git commit
backstage:/backstage# git commit -m "Initial commit" 安裝相依檔案
backstage:/backstage# yarn install部屬 Backstage
backstage:/backstage# yarn dev &打開瀏覽器,連線至 http://Podman_Host_主機_IP:3000

DropBox
What is Backstage?
Backstage 是 Spotify 開發的開源、可自訂的 IDP 工具,目前由 CNCF 維護
- 戰略目標:
- 透過統一介面,提供團隊一致的開發環境。
- 詳細描述:
- Backstage 實現在統一的介面,進行開發與資源管理,免去跨工具的資訊統合問題,更有效率的開發與管理應用系統,使團隊成員更能掌握目前的開發狀態。
- 戰略目標:
Backstage 核心組件
- TechDocs
- Softwre Catalog
- Softwre Templates
- Search
- Plugin
What is IDP?
IDP|Internal Developer Platform企業為內部開發人員提供的一個平台,用於開發、部署和運營應用系統。幫助開發人員提高生產力、降低成本,並改善應用系統的品質。
IDP 工具的核心關鍵
- 提供效益
- 提高生產力|自動化開發和部署流程,提高開發人員生產力
- 降低成本|減少人工成本,並提高資源利用率
- 改善品質|確保應用程式的品質和可靠性
- 應用工具
- 開發工具|提供 IDE、編輯器、測試工具等開發工具,幫助開發人員快速有效地開發應用程式
- 部署工具|提供 CI/CD 工具、容器化工具等部署工具,幫助開發人員將應用程式部署到生產環境
- 運營工具|提供監控工具、報表工具等運營工具,幫助開發人員管理和監控應用程式的運行狀態
- 提供效益
本機部署流程
Ubuntu 流程:nodejs » 相依套件 » git 初始化 & first commit » yarn 相依檔案安裝與部署 :::spoiler nodejs 環境準備
#更新套件清單
sudo apt update
#安裝相依套件
sudo apt install make python3 g++ build-essential git-all
#安裝 nvm
curl -so - https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
#確認 nvm 版本
nvm -v
0.39.5
#使用 nvm 安裝指定版本 nodejs(LTS)
nvm install v18.17.1
Downloading and installing node v18.17.1...
Downloading https://nodejs.org/dist/v18.17.1/node-v18.17.1-linux-x64.tar.xz...
############################################################################################################################################################################# 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v18.17.1 (npm v9.6.7)
Creating default alias: default -> 18.17.1 (-> v18.17.1)
#指定使用 nodejs 版本
nvm use v18.17.1
Now using node v18.17.1 (npm v9.6.7)
#安裝 yarn
npm install yarn
## Ub Server 22.04 安裝 yarn
npm install --global yarn::: :::spoiler Backstage 安裝
#安裝 backstage
npx @backstage/create-app@latest
...
🥇 Successfully created backstage
All set! Now you might want to:
Install the dependencies: cd backstage && yarn install
Run the app: cd backstage && yarn dev
Set up the software catalog: https://backstage.io/docs/features/software-catalog/configuration
Add authentication: https://backstage.io/docs/auth/::: :::spoiler Backstage 啟用
#進入工作目錄並初始化 git
cd backstage && git init
#設置 git 使用者資訊
git config --global user.email "test@backstage.com"
git config --global user.name "backstage"
#將工作目錄追加至 git stage
git add .
#進行初次 git commit
git commit -m "Initial commit"
#使用 yarn 安裝相依檔案
yarn install
#使用 yarn 部署 backstage
yarn dev
yarn run v1.22.19
$ concurrently "yarn start" "yarn start-backend"
$ yarn workspace backend start
$ yarn workspace app start
$ backstage-cli package start
$ backstage-cli package start
[1] Build succeeded
[0] Loaded config from app-config.yaml
[0] <i> [webpack-dev-server] Project is running at:
[0] <i> [webpack-dev-server] On Your Network (IPv4): http://192.168.115.80:3000/
[0] <i> [webpack-dev-server] Content not from webpack is served from '/home/bigred/backstage/packages/app/public' directory
[0] <i> [webpack-dev-server] 404s will fallback to '/index.html'
[1] Loaded config from app-config.yaml
[1] 2023-09-11T17:56:52.343Z backstage info Found 2 new secrets in config that will be redacted
[1] 2023-09-11T17:56:52.358Z backstage info Created UrlReader predicateMux{readers=azure{host=dev.azure.com,authed=false},bitbucketCloud{host=bitbucket.org,authed=false},github{host=github.com,authed=false},gitlab{host=gitlab.com,authed=false},awsS3{host=amazonaws.com,authed=false},fetch{}
[1] 2023-09-11T17:56:52.399Z catalog info Performing database migration type=plugin
[1] 2023-09-11T17:56:52.991Z auth info Configuring "database" as KeyStore provider type=plugin
[1] 2023-09-11T17:56:53.009Z techdocs info Creating Local publisher for TechDocs type=plugin
[1] 2023-09-11T17:56:53.015Z search info Added DefaultCatalogCollatorFactory collator factory for type software-catalog type=plugin
[1] 2023-09-11T17:56:53.016Z search info Added DefaultTechDocsCollatorFactory collator factory for type techdocs type=plugin
[1] 2023-09-11T17:56:53.017Z search info Starting all scheduled search tasks. type=plugin
[1] 2023-09-11T17:56:53.193Z backstage info Listening on :7007
[1] 2023-09-11T17:56:53.211Z backstage info Task worker starting: search_index_software_catalog, {"version":2,"cadence":"PT10M","initialDelayDuration":"PT3S","timeoutAfterDuration":"PT15M"} type=taskManager task=search_index_software_catalog
[1] 2023-09-11T17:56:53.213Z backstage info Task worker starting: search_index_techdocs, {"version":2,"cadence":"PT10M","initialDelayDuration":"PT3S","timeoutAfterDuration":"PT15M"} type=taskManager task=search_index_techdocs
[0] <i> [webpack-dev-middleware] wait until bundle finished: /
[0] <i> [webpack-dev-middleware] wait until bundle finished: /apple-touch-icon-precomposed.png
[0] <i> [webpack-dev-middleware] wait until bundle finished: /apple-touch-icon.png
[0] <i> [webpack-dev-middleware] wait until bundle finished: /favicon.ico
[0] <i> [webpack-dev-middleware] wait until bundle finished: /apple-touch-icon-precomposed.png
[0] <i> [webpack-dev-middleware] wait until bundle finished: /
[0] <i> [webpack-dev-middleware] wait until bundle finished: /favicon.ico
[0] <i> [webpack-dev-middleware] wait until bundle finished: /apple-touch-icon.png
[1] 2023-09-11T17:56:56.218Z search info Collating documents for software-catalog via DefaultCatalogCollatorFactory type=plugin documentType=software-catalog
[1] 2023-09-11T17:56:56.247Z search info Collating documents for techdocs via DefaultTechDocsCollatorFactory type=plugin documentType=techdocs
[1] 2023-09-11T17:56:56.331Z backstage info ::ffff:127.0.0.1 - - [11/Sep/2023:17:56:56 +0000] "GET /api/catalog/entities?filter=metadata.annotations.backstage.io%2Ftechdocs-ref&fields=kind,namespace,metadata.annotations,metadata.name,metadata.title,metadata.namespace,spec.type,spec.lifecycle,relations&offset=0&limit=500 HTTP/1.1" 200 2 "-" "node-fetch/1.0 (+https://github.com/bitinn/node-fetch)" type=incomingRequest
[1] 2023-09-11T17:56:56.344Z search warn Index for techdocs was not created: indexer received 0 documents type=plugin documentType=techdocs
[1] 2023-09-11T17:56:56.347Z search info Collating documents for techdocs succeeded type=plugin documentType=techdocs
[1] 2023-09-11T17:56:56.353Z backstage info ::ffff:127.0.0.1 - - [11/Sep/2023:17:56:56 +0000] "GET /api/catalog/entities?offset=0&limit=500 HTTP/1.1" 200 - "-" "node-fetch/1.0 (+https://github.com/bitinn/node-fetch)" type=incomingRequest
[1] 2023-09-11T17:56:56.382Z search info Collating documents for software-catalog succeeded type=plugin documentType=software-catalog
[0] webpack compiled successfully
...:::