Konnect-PortalでKonnectのDev Portalを書き換える

Kong KonnectのDev Portalは昔のKong Gatewayに付属していたDeveloper Portalと比べるとカスタマイズ性が低い。
ただ、それを補うために[OSSのDev Portalクライアントを使用してカスタマイズする方法](https://docs.konghq.com/konnect/dev-portal/customization/#complete-customization-using-the-open-source-dev-portal)が用意されている。
具体的にはWebサーバとして[Konnect-Portal](https://github.com/Kong/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を導入する。
```sh
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](https://github.com/Kong/konnect-portal?tab=readme-ov-file#using-the-project-best-practices))、`main`ブランチはアップデートが早く、`release`ブランチは安定版という扱いのようだ。
ただ、今日（'24/5/10）時点で見ると`main`の更新は4日前なのに対し、`release`の更新は6ヶ月前と`release`が停滞しているように見えるので、`main`を選んでおいた方が無難かもしれない。
ここでは`main`ブランチで進める。
cloneしてディレクトリ内に入る。
```sh
git clone https://github.com/Kong/konnect-portal.git
cd konnect-portal
```
dependenciesをインストールする。
```sh
yarn install --frozen-lockfile
```
設定ファイルを作成する。
```sh
cp .env.example .env
```
設定ファイル内の`VITE_PORTAL_API_URL`を設定する。
これはKonnect内で参照できるDev PortalのURLか、独自に用意したドメインのURLを指定する。
ここではDev PortalのURLを使う。
```sh
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`をつけて起動する。
```sh
yarn dev --host
```
起動したホストのPort5173にアクセスすると、KonnectのDev Portalと同じ画面が表示される。
（なお、今回検証時はDev Portalの認証がKonnect-Portal経由で何故か突破できなかったので、`Dev Portal`->`Settings`->`Public Portal`を有効にして認証を無効にしてアクセスした。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547981/a8e70fee-ac5f-701d-dc06-e8f60a907262.png)
Productの表示はDev Portalと同じであり、ローカルサーバ内に閉じた単一のWebサービスではなく、Konnect側の情報を表示している事が分かる。



次にカスタマイズできることを確認する。
Appearanceで値を設定していない場合、デフォルトで`Start building and innovating with our APIs'`というメッセージが表示されるが、これを書き換えてみる。
エディタで`./views/ProductCatalogWrapper.vue`を開き、以下の文字列定義箇所を適当に書き換える。
```sh
primary_header.value = 'Start building and innovating with our APIs'
```
書き換えると即座にブラウザ上の表示が変わる。        
![20240510192444.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547981/a797d145-b10a-7704-f2f9-752e6926a14f.png)
この時のKonnectのDev Portalは以下のようになっている。

![20240510192742.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547981/3bfa7800-2e53-a101-e762-6df7a6cb2401.png)

ということで、Dev Portalとは別でUIを用意できることが確認できた。

なお、Dev PortalのAppearanceの設定もKonnect-Portalの方に反映される。
いくつかのパターンで試してみたが、どうもAppearanceの設定の方が強くKonnect-Portalの設定は上書きされるように見える。
Konnect-Portalで完全に置き換えたい場合、Appearanceは触らない方が良さそうだ。


## 結論
Portalの外装をまるっといじれることが確認できた。
見た感じDev Portalのコードがまるまんま別サーバで利用できるような感じになっているようなので、フルカスタマイズしたい人には良さそう。
一方でカスタマイズにはコーディングのノウハウが必須なので、お手軽カスタマイズしたい人はDev PortalのAppearance機能で済ますのが良さそうが。

<!-- sudo apt install xvfb -y
sudo apt install libgbm1 -y
sudo apt install libasound2 -y -->