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

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

## 作業ディレクトリの用意

```terminal
$ git clone git@github.com:DrupalizeMe/react-and-drupal-examples.git
$ cd react-and-drupal-examples
```


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

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

```terminal
$ cd drupal
$ ddev start
```

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

```terminal
$ 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に変更する。[^composerversion]

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

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

```yaml:drupal/.ddev/config.yaml
# ...省略...
composer_version: "1"
# ...省略...
```

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

```terminal
$ ddev composer install
```

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

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

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

```terminal
$ 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`キーをコメントアウトする。[^coreversionrequirement]

```yaml:drupal/web/themes/react_example_theme/react_example_theme.info.yml
core: 8.x
# core_version_requirement: ^8.7.7 || ^9
```

コマンドを再実行。

```terminal
$ 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`キーを次のように編集する。[^cors]

```yaml: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)テーマで必要なライブラリをインストールする。

```terminal
$ 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 にアクセスすると、既にコンテンツが含まれた状態でサイトが表示される。（これは用意されたデータベースをインポートしたため）

![Screen Shot 2021-07-25 at 10.57.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/149d715f-4d69-1894-f8ab-24105ae992c1.png)


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

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

![スクリーンショット 2020-09-14 午後4.51.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/1e73c2c1-96c9-75d7-35bb-04dd43a6ae60.png)

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

![Screen Shot 2021-07-25 at 11.06.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/d262e999-6e94-cde4-b5a7-4aa98178906b.png)


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

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

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

![スクリーンショット 2020-09-14 午前11.46.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79577/ccfe5fc6-f7bc-9909-62c4-ff55bdcb6519.png)

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

[^composerversion]: https://ddev.readthedocs.io/en/stable/users/developer-tools/#ddev-and-composer
[^coreversionrequirement]: https://www.drupal.org/node/3070687
[^cors]: https://www.drupal.org/node/2715637