category

Craft CMS を Headless CMS として利用して Gatsby Cloud でプレビューする #craftcms

2021-07-28

Craft CMS をデータソースとして、 Gatsby で静的にビルドするのは SSG(Jamstack)の選択肢の一つではあると思う。

ローカルだけで完結するのであればそこまででもないけれども、CMS を使う以上はオンラインでブラウザから複数ユーザーがアクセスしてとなってくるので、複数ユーザーが利用する想定で、それらの更新・プレビューも対応できる必要が出てくる。

Gatsby Cloud をつかうことで build や配信の処理に加えて、 preview も使うことができる。

Gatsby Cloud 側の設定

Gatsby Cloud 側の設定としては、まず Preview を有効にする。

20210724 1154 01

ローカルで試していた時は、 .env にかいていた設定を、Environment variables に設定する。

20210724 1156 01

あとは、Webhook のURLをメモっておく。

20210724 1156 02

preview ビルドを一度どこかで走らせておいた方が良さそうな感じはする。

Craft CMS 側の設定

Craft CMS 側には Gatsby Helper プラグインがインストールされていると思うので、その設定を変更する。

20210724 1155

あとはセクションのプレビューターゲットの設定を変更する。

20210724 1153 02

preview 用のサイトの preview-XXXXXX.gtsb.io を使う。

これでライブプレビューをすると、更新がはしって

20210724 1153 01

プレビューができるようになる。

20210724 1153

若干時間がかかるので、この辺はスピード優先ならプレビュー用にテンプレートを用意しておいた方がいいんじゃないかとか思わなくもないが、、、、

ひとまずこれでプレビューもできるし、エントリが公開されれれば対象のエントリやトップページなどがビルドされて更新される。

プレビューのアクセス設定

Gatsby Cloud 側でプレビューサイトのアクセス設定がある。

20210724 1152

ここが Public だと問題なくプレビューできるのだが、パスワード認証だったり、ログイン必須にするとプレビューは動かない。

プラグインの方に header 追加したりしてみたが動かなかったのでこの辺はもう少し様子見。
プレビューが一般公開されてるとプレビューの意味がないので、これはちょっと悩ましいところ。