はじめに
こんにちは。ACS事業部の青木です。
私たちACS事業部では、メインの業務の一つとしてPlatform Engineeringの推進を行っております。
その中で、Platform Engineeringの実現を推進するツールとして内部開発者ポータルを提供する「Backstage」というツールに注目しており、ブログの投稿や登壇活動など積極的に行っています。
私も事業部メンバーの一環として、今回からBackstageをインストール・構築するときの手順についてまとめます。
同じようにBackstageにトライしようとしている方の参考になれば幸いです。
なお、このブログはシリーズで投稿しようと思っています。今後も投稿していきますので、是非チェックしてください。
Backstageとは？
Backstageは、開発者ポータルを構築するためのオープンソースのフレームワークです。
Platform Engineering推進の中で考えられる手段の一つである、「開発環境のセルフサービス化」を実現するためのツールとして注目されています。
開発に必要な情報を一元的に集約することができたり、よく使用される開発環境をテンプレート化して開発者が任意のタイミングで自動構築することもできます。
このブログのゴール
- Backstage をインストールするための環境周りの整備
- 開発モードでの Backstage の起動
前提条件
- 本検証の実行環境は Windows 11 の WSL2 Ubuntu 22.04 上にて作業します。
- 実行環境の管理者アカウントへのアクセスを任意のタイミングで行える状態で作業します。
- git および docker は WSL 上にインストール済みであることとします。
なお、私が検証した際の具体的なバージョンは以下の通りです。
- Windows 11 バージョン24H2
- WSL2 Ubuntu 22.04.3 LTS
環境構築
Backstageの公式ドキュメントを見ながら、インストールのための環境構築から始めましょう。
まずは、Creating your Backstage AppのPrerequisitesを見てみます。
いくつかありますが、少し複雑な記載のあるポイントに絞って解説します。
コマンドラインで利用可能なGNUライクなビルド環境
以下の箇所について説明します。
- A GNU-like build environment available at the command line. For example, on Debian/Ubuntu you will want to have the make and build-essential packages installed. On macOS, you will want to have run xcode-select --install to get the XCode command line build tooling in place.
ここでは、Debian/Ubuntuの説明で記載されている点のみ解説します。
makeおよびbuild-essentialはいずれもLinux 上でソフトウェアのビルドやコンパイルを行う際に必要になるコマンド/パッケージです。
基本的には Linux 上にデフォルトでインストールされていることが多いですが、念のため確認したい方は以下のコマンドで確認することができます。
# makeコマンドの確認 $ which make /usr/bin/make # build-essential パッケージが存在しているかの確認 $ dpkg -l | grep build-essential ii build-essential 12.9ubuntu3 amd64 Informational list of build-essential packages
Node.js Active LTS リリースのインストール
以下の箇所について説明します。
- Node.js Active LTS Release installed using one of these methods:
- Using nvm (recommended)
- Installing nvm
- Install and change Node version with nvm
- Node 20 is a good starting point, this can be installed using nvm install lts/iron
- Binary Download
- Package manager
- Using NodeSource packages
nvm とは
nvm (Node Version Manager) は、Node.js のバージョン管理を行うためのツールです。
Backstage は TypeScript で作られており、ランタイム環境として Node.js を使用しています。
JavaScript や TypeScript で作られたアプリはどのランタイム環境でも正常に動作するわけではないため、一般的に取得したアプリケーションから指定されたバージョンをランタイム環境を必要に応じて用意する必要があります。
Backstage のドキュメントでも nvm を使用しての Node.js のインストールが推奨されているため、特にこだわりが無ければ nvm を使用して Node.js を用意しましょう。
nvmでなければ動かないということはないので、興味のある方は調べてみてください。
Node.js Active LTS リリースとは
Node.js のリリースフェーズは大きく3つ (Current→Active→Mantainance) に分かれており、 Backstage 自身のバージョン管理はこのうちの Activeリリースのタイミングに合わせて行っています。
そのため、Active LTS としてリリースされている Node.js のバージョンをインストールする必要があります。
説明にもある通り、 Node.js のバージョン 20 が推奨されているため、そちらをインストールすると良いでしょう。
Backstage における Node.js のリリースについて詳しくは、以下をご覧ください。
【手順】nvm & Node 20 のインストール
まず、 nvm をインストールします。
# nvm をインストールするコマンドを実行 $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash # ホームディレクトリにある .bashrc を読み込む $ source ~/.bashrc # nvmコマンドを実行 $ nvm --version 0.40.1 # ←バージョン情報が出ればOK
続いて、Node 20 をインストールし、デフォルトで使用するバージョンとして設定しましょう。
# インストール可能な Node 20 のバージョン一覧を取得 $ nvm ls-remote | grep v20 v20.18.1 (Latest LTS: Iron) #←latestのバージョンをインストールする # 対象のバージョンをインストールする $ nvm install 20.18.1 #←vはつけない # デフォルトのランタイムにインストールしたNodeのバージョンを設定(※すでにnvmで他のバージョンのNodeを利用していた場合のみ実施) $ nvm alias default 20.18.1 $ nvm ls -> v20.18.1 # ←インストールしたNodeのバージョンになっていることを確認 system default -> 20.18.1 (-> v20.18.1) # ←デフォルトバージョンにインストールしたNodeのバージョンが指定されていることを確認
これで、 nvm および Node.js のインストールは完了です。
Yarn について
以下の箇所について説明します。
- yarn Installation
- Backstage currently uses Yarn 4.4.1, once you've ran corepack enable you'll want to then run yarn set version 4.4.1
Yarn は Backstage インストール時にそのバージョンに合った Yarn がインストールされるため特別な対応は不要ですが、興味のある方はご覧ください。
Yarn と Corepack について
yarn は Node.js のパッケージマネージャーです。
Node.js の公式パッケージマネージャーといえば npm (Node Package Manager) が有名ですが、 Backstage ではパッケージ依存関係の管理やビルドを実行する際のツールとして主に Yarn を使用します。
パッケージマネージャーツールである Yarn 自体も Node.js と同様、バージョン管理を行うことが推奨されています。
Yarn 自体のバージョン管理を行うツールとして Corepack があり、Yarn の公式ドキュメントでも Corepack を利用したインストールを推奨しています。
Corepack は Node.js にデフォルトで付属していますが、インストールされているか確認する場合は以下のコマンドで確認することもできます。
# corepackがインストールされていることを確認 $ corepack --version 0.29.4
また、Backstageでは2024年1月現在、Yarn 4を使用して開発することが推奨されているようです。
ただ、後述する Backstage のインストールでは自動で対応しているYarnのバージョンが設定されるため、新規インストールする場合はあまり意識しなくてもよいです。
Backstage のインストール
ここまででBackstageをインストールする前の前提事項についての準備が整ったかと思います。
【手順】Backstageのインストールと開発モードでの起動
ここからは、 Backstage のインストールを行っていきます。
以下の手順に従って進めていきましょう。
npx コマンドで @backstage/create-appというnpmパッケージのlatest版を実行します。
実行時、任意のアプリ名を求められますので、自分の考えた名前を入力しましょう。
このコマンドを実行すると、カレントディレクトリにアプリ名のディレクトリが作成され、Backstageの実行に必要なパッケージやファイルの一式のコピーがダウンロードされます。
$ npx @backstage/create-app@latest ? Enter a name for the app [required] <任意のアプリ名> #←ここで、アプリ名（ディレクトリ名）を入力する Creating the app... Checking if the directory is available: checking prj-backstage ✔ Creating a temporary app directory: Preparing files: copying .dockerignore ✔ templating .eslintrc.js.hbs ✔ templating .gitignore.hbs ✔ copying .prettierignore ✔ copying .eslintignore ✔ templating .yarnrc.yml.hbs ✔ copying README.md ✔ copying app-config.local.yaml ✔ copying app-config.production.yaml ✔ templating app-config.yaml.hbs ✔ templating backstage.json.hbs ✔ templating catalog-info.yaml.hbs ✔ templating package.json.hbs ✔ copying playwright.config.ts ✔ copying tsconfig.json ✔ copying yarn.lock ✔ copying README.md ✔ copying yarn-4.4.1.cjs ✔ copying entities.yaml ✔ copying org.yaml ✔ copying template.yaml ✔ copying catalog-info.yaml ✔ copying index.js ✔ copying package.json ✔ copying README.md ✔ templating .eslintrc.js.hbs ✔ copying Dockerfile ✔ copying README.md ✔ templating package.json.hbs ✔ copying index.ts ✔ copying .eslintignore ✔ templating package.json.hbs ✔ templating .eslintrc.js.hbs ✔ copying app.test.ts ✔ copying android-chrome-192x192.png ✔ copying apple-touch-icon.png ✔ copying favicon-16x16.png ✔ copying favicon-32x32.png ✔ copying favicon.ico ✔ copying index.html ✔ copying robots.txt ✔ copying manifest.json ✔ copying safari-pinned-tab.svg ✔ copying App.test.tsx ✔ copying App.tsx ✔ copying apis.ts ✔ copying index.tsx ✔ copying setupTests.ts ✔ copying LogoFull.tsx ✔ copying LogoIcon.tsx ✔ copying Root.tsx ✔ copying index.ts ✔ copying SearchPage.tsx ✔ copying EntityPage.tsx ✔ Moving to final location: moving prj-backstage ✔ fetching yarn.lock seed ✔ Installing dependencies: executing yarn install ✔ executing yarn tsc ✔ 🥇 Successfully created prj-backstage All set! Now you might want to: Run the app: cd prj-backstage && yarn dev Set up the software catalog: https://backstage.io/docs/features/software-catalog/configuration Add authentication: https://backstage.io/docs/auth/
実行が完了されたら、早速 Backstage を開発モードで起動してみましょう。
新規作成されたディレクトリに移動し、yarn devコマンドを実行します。
$ cd <任意のアプリ名のディレクトリ> $ yarn dev
上記コマンド実行後、Webブラウザに自動遷移し、Backstageの画面に遷移します。
見てみると、"example-website"というサンプル用のカタログがありますね。ちょっと見てみましょう。
"example-website"をクリックします。
ざっくりと、以下のようなことが分かると思います。
- About のところでTechDocsのリンクや、ソースコードへのリンクがある（無効化されているためクリックはできない）
- Overview、CI/CD などいくつかのタブがある
- Relations で Backstage 上のリソースの関係性が見ることができる
おわりに
いかがでしたでしょうか。
インストールと起動までであれば、結構簡単だったかと思います。
ただ、今回はインストール後にローカル上で起動をしたのみですので、本格的に利用するためにはいろいろとカスタマイズが必要です。
組織での利用を想定すると、以下のような実装も行う必要があります。
- Backstage が稼働するサーバーが再起動をしてもデータが消えないようにDBをデフォルトのSQLiteからPostgresDBに変更
- 特定のGitHub OrganizationユーザーであればログインできるようにGitHubインテグレーションの導入
また、これらの導入はローカルでの起動、検証を想定していますが、実際にBackstageを運用するにあたってはローカル上ではなくKubernetesクラスタ上などが想定されると思います。
そのあたりについても今後ブログに挙げていけたらと思いますが、まずは、組織で利用することを前提とした Backstage の環境周りの設定を整えていきたいと思います。
本ブログは以上になります。ここまでお読みいただきありがとうございました。
ACS事業部のご紹介
私の所属するACS事業部では、開発者ポータルBackstage、Azure AI Serviceなどを活用し、Platform Engineering＋AIの推進・内製化のご支援をしております。
www.ap-com.co.jp www.ap-com.co.jp www.ap-com.co.jp
また、一緒に働いていただける仲間も募集中です！
我々の事業部のCultureDeckはこちらです。
www.ap-com.co.jp
今年もまだまだ組織規模拡大中なので、ご興味持っていただけましたらぜひお声がけください。
www.ap-com.co.jp
