Next.js for DrupalをCentOSで検証してみた（２）

前回の記事の続きになります。
[Next.js for DrupalをCentOSで検証してみた（１）](https://qiita.com/bassline121/items/a20ab3c0ee99fe131d1d "Next.js for DrupalをCentOSで検証してみた（１）")


前回の記事でサイトの表示やパフォーマンスを確認しました。今度はNext.jsサイトからのログインとコンテンツのCRUDしているかを検証してみます。適宜`Backup and Migrate`でバックアップを取り、手戻りしてもいいように行ってください。

## .env.localの設定
まずNext.jsサイトからログインできるようにするには`.env.local`に下記の記述を追記します。
```diff_php:.env.local
+ #Authentication（Basic）
+ DRUPAL_USERNAME=nextjs
+ DRUPAL_PASSWORD=nextjs
```

## Next.jsでのログイン設定
続いてこちらもDrupalで作成したユーザー名`next.js`でログインできるように設定します。
```diff_php:/lib/drupal.ts
export const drupal = new DrupalClient(
  process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
  {
+   auth: {
+       username: process.env.DRUPAL_USERNAME,
+       password: process.env.DRUPAL_PASSWORD,
+   },
    previewSecret: process.env.DRUPAL_PREVIEW_SECRET,
  }
)
```
## JSON:APIの設定
Drupalサイトドメインに移動します。Next.jsのサイトドメインからDrupalのコンテンツ編集ができるように設定します。はじめにJSON:APIが読み込みのみですので、読み書きできる設定にします。

- [x] Accept all JSON:API create, read, update, and delete operations.


## CORSの設定

```
cp web/sites/default/default.services.yml web/sites/default/services.yml
vim web/sites/default/services.yml
```

```diff_php:/web/sites/default/services.yml
  cors.config:
-    enabled: false
+    enabled: true
    # Specify allowed headers, like 'x-allowed-header'.
-    allowedHeaders: []
+    allowedHeaders: ['*']
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
-    allowedMethods: []
+    allowedMethods: ['GET', 'POST', 'PATCH', 'DELETE']
```

ここで右上の`Log in`からログインを試みてみます。`next.hoge.com`から作成したユーザー名・パスワード`nextjs`でログインしてみます。`Log in`からすると`My account`に切り替わるとログイン出来たことが分かります。

![next-login2023-03-24-20.37.16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/e45de705-df71-5f93-e7d5-6ee5f5ba75d6.jpeg)

はじめにコンテンツが削除できるか確認しましょう。`Delete`ボタンでコンテンツが消えれば成功です。消えたので次は`New Article`で新規登録を行います。

```
Title: test1
Image: 画像を用意します。
Body: test1test1
```

`Create Article`を押したらエラーが表示されました。
![next_upload01-2023-03-25-8.46.17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/1b7d7d5b-6647-65c7-8660-fb03679c24d2.jpeg)

画像のようにパーミッションが与えられていないので、下記のURLからMediaの項目にDrupalのNext.jsロールの権限を与えます。
`/en/admin/people/permissions`

全てでもいずれかでもいいですので有効にします。
- [x] Image: Create new media
- [x] Administer media
- [x] Create media

で`Save permissions`します。

再度試してみると、違うエラーが表示されました。
![next-upload02-2023-03-25-8.48.14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/cafb1902-27a2-5993-582f-237a73ede9bc.jpeg)

下書き（Draft）とbodyのフォーマットについて指摘されました。Draftはパーミッションで権限を付与します。

Content Moderationの箇所で有効にします。
- [x] Editorial workflow: Use Create New Draft transition.
Move content from Draft, Published states to Draft state.


## Text formats and editorsの設定
Next.jsサイトドメインの`/pages/api/articles/index.ts`の104行目くらいからarticleコンテンツタイプの登録についての記述を見るとbodyのformatが`full_html`だと分かります。
```diff_php:/pages/api/articles/index.ts
    // Create the node--article resource with the media--image relationship.
    const article = await drupal.createResource<DrupalNode>(
      "node--article",
      {
        data: {
          attributes: {
            title: fields.title,
            body: {
              value: fields.body,
              format: "full_html",
            },
          },
```
Drupal側で受け付けるフォーマットが一致しないと本文は入りません。
`/en/admin/config/content/formats`からFull HTMLの`Configure`からRolesにNext.jsを追加します。

再度試してみると、記事がDraftで登録が出来ました。
![next-upload03-2023-03-25-9.19.09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/2f8dd0e9-1d37-5444-f8fe-68351489e1f1.jpeg)

Drupal側でも登録されていることが確認出来ましたので、DrupalからPublishedに変更して保存し直します。
![next-upload04-2023-03-25-9.23.52.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/5701789c-e487-7c33-0285-bbd437de706a.jpeg)

Next.jsサイトドメインで確認してみると、TOPページやArticlesのリストにパネルが表示され、test1の`VIEW ARTICLE`から記事の内容が確認できました。
![next-upload05-2023-03-25-10.07.33.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/f64ad64d-77ba-453f-e179-c334aaf23e5f.jpeg)

## nohupコマンドでバックグラウンドで実行
通常ターミナルからログアウトすると、Next.jsのサイトは止まってしまいます。ここでログアウト後もサイトが表示されるようにコマンドを実行します。

```
pwd
/var/www/next.hoge.com
nohup yarn run preview &
```
これでターミナルを閉じた後もNext.jsのサイトが表示されるようになります。
### nohupコマンド実行の確認
```
jobs
[1]+  実行中               nohup yarn run preview &
```
ターミナルからログアウト後に確認したい場合は、ps auxなりps -xのコマンドでプロセスを調べます。プロセス停止するのは`kill 17105`コマンドで停止します。
```
ps aux | grep yarn
root     17105  0.0  0.5 787116 41516 ?        Sl   01:09   0:06 node /bin/yarn run preview

ps -x
17105 ?        Sl     0:11 /usr/bin/node /var/www/next.hoge.com/node_modules/.bin/next start -p 3006
```

## まとめ
Next.jsを利用してexample-umamiを使いましたが、CRUDのU（更新）の部分が確認方法がありませんでした。VPS上でDrupalとNext.jsを使ってみて動作検証は出来ましたのでヨシとします。慣れもあるかもしれませんがワタシ的にはNext.jsなどのフロントエンドの開発は、プロジェクトのドキュメントがないと進捗が遅くなると感じました。静的ファイルで出力したサイトは十分にサイトパフォーマンスがありますが経験値が物をいうサイト完成させるまで時間を要すことも納得です。複雑化するWebのレンダリング手法ですが、最近ではコンポーネント単位（Drupalではブロック単位）を意識して作るのも一つの手段ですね。