HeadlessCMSのDirectusに触れる機会がありました。
標準機能では実現できないことがあったので拡張機能(Extensions)を実装した際の記録です。
本記事ではExtensionの実装からインストールするまでの流れを纏めます。

前提

・作業端末にはnodejsがインストール済みであること
・DirectusはSelf-Hostingで起動していること

プロジェクトの作成

プロジェクトを展開するディレクトリで以下のコマンドを実行する。

npx create-directus-extension@latest

実行すると対話形式で以下のことを聞かれる。

Extensionのタイプ
- 公式ドキュメントを参照して拡張機能のタイプを指定
プロジェクト名
- 拡張機能のプロジェクト名
開発言語
- javascript/typescriptから選択
依存関係の自動インストール
- Yes/Noから選択

上記の対話スクリプトを実施すると、HelloWorldをレスポンスするサンプルコードが生成される。

プロジェクトのビルド

まずはサンプルコードをそのままビルドしてみる。
プロジェクトのルートディレクトリで以下のコマンドを実行する。

npm run build

ビルドに成功するとdistというフォルダにモジュールが生成される。

Directusにビルドモジュールをインストール

上記の作業でビルドしたモジュールをDirectusにインストールしてみる。

Extensionsの格納先確認

Directusを起動するためのdocker-compose.ymlでextensionsの格納先を確認する。
公式ドキュメントに記載のサンプルコードを使用している場合は./extensionsがアタッチされている。

version: "3"
services:
  directus:
    image: directus/directus:10.13.1
    ports:
      - 8055:8055
    volumes:
      - ./database:/directus/database
      - ./uploads:/directus/uploads
      - ./extensions:/directus/extensions
    environment:
      SECRET: "replace-with-secure-random-value"
      ADMIN_EMAIL: "admin@example.com"
      ADMIN_PASSWORD: "d1r3ctu5"
      DB_CLIENT: "sqlite3"
      DB_FILENAME: "/directus/database/data.db"
      WEBSOCKETS_ENABLED: "true"

ビルドモジュールの格納

Extensionsの格納先に拡張機能のプロジェクト名のディレクトリ作成し、ビルドモジュール(distごと)とpackage.jsonを格納する。
ディレクトリは以下のような構造となる。

./extensions
└── {拡張機能のプロジェクト名}
    ├── package.json
    └── dist/

Directusの起動

以下のコマンドでDockerコンテナを起動する。

docker compose up

インストール確認

DirectusにログインしてSettings>Extensionsを開くとインストールされている拡張機能の一覧が確認できる。
先ほどビルドしたプロジェクト(typescript-sample)がenableとなっている。

Endpoint型の拡張機能を作成した場合は、拡張機能のプロジェクト名をURLパスに含めることで、HelloWorldの応答を確認できる。