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の応答を確認できる。
