Craft CMS から Vercel に配信したコンテンツ上で検索出来るようにしてみる #craftcms

これは Craft CMS Advent Calendar 2020 14日目の記事です。

先日 Sprig プラグインを使ったリアクティブコンポーネントの話を書いた。

で、これを試してみていて思ったのだけど、検索周りは js で動いてるのだから Blitz プラグインとかでキャッシュをエッジに配信して使ってるような時に、検索部分の処理は元のCMSに来る前提でよければ使えるんじゃないか？？ということで試してみた。

検索自体をフロント側で全部まかなう場合は json を出しておいてよしなにすれば良さそう。

ひとまず先日のエントリのように Twig のテンプレートで検索出来るようにしておく。

ページのテンプレートに追加

{{ sprig('_components/search') }}

{{ sprig.script }}

コンポーネントのテンプレート

{# Sets a default value if not defined by the `query` input field below #}
{% set query = query ?? '' %}

{# Replaces only the `#results` div on keyup or when the value is changed #}
<input sprig s-trigger="keyup changed" s-replace="#results"
  type="text" name="query" value="{{ query }}" placeholder="Search">

<div id="results">
  {% if query %}
    {% set entries = craft.entries.search(query).all() %}
    {% if entries|length %}
    <ul>
      {% for entry in entries %}
        <li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
      {% endfor %}
    </ul>
    {% else %}
        No results
    {% endif %}
  {% endif %}
</div>

一旦この時点で CMS サーバー側で表示側からの検索が問題ないのを確認しておく。

これでこのまま Vercel に配信しても CORS の設定でひっかかるので、とりいそぎ動作確認用に .htaccess に Header の設定を追加しておく

<IfModule mod_rewrite.c>
    RewriteEngine On

    # Send would-be 404 requests to Craft
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !^/(favicon\.ico|apple-touch-icon.*\.png)$ [NC]
    RewriteRule (.+) index.php?p=$1 [QSA,L]

Header set Access-Control-Allow-Origin "https://blitztest.vercel.app"
Header set Access-Control-Allow-Headers "*"
</IfModule>

これでとりあえず Vercel に配信したページから CMS を検索するような検索を作ることが出来た。

やろうと思えば Vue.js と GraphQL をつかって準備しておけば問題なく出来るとは思う。

色々やり方があるのであってそうな方法を使っていくのでよさそう。