やりたいこと
Keycloak の Admin Console に上手く動かない箇所があった ので、自分で直すために環境づくりをする。
前提
- Docker インストール済み
docker execコマンドが使えること
開発環境の起動
今回はすべての作業をコンテナ上で行う。
必要に応じてバインドマウントするなり、ベアメタルで環境構築するなりしてください。
docker run -it --rm -p "8080:8080" -p "5174:5174" ubuntu:24.04必要なパッケージのインストール
Keycloak のビルド・実行には Node.js と Java が必要なのでインストール。
その他、開発に必要なものとして curl, git,
vim をインストールする。
いろいろ
apt update
DEBIAN_FRONTEND=noninteractive apt install -y --no-install-recommends curl git vimOpenJDK
apt install -y openjdk-17-jdk-headlessNodeJS & pnpm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash
\. "$HOME/.nvm/nvm.sh"
nvm install 22
npm install -g pnpmKeycloak のクローン
cd ~/
git clone --depth 1 https://github.com/keycloak/keycloak.git開発用サーバーを起動
フロントエンドの開発用サーバーを起動
別ターミナルで開発用サーバーを実行。
docker exec -it 72cc1a87a306 bash
cd ~/keycloak/js/apps/admin-ui/
pnpm install
pnpm devこれだけでは動作確認ができないので、後述の「バックエンドの開発用サーバー」と連携させる必要がある。
バックエンドの開発用サーバーを起動
別ターミナルで開発用サーバーを実行。
docker exec -it 72cc1a87a306 bash
cd ~/keycloak/js/apps/keycloak-server/
pnpm start --admin-devこれで、先ほど起動した admin-ui の開発サーバーといい感じに連携して、 admin-ui のソース更新を反映してくれるようになる。
ここまでの動作確認
ブラウザで http://localhost:8080 にアクセスすると、
Keycloak のログイン画面になる admin/admin
でログインできる。
フロントエンドの修正
試しに Welcome to keycloak の文字列を変更してみる。
vim ~/keycloak/js/apps/admin-ui/src/dashboard/Dashboard.tsxファイルを開いたら、
t("welcomeTo", { realmDisplayInfo }) となっている箇所を
"Customized!!!!!" に変更する。
変更が反映され、 Welcome to Keycloak
と書かれていた場所が Customized!!!!!
になっているのがわかる。
以上。