Drupalize.MeのReact & Drupal 8 Code Examplesをddevで起動する

これを起動する：https://github.com/DrupalizeMe/react-and-drupal-examples

作業ディレクトリの用意

$ git clone [e-mail]:DrupalizeMe/react-and-drupal-examples.git
$ cd react-and-drupal-examples

バックエンド(Drupal 8)を起動

事前にdocker、ddevなど必要なライブラリをインストールしておく。

$ cd drupal
$ ddev start

ddevで実行されるcomposerのバージョンはデフォルトで2系が使用される。今回使用するDrupalのバージョンは8系で、これはまだcomposer 2に対応していないので、ddev composer installコマンドが失敗する。

$ ddev composer install

Installing dependencies from lock file (including require-dev)
Verifying lock file contents can be installed on current platform.
Your lock file does not contain a compatible set of packages. Please run composer update.

  Problem 1
    - composer/installers is locked to version v1.7.0 and an update of this package was not requested.
    - composer/installers v1.7.0 requires composer-plugin-api ^1.0 -> found composer-plugin-api[2.1.0] but it does not match the constraint.
  Problem 2
    - drupal/core-composer-scaffold is locked to version 8.8.2 and an update of this package was not requested.
    - drupal/core-composer-scaffold 8.8.2 requires composer-plugin-api ^1.0.0 -> found composer-plugin-api[2.1.0] but it does not match the constraint.
  Problem 3
    - drupal/core-project-message is locked to version 8.8.2 and an update of this package was not requested.
    - drupal/core-project-message 8.8.2 requires composer-plugin-api ^1.1 -> found composer-plugin-api[2.1.0] but it does not match the constraint.
  Problem 4
    - composer/installers v1.7.0 requires composer-plugin-api ^1.0 -> found composer-plugin-api[2.1.0] but it does not match the constraint.
    - drupal/core-recommended 8.8.2 requires composer/installers v1.7.0 -> satisfiable by composer/installers[v1.7.0].
    - drupal/core-recommended is locked to version 8.8.2 and an update of this package was not requested.

composer [install] failed, composer command failed: exit status 2. stderr=

これを回避するために、次のコマンドを実行してddevのcomposerバージョンを1に変更する。¹

$ ddev config --composer-version=1 && ddev start

ddev config --composer-version=1を実行することによって、drupal/.ddev/config.yamlファイルに次の行が自動的に追加される。

drupal/.ddev/config.yaml

# ...省略...
composer_version: "1"
# ...省略...

これで、composer 1系でddev composer installが実行できるようになる。

$ ddev composer install

リポジトリに用意されているデータベースをインポートする。

$ ddev import-db --src=./backup.sql.gz

データベースの更新と、configの再インポートを行うために次のコマンドを実行するが、エラーが発生する。

$ ddev exec "drush updb -y && drush cim -y && drush cr -y"

In InfoParserDynamic.php line 86:

  The 'core_version_requirement' constraint (^8.7.7 || ^9) requires the 'core' key not be set in themes/react_example_theme/react_example_theme.info.yml


updatedb [--cache-clear [CACHE-CLEAR]] [--entity-updates] [--post-updates [POST-UPDATES]] [--no-cache-clear] [--no-post-updates] [-h|--help] [-q|--quiet] [-v|vv|vvv|--verbose] [-V|--version] [--ansi] [--no-ansi] [-n|--no-interaction] [-d|--debug] [-y|--yes] [--no] [--remote-host REMOTE-HOST] [--remote-user REMOTE-USER] [-r|--root ROOT] [-l|--uri URI] [--simulate] [--pipe] [-D|--define DEFINE] [--druplicon] [--notify [NOTIFY]] [--xh-link XH-LINK] [--] <command>

Failed to execute command drush updb -y: exit status 1

エラーを解消するために、テーマ設定ファイルのcore_version_requirementキーをコメントアウトする。²

drupal/web/themes/react_example_theme/react_example_theme.info.yml

core: 8.x
# core_version_requirement: ^8.7.7 || ^9

コマンドを再実行。

$ ddev exec "drush updb -y && drush cim -y && drush cr -y"
 [success] No pending updates.
 [notice] There are no changes to import.
 [success] Cache rebuild complete.

CORSに対応させるために、drupal/web/sites/default/default.services.ymlをコピーしてdrupal/web/sites/default/services.ymlファイルを作成し、cors.configキーを次のように編集する。³

drupal/web/sites/default/services.yml

# ...省略...
  cors.config:
    enabled: true
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: ['x-csrf-token','authorization','content-type','accept','origin','x-requested-with', 'access-control-allow-origin','x-allowed-header', 'cache']
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: ['POST', 'GET', 'OPTIONS', 'DELETE', 'PUT', 'PATCH']
    # Configure requests allowed from specific origins.
    allowedOrigins: ['*']
    # Sets the Access-Control-Expose-Headers header.
    exposedHeaders: false
    # Sets the Access-Control-Max-Age header.
    maxAge: false
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: false

Drupal側で使用しているReact Example Theme(react_example_theme)テーマで必要なライブラリをインストールする。

$ cd web/themes/react_example_theme
$ npm install
$ npm run build
$ npm run build:dev
$ npm run start
$ npm run start:hmr

ブラウザで https://react-tutorials-2.ddev.site にアクセスすると、既にコンテンツが含まれた状態でサイトが表示される。（これは用意されたデータベースをインポートしたため）

ユーザー名：admin、パスワード：admin で設定されているユーザーが存在するのでそれで管理者としてログインしてみる。

https://react-tutorials-2.ddev.site/admin/config/people/simple_oauth に移動して、 generate keys をクリックし、ディレクトリに ../keysを指定する。

drupal/keys ディレクトリに private.key と public.key が生成されているか確認。

フロントエンド(React)を起動

$ cd react-decoupled
$ yarn install
$ yarn run start

ブラウザで http://localhost:3000 にアクセスし、以下の画像のようにDrupalのコンテンツが反映されているか確認。

ユーザー名：react、パスワード：react を入力してログインする。ログインが成功すると You're currently logged in.が表示され、Reactアプリ側でDrupalコンテンツの編集が行えるようになる。コンテンツのどれかに対して、 [edit] ボタンから編集した内容がDrupal側( https://react-tutorials-2.ddev.site )でも反映されているか確認。

1. https://ddev.readthedocs.io/en/stable/users/developer-tools/#ddev-and-composer ↩

2. https://www.drupal.org/node/3070687 ↩

3. https://www.drupal.org/node/2715637 ↩