メインコンテンツに移動

shirane lab

メインナビゲーション

  • ホーム
  • ブログ
  • Drush
  • 検索

パンくず

  • ホーム
  • ブログ
  • DruxtJS について

DruxtJS について

2021/12/22(水) - 08:11
shirane

この記事は Drupal Advent Calendar 2021 の22日目です。


DruxtJS は、Nuxt.js と Drupal を組み合わせたフル デカップルのサイトや SPA を構築するためのフレームワークです。Drupal をコンテンツ リポジトリとして利用しながら、Nuxt.js ベースの SPA や SSG サイトを構築することができます。

TL;DR: Druxt = DRUpal + nUXT.

Drupal と Vue.js でデカップル構成のシステムを構築する際の有力な選択肢になりそうです。ここでは、DruxtJS 公式サイトの資料に従って、デモサイトの動作とクイックスタートの手順を確認してみた内容をレポートします。

Umami デモ

Drupal のデモ用インストール プロファイルである Umami を利用したデモが用意されています。GitHub 上に、Drupal プロジェクト(バックエンド)と Nuxt プロジェクト(フロント)のリポジトリが公開されています。

  • Umami demo Drupal リポジトリ
  • Umami demo Nuxt リポジトリ

まずは、これをインストールしてみました。どちらも Gitpod 上で動かせるように構成されていますが、今回はローカルの仮想マシン環境で動かすことにします。なお、Gitpod  を利用した Drupal の開発環境については、Drupal Advent Calendar 2021 の5日目「最短でDrupal開発環境(お試し環境)を手に入れる2021」に解説があります。

Drupal(バックエンド)側

通常の Drupal サイトの要領でインストールします。ここでは、Drush とサイトエイリアス @local の定義を追加して次のようにローカル サイトを立ち上げました。

$ cd /var/www
$ git clone https://github.com/druxt/demo-api.druxtjs.org.git
$ cd demo-api.druxtjs.org
$ composer require drush/drush
$ drush @local sql:create
$ drush @local site:install demo_umami

なお、サイトエイリアスの使い方については、先日発売されたインプレスR&D「技術の泉」シリーズの商業誌『Drupal 9 おいしいレシピ集』にまとめましたので、是非そちらもチェックしてみてください。

ここでは、上記プロジェクトの web サブディレクトリを umami.internal という仮想ホストとして構成しました。仮想ホストの設定手順は、こちらの動画とトレーニング教材にまとめています。

 正常にインストールできたら、DruxtJS Umami モジュールを有効にします。

$ drush pm:enable druxt_umami

管理用テーマの Gin がデフォルトに設定された Umami サイトが立ち上がりました。いつもの umami テーマとは違う外観で、ちょっと新鮮な感じです。

インストールした Umami サイト

以下では、このサイト  http://umami.internal/ をリポジトリ サーバーとして利用します。外部から DruxtJS のリソースへのアクセスができるように、匿名ユーザーにアクセス権を設定しておきます。

$ drush role-add-perm anonymous 'access druxt resources'

Nuxt(フロント)側

次にフロント側の Nuxt プロジェクトをインストールします。今回使用した仮想マシン ffdsm には Node.js が入っていないので、まずインストールしておきます。ffdsm は Ubuntu 20.04 ベースなので、Qiita の記事「Ubuntuに最新のNode.jsを難なくインストールする」を参考にさせていただきました。

$ sudo apt install -y nodejs npm
$ sudo npm install n -g
$ sudo n stable
$ sudo apt purge -y nodejs npm
$ exec $SHELL -l

上記手順で無事インストールされました。

$ node -v
v16.13.1
$ npx -v
8.1.2

フロント側のプロジェクトはホームディレクトリにクローンした後、ディレクトリを移動して、nuxt.config.js ファイルをエディタで開きます。

$ cd ~
$ git clone https://github.com/druxt/demo.druxtjs.org.git
$ cd demo.druxtjs.org
$ vi nuxt.config.js

119行目付近にある baseUrl の値を、先に立ち上げたバックエンド側の URL に設定します。

~
   // Druxt Configuration
   druxt: {
     baseUrl: 'http://umami.internal',
     blocks: {
~

パッケージをインストールして起動します。今回は仮想マシン上で動かすので、ホスト OS 側からアクセスできるように環境変数 HOST を 0.0.0.0 に設定しておきます。

$ npm install
$ HOST=0.0.0.0 npm run dev
…
✔ Druxt schema generated                                                      06:26:47
✔ Nuxt files generated                                                        06:26:48

✔ Client
  Compiled successfully in 53.45s

✔ Server
  Compiled successfully in 38.24s

ℹ Waiting for file changes                                                    06:27:45
ℹ Memory usage: 316 MB (RSS: 497 MB)                                          06:27:45
ℹ Listening on: http://10.0.2.15:3000/            

DeprecationWarning の警告が表示されますが、ポート 3000 の待ち受けで Web サーバーが起動しました。ブラウザで http://umami.internal:3000 にアクセスしてみます。

DruxtJS で動作する Umami サイト

一見、普通の Umami サイトのように見えますが、Nuxt ベースのアプリケーションなので、Vue.js devtools でコンポーネントの階層を確認することができます。

Vue.js devtools でコンポーネント階層を見る

設定が不十分なためか、パスが未解決になるリンクもありますが、おなじみの Umami サイトが Nuxt アプリケーションとして再現される様子はインパクトがあります。

フロント側を自作してみる

今度は、Nuxt のプロジェクトを自分で作ってアクセスしてみます。プロジェクト名は druxt にしました。

$ cd ~
$ npx create-nuxt-app druxt

create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in druxt
? Project name: druxt
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username?
? Version control system: None

公式の Getting started with DraxtSite に従って、使用するモジュールのインストールと設定を行います。

$ cd druxt
$ npm i druxt-site
~
$ vi nuxt.config.js

nuxt.config.js ファイルの最後の部分を次のように編集します。

~

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    'druxt-site'
  ],
  druxt: {
    baseUrl: 'http://umami.internal'
  },
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

生成されたプロジェクトには、pages ディレクトリの下にデフォルトの index.vue が生成されていますが、とりあえずファイル名を変更して無効にしておきます。

$ cd pages
$ mv index.vue index.vue.org
$ cd ..

この状態で実行してみます。

$ HOST=0.0.0.0 npm run dev

> druxt@1.0.0 dev
> nuxt

ℹ [HPM] Proxy created: /sites/default/files  -> http://umami.internal         07:16:52

   ╭────────────────────────────────────────╮
   │                                        │
   │   Nuxt @ v2.15.8                       │
   │                                        │
   │   ▸ Environment: development           │
   │   ▸ Rendering:   server-side           │
   │   ▸ Target:      server                │
   │                                        │
   │   Listening: http://10.0.2.15:3000/    │
   │                                        │
   │   Druxt @ v0.15.0                      │
   │   API: http://umami.internal/jsonapi   │
   │                                        │
   ╰────────────────────────────────────────╯

ℹ Preparing project for development                                           07:16:54
ℹ Initial build may take a while                                              07:16:54
ℹ Discovered Components: .nuxt/components/readme.md                           07:16:54
✔ Builder initialized                                                         07:16:54
✔ Druxt schema generated                                                      07:16:55
✔ Nuxt files generated                                                        07:16:55

✔ Client
  Compiled successfully in 26.63s

✔ Server
  Compiled successfully in 23.81s

ℹ Waiting for file changes                                                    07:17:25
ℹ Memory usage: 226 MB (RSS: 345 MB)                                          07:17:25
ℹ Listening on: http://10.0.2.15:3000/                

無事起動したので、ブラウザでアクセスしてみます。

DruxtSite のデフォルト表示

pages のほか、layouts や components の各ディレクトリも空の状態なので、この場合は DruxtSite のデフォルトの出力として、利用可能なブロック コンポーネントがすべて表示されます。必要な情報が不足しているブロックは、枠線の中にコンポーネントのオプションとブロックの設定が表示されるようです。

バックエンド側から JSON:API で提供される情報に基づいて、フロント側で自動的にコンポーネントのインスタンスが用意されるので、それらを利用して、API のドキュメントを見つつレイアウトやページをコーディングしていく流れになるのかなと思います。このあたりは、筆者に Nuxt 力がないため、Theming の具体的な検証には至りませんでした。

Storybook

最後に、Storybook を入れてみました。

$ npm i @nuxtjs/storybook
$ npx nuxt storybook

コンポーネントとして提供されるブロック、メニュー、エンティティ、ビューなどがカタログ化され、ブラウズできます。

Storybook

まとめ

DruxtJS を利用したサイト作成について、導入のところを簡単に試してみました。モジュールを入れて動かすだけで、Drupal バックエンドが提供する各種ブロックが自動的にコンポーネントとして登録され、DruxtJS の API を通じて利用できるようになるので、デカップル構成におけるサイト制作がかなり楽になるのではと思いました。

DruxtJS には、他にも Proxy や JSON:API Client などの API があり、これらを利用してフォーム送信や検索といったアプリケーション機能の実装もサポートされるようです。このあたりは、Nuxt 力をつけてから改めて検証してみたいと思います。

より網羅的な紹介は、DrupalCon Europe 2021 のセッション「MAKERS & BUILDERS - DruxtJS 101- Fully Decoupled Drupal with JSON-API and Nuxtjs」をご覧になるのが良いと思います。

大変興味深い内容なので、おすすめです。

参考資料

  • DruxtJS
  • DruxtJS(drupal.org のプロジェクトページ)
  • Quickstart DruxtSite リポジトリ
  • Umami demo Nuxt リポジトリ
  • Umami demo Drupal リポジトリ
  • Ubuntuに最新のNode.jsを難なくインストールする
  • Nuxt.js の起動時に外部アクセス可能なIPを指定する
DruxtJS
ffdsm
デカップルド
ヘッドレス
Nuxt
Vue
‹ 前の記事次の記事 ›

書籍

『D9 おいしいレシピ集2』がパワーアップして商業誌に

『D9 おいしいレシピ集2』がパワーアップして商業誌に

 書籍の一覧はこちら

タグ一覧

DrushDrupal9Drupal6ffdsmVagrant開発環境Drupal7VirtualBoxComposerコミュニティDocker書籍MigrateDrupal5モジュール勉強会ubercartMariaDBDrupal4ArtisteerCKEditorWindowsDrupal ONSENVueNuxtヘッドレスデカップルドDruxtJSpsyshREPLAnalyticsインストールTomethemingデバッグTwigQuizテーマH5P仮想マシンCentOSMac

サイト運営

シナジークエスト

© shirane lab