Kong KonnectのDev Portalは昔のKong Gatewayに付属していたDeveloper Portalと比べるとカスタマイズ性が低い。
ただ、それを補うためにOSSのDev Portalクライアントを使用してカスタマイズする方法が用意されている。
具体的にはWebサーバとしてKonnect-Portalというものをセルフホストで稼働させてKonnectと連携することで、Kong KonnectのDev Portalにラップするような形でUIを化かしてくれるもののようだ。
このKonnect-Portalを試しに動かしてみたときのメモ。
前提環境
以下があるものとする。
- Konnect-Portalが動作するサーバ（今回はUbuntu）
- Konnectのアカウント（トライアル版でOK）
前提パッケージの導入
Konnect-Portalはyarnで動作するため、yarnとyarnの前提となるNode.jsとnpmを導入する。
なおyarn実行時のNode.jsのバージョンに指定があるため、バージョン18を導入する。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
. ~/.bashrc
nvm install 18
sudo npm install --global yarn
Konnect-Portalの起動
Konnect-Portalにはパッケージなどは存在せず、コードをcloneして利用する。
ちなみに利用するブランチによって差があり(参考：Using the Project: Best Practices)、mainブランチはアップデートが早く、releaseブランチは安定版という扱いのようだ。
ただ、今日（'24/5/10）時点で見るとmainの更新は4日前なのに対し、releaseの更新は6ヶ月前とreleaseが停滞しているように見えるので、mainを選んでおいた方が無難かもしれない。
ここではmainブランチで進める。
cloneしてディレクトリ内に入る。
git clone https://github.com/Kong/konnect-portal.git
cd konnect-portal
dependenciesをインストールする。
yarn install --frozen-lockfile
設定ファイルを作成する。
cp .env.example .env
設定ファイル内のVITE_PORTAL_API_URLを設定する。
これはKonnect内で参照できるDev PortalのURLか、独自に用意したドメインのURLを指定する。
ここではDev PortalのURLを使う。
PORTAL_URL=https://xxxx.us.portal.konghq.com
sed -i "s|VITE_PORTAL_API_URL=.*|VITE_PORTAL_API_URL=\'$PORTAL_URL\'|" .env
Konnect-Portalを起動する。外部に公開するためには--hostをつけて起動する。
yarn dev --host
起動したホストのPort5173にアクセスすると、KonnectのDev Portalと同じ画面が表示される。
（なお、今回検証時はDev Portalの認証がKonnect-Portal経由で何故か突破できなかったので、Dev Portal->Settings->Public Portalを有効にして認証を無効にしてアクセスした。）
Productの表示はDev Portalと同じであり、ローカルサーバ内に閉じた単一のWebサービスではなく、Konnect側の情報を表示している事が分かる。
次にカスタマイズできることを確認する。
Appearanceで値を設定していない場合、デフォルトでStart building and innovating with our APIs'というメッセージが表示されるが、これを書き換えてみる。
エディタで./views/ProductCatalogWrapper.vueを開き、以下の文字列定義箇所を適当に書き換える。
primary_header.value = 'Start building and innovating with our APIs'
書き換えると即座にブラウザ上の表示が変わる。
この時のKonnectのDev Portalは以下のようになっている。
ということで、Dev Portalとは別でUIを用意できることが確認できた。
なお、Dev PortalのAppearanceの設定もKonnect-Portalの方に反映される。
いくつかのパターンで試してみたが、どうもAppearanceの設定の方が強くKonnect-Portalの設定は上書きされるように見える。
Konnect-Portalで完全に置き換えたい場合、Appearanceは触らない方が良さそうだ。
結論
Portalの外装をまるっといじれることが確認できた。
見た感じDev Portalのコードがまるまんま別サーバで利用できるような感じになっているようなので、フルカスタマイズしたい人には良さそう。
一方でカスタマイズにはコーディングのノウハウが必須なので、お手軽カスタマイズしたい人はDev PortalのAppearance機能で済ますのが良さそうが。