Blitz プラグインの Remote Deploy で Craft CMS 管理のコンテンツを静的管理してみる #craftcms

このエントリは Craft CMS Advent Calendar 2019 24日目のエントリです。
昨日は「Craft CMS でのマルチサイト:多言語サイト用の翻訳辞書の管理」でした。

年明けの1/16(木)夜に Craft CMS Meetup Tokyo vol.2 やります!

Craft CMS Meetup Tokyo vol.2 Craft CMS の実際のところ | Meetup
https://www.meetup.com/ja-JP/J...

こもりさん@BUN 、 @tinybeans と滅多に揃わないメンバーだと思います!
ぜひご参加いただければとm(_ _)m


Craft CMS のキャッシュ周りをつかっていい感じにして高速化してくれる Blitz  プラグインがある。

Blitz
https://plugins.craftcms.com/b...

この Blitz プラグインの最新版で Netlify などに Deploy できる機能を追加した。
ほぼ静的CMSみたいになるという感じ。これはすごいなー。

フォームや検索といった動的部分は何かしら方法を考える必要はある。

CMS側へ Guest Entry プラグインとかでフォームぽいものを利用するとか、検索は Algolia をつかうとか、それこそ GraphQL で検索するとかもあり得そう。

こちらの記事を読みながら設定する感じになる。

Deploying a Craft site to Netlify with Blitz 3
https://putyourlightson.com/ar...

Netlify のアカウントはあるという前提。

Git周りの準備

Github にリポジトリを一個作る。
空だと Netlify と連携する時面倒なので Readme くらいはいれておく。

Craft のディレクトリに Git 連携するためのディレクトリをひとつ作っておく。user っていうディレクトリを作ってそこにcloneした。

Github のAPITokenも必要になるので作成しておく。

Githubの2段階認証を実施してgitコマンドが使えないときにやったこと - Qiita
https://qiita.com/n_morioka/it...

Netlify にログインしてこのGithubのリポジトリからサイトを作成する。

Craft CMS とは連携していないが、この時点で Github を経由しての Deploy ルートができた。

Blitzの設定

Craft CMS 側で Blitzの設定をしていく。

@root/user/test-blitz

のような感じで clone したリポジトリを選択する。

mixhost の場合 CLI で利用される git のバージョンと ssh して確認できるバージョンが違うらしく最初エラーが出た。

Error connecting to repository: error: Unknown subcommand: get-url usage: git remote [-v | --verbose] or: git remote add [-t <branch>] [-m <master>] [-f] [--tags|--no-tags] [--mirror=<fetch|push>] <name> <url> or: git remote rename <old> <new> or: git remote remove <name> or: git remote set-head <name> (-a | -d | <branch>) or: git remote [-v | --verbose] show [-n] <name> or: git remote prune [-n | --dry-run] <name> or: git remote [-v | --verbose] update [-p | --prune] [(<group> | <remote>)...] or: git remote set-branches [--add] <name> <branch>... or: git remote set-url [--push] <name> <newurl> [<oldurl>] or: git remote set-url --add <name> <newurl> or: git remote set-url --delete <name> <url> -v, --verbose be verbose; must be placed before a subcommand

Blitz の開発元がサポートしてくれて、設定ファイルに追加(developブランチ)することで対応できた。 Thanks, Ben.

config/blitz.php を用意して

'commands' => [
    'git' => '/usr/local/cpanel/3rdparty/lib/path-bin/git',
],

のような感じで設定。この辺はサーバーによるところだと思う。

Blitz のキャッシュ周りの設定

Blitz の設定でこんな感じでキャッシュ対象を設定する。

「ユーティリティ>Blitz Cache」のメニューにいって、 Warm Cache をクリックする。

これでキャッシュがあらかじめ作成される。

最初キャッシュが全部できていないなー、と思っていたので再度ドキュメントを読み直す。

Blitz – Intelligent static page caching for lightning-fast sites.
https://putyourlightson.com/pl...

フロント側のデバックツールバーが出てるとキャッシュされないので、その設定を無効にする。

該当ページをみたときにキャッシュしないようにデータが残ってそうなので、設定を無効にして、キャッシュを消しておいた方がよさそう。

Base URL の設定が @web ではなくちゃんとURLの形になっているかを確認する。

画像の変形(transform)のURLが含まれてるとキャッシュされないとのことなので、そこも外す。

今は試しに触ってるだけだからいいけど、実際にやるとしたらどうやって対応したものか?という気はする。。。

キャッシュが生成されているのを確認

キャッシュが web/cache/blitz/ 以下にできているのを確認する。

アセットなども複製しておく必要があるので、 Assets のところの設定を参考にして環境に合わせて設定する。

Deploying a Craft site to Netlify with Blitz 3
https://putyourlightson.com/ar...

テストサイトなので雑に丸っと複製ってかんじにした。

キャッシュの内容を Deploy する

ここまでやった状態で「ユーティリティ>Blitz Cache 」のメニューにいって、 Deploy to Remote をクリックする。

https://silly-almeida-7b31a9.netlify.com/

ちゃんとdeployされてる。へー!!!

実際に案件でつかうためにはまだまだ調査、研究が必要そうだけど、これはすごいなー。

動的CMSを静的にするならそもそも静的CMS使えば、、という話もあるけど、それはそれ、これはこれという感じで。