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

前回の記事の続きになります。
Next.js for DrupalをCentOSで検証してみた（１）

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

.env.localの設定

まずNext.jsサイトからログインできるようにするには.env.localに下記の記述を追記します。

.env.local

+ #Authentication（Basic）
+ DRUPAL_USERNAME=nextjs
+ DRUPAL_PASSWORD=nextjs

Next.jsでのログイン設定

続いてこちらもDrupalで作成したユーザー名next.jsでログインできるように設定します。

/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が読み込みのみですので、読み書きできる設定にします。

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

/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に切り替わるとログイン出来たことが分かります。

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

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

Create Articleを押したらエラーが表示されました。

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

全てでもいずれかでもいいですので有効にします。

Image: Create new media
Administer media
Create media

でSave permissionsします。

再度試してみると、違うエラーが表示されました。

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

Content Moderationの箇所で有効にします。

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だと分かります。

/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で登録が出来ました。

Drupal側でも登録されていることが確認出来ましたので、DrupalからPublishedに変更して保存し直します。

Next.jsサイトドメインで確認してみると、TOPページやArticlesのリストにパネルが表示され、test1のVIEW ARTICLEから記事の内容が確認できました。

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ではブロック単位）を意識して作るのも一つの手段ですね。