GitLabでInternalなKrokiサーバーに連携する

毎度、ググっても出てこない小ネタを取り扱っております。
本記事は個人的な見解であり、筆者の所属するいかなる団体にも関係ございません。

0. はじめに

生成AI便利ですっよね。お仕事でもガリガリと生成AI君に何でも相談していますが、仕事もしてくれたら最高じゃないかと思い、自分のプレゼン資料の作成とかを押しつけようとしています。しかし、プレゼン資料には図が書かせません。以外に図を書くのが苦手という人も居ますので、生成AIに図を書かせるのがオススメだったりします。
図を書くのにはパワポとかでポチポチやってもいいのですが、生成AIだったら各種作図記法を知っているので、適当に「あれでー、これで、こんな図」みたいなアホなプロンプトでも何となく図を書く作図記法のテキストを吐き出してくれます。

しかし、それを見るためには各種記法を表現できるサーバーが必要です。幸いにもGitLabサーバーはKrokiサーバーと連携できるので設定した、という話になります。

ちなみに、この記事の半分ぐらいは、Claude 3.5 Sonnetでできています。
そのうちこの記事も学習されて、生成AIがパーフェクトな回答を返してくれるようになるでしょう。

1. GitLabサーバーとKrokiサーバーの関係

KrokiサーバーとGitLabサーバーの関係は以下のような感じです。

krokiサーバーは、外からはアクセスできない内部サーバーです。

2. Krokiサーバーの構築

Krokiサーバーを構築するには、Dockerを使用します。以下の手順で設定を行いました：

1. 必要なディレクトリを作成
2. docker-compose.ymlファイルを作成

2.1 Krokiサーバーを動かすdocker composeのディレクトリ構造

まず、以下のようなディレクトリ構造を作成します：

kroki-compose/

以下のコマンドで作成できます。

mkdir -p ~/src/kroki-compose
touch ~/src/kroki-compose/docker-compose.yml

2.2 docker-compose.ymlファイル

docker-compose.ymlファイルの主な内容は以下の通りです：

docker-compose.yml

services:
  kroki:
    image: yuzutech/kroki
    restart: unless-stopped
    depends_on:
      - mermaid
      - bpmn
      - excalidraw
    environment:
      - KROKI_MERMAID_HOST=mermaid
      - KROKI_BPMN_HOST=bpmn
      - KROKI_EXCALIDRAW_HOST=excalidraw
    ports:
      - "8000:8000"

  mermaid:
    image: yuzutech/kroki-mermaid
    restart: unless-stopped
    expose:
      - "8002"

  bpmn:
    image: yuzutech/kroki-bpmn
    restart: unless-stopped
    expose:
      - "8003"

  excalidraw:
    image: yuzutech/kroki-excalidraw
    restart: unless-stopped
    expose:
      - "8004"

2.4 サーバーの起動

以下のコマンドでサーバーを起動します：

docker compose up -d

起動後、以下のコマンドで正常に動作しているか確認できます：

docker compose ps
curl https://localhost:8000

3. GitLabサーバーのKroki設定

3.1 GitLabの設定ファイルの編集

GitLabサーバー上で、/etc/gitlab/gitlab.rb ファイルを編集します。このファイルにKrokiサーバーへのリバースプロキシ設定を追加します：

/etc/gitlab/gitlab.rb

nginx['custom_gitlab_server_config'] = "location /-/kroki { \n rewrite ^/-/kroki/(.*) /$1 break; \n proxy_cache off; \n proxy_pass https://<Kroki Internal IP Address>:8000; \n}\n"

この設定は以下のことを行います：

1. /-/kroki で始まるリクエストをKrokiサーバーにリダイレクトします。
2. リクエストURLから /-/kroki/ 部分を削除します。
3. プロキシキャッシュを無効にします。
4. Krokiサーバー（この例では https:// ）にリクエストを転送します。

普通に改行すると以下のようになります。

/etc/gitlab/gitlab.rb

nginx['custom_gitlab_server_config'] = "
    location /-/kroki {
        rewrite ^/-/kroki/(.*) /$1 break;
        proxy_cache off;
        proxy_pass https://<Kroki Internal IP Address>:8000;
    }
"

3.2 GitLab設定の再構成と再起動

設定ファイルを編集した後、以下のコマンドを実行してGitLabの設定を再構成し、Nginxを再起動します：

sudo gitlab-ctl reconfigure
sudo gitlab-ctl restart nginx

これにより、新しい設定が適用され、GitLabサーバーがKrokiサーバーと連携できるようになります。

3.3 GitLabサーバー側でKroki設定

設定が正しく行われたかを確認するには、GitLabの管理者設定画面で以下のURLにアクセスします：
GitLabサーバー側でKrokiを利用するための設定は、
https://your-gitlab-server.com/-/admin/application_settings/general ページ内の「Kroki」セクションで、以下の設定を行います。
「Enable Kroki」をオンにします。
「Kroki URL」を設定します。

https://your-gitlab-server.com/-/kroki/

これらの設定が正しく行われていれば、GitLabでKrokiを使用する準備が整います。

4. 使用例と注意点

4.1 使用例

GitLabのマークダウンで以下のように記述することで、Krokiを使用した図表を挿入できます：

mermaid graph TD A[開始] --> B{条件分岐} B -->|Yes| C[処理1] B -->|No| D[処理2] C --> E[終了] D --> E

5. まとめ

以上が、GitLabサーバーとKrokiサーバーの連携設定の概要です。この設定により、生成AIを活用して効率的に図表を作成し、GitLab上で共有することができるようになりました。 技術の進歩は日々めざましいものがありますね。こうした新しいツールや技術を積極的に取り入れることで、私たちの仕事の効率も大きく向上していくことでしょう。 最後に、この記事の内容は個人的な見解であり、筆者の所属するいかなる団体とも関係がないことをお断りしておきます。 皆さんも、ぜひ自分の環境に合わせてカスタマイズしてみてください。それでは、次回のブログでお会いしましょう！

6. 参考

GitLab(オムニバス版)でPlantUMLを有効化する方法 #GitLab - Qiita
https://qiita.com/RYO-4947123/items/cf138989eebf12e45601

Custom nginx config for Kroki - How to Use GitLab / Self-managed - GitLab Forum
https://forum.gitlab.com/t/custom-nginx-config-for-kroki/75034

ER図をマウスを使わないで書きたいし、その内容をGitLabで管理もしたい #Markdown - Qiita
https://qiita.com/arisa5/items/653a95ab3464adac9875