これは Craft CMS Advent Calendar 2022 21日目の記事です。
Astro と Craft を組み合わせて Jamstack っぽくするのを試してみた。
Astro | Build faster websites
https://astro.build/
Astro にするか Sveltekit にするかというのもあったんだけど、Astro に GraphQL のサンプルがのってたので、とりあえず Astro を触ってみるという目的ありきで。
Data Fetching 🚀 Astro Documentation
https://docs.astro.build/en/gu...
Sveltekit も fetch で問題無く使えるはずだけど。
CMSとの組み合わせは加藤さんがかかれた MT の DataAPI を使って作る方法とかがわかりやすいと思う。
Astro.js と Movable Type Data API を使用して Jamstack な Blog を作ってみる | WWW WATCH
https://hyper-text.org/archive...
Astro をセットアップしつつ、今のブログが Remix で作ったのでその時に入れた Tailwind とか daisyui とかの設定を入れていく
npm create astro@latest cd ./advent_craft_astro npm run dev npx astro add tailwind
何かしらの案件では Node.js つかってるわけだからローカルでの開発環境構築というところでは、やりやすいような気はする。
トップページ
src/pages/index.astro を用意してトップページを作成していく
---
import Layout from '../layouts/Layout.astro';
const response = await fetch("https://example.com/api",
{
method:'POST',
headers: {
'Content-Type':'application/json',
'Authorization': 'hogehoge',
},
body: JSON.stringify({
query: `
query {
entries(limit:50,section:"article",siteId:1,typeId:1){
title
id
url
uri
slug
postDate @formatDateTime(format: "Y-m-d")
... on article_article_Entry{
contentTag{
title
id
}
}
}
}
`,
}),
})
const json = await response.json();
const entries = json.data.entries
---
<Layout title="mersy note by Astro">
<div class="container mx-auto">
<div class="pt-16 lg:pt-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<h1 class="text-2xl font-semibold">mersy note 記事一覧</h1>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<ul>
{entries.map((entry) =>
<li>
<div>{entry.postDate} {entry.contentTag.map((tag) =>
<a href={`/tag/${tag.title}`} prefetch="intent" class="badge badge-outline rounded-none m-2">
{tag.title}
</a>
)}</div>
<a href=`/article/${entry.slug}` class="underline">{entry.title}</a>
</li>
)}
</ul>
</div>
</div>
</div>
</Layout>エンドポイント周りの情報とかはちゃんと .env ファイルにまとめる方がよい（横着。
Layout
記事一覧を50件取ってきて後は map で回す。
タグ一覧ページ
タグ一覧ページもタグの一覧を取ってきてmap でまわすかんじで。
取りあえずデータ取るところだけ抜粋。
const response = await fetch("https://example.com/api",
{
method:'POST',
headers: {
'Content-Type':'application/json',
'Authorization': 'hogehoge',
},
body: JSON.stringify({
query: `
query {
tags(siteId:1){
title
id
}
},
`,
})
})
const json = await response.json();
const tags = json.data.tags詳細ページやタグごとの記事一覧ページはそれぞれURLが動的に変わる。
Routing 🚀 Astro Documentation
https://docs.astro.build/en/co...
URLの一覧を用意しておく必要がある。
詳細ページ
src/pages/article/[slug].astro を用意して、コードの取得部分。
export async function getStaticPaths(){
const response = await fetch("https://example.com/api",
{
method:'POST',
headers: {
'Content-Type':'application/json',
'Authorization': 'hogehoge',
},
body: JSON.stringify({
query: `
query {
entries(limit:3000,section:"article",siteId:1,typeId:1){
slug
}
}
`,
}),
})
const json = await response.json();
const entries = json.data.entries
return entries.map((entry) => ({
params: {
slug: entry.slug,
}
}));
}
const { slug } = Astro.params;
const response2 = await fetch("https://example.com/api",
{
method:'POST',
headers: {
'Content-Type':'application/json',
'Authorization': 'hogehoge',
},
body: JSON.stringify({
query: `
query($slug: [String]) {
entry(siteId:1,section:"article",slug:$slug){
title
id
url
uri
slug
〜〜〜略〜〜〜
}
}
}`,
variables: {
"slug": slug,
},
}),
})
const entry2 = await response2.json();
const entry = entry2.data.entryここは一回の取得の中で、 props に渡すようにすればいいっぽいな。
無駄過ぎ。
タグアーカイブも同様にタグの一覧を取得して、一覧用のデータも取り出す。
取りあえずそんな感じでローカルでトップページ、詳細ページ、タグ一覧ページ、タグアーカイブが生成できた。
ビルド時間の確認
試しにビルドしてみるとこのくらいの時間がかかっている。
03:09:07 PM [build] 2910 page(s) built in 438.96s
前述の通りデータの取得をダブってやってるとかがあるから無駄もかなり多そう。
ビルドのパフォーマンスを重視するなら Movable Type とか PowerCMS の方がよさそう。
静的サイトジェネレータ(SSG)との再構築 (ファイル生成) 時間比較 | PowerCMS X ブログ
https://powercmsx.jp/blog/ssg-...
PowerCMS X だとモデルの作成とテンプレートの作成がだいぶ柔軟にわかれてるので設計する人にも扱いやすいはず。
Cloudflare Pages にデプロイ
テンプレート類を GitHub にコミットしておけば、Cloudflare Pages でも簡単に配信できる。
Cloudflare Pages からプロジェクトを作る際に、該当のリポジトリを選択する。
後の設定はほぼデフォルト。
Deploy your Astro Site to Cloudflare Pages 🚀 Astro Documentation
https://docs.astro.build/en/gu...
ドキュメントにもあるように Environment variables に Node のバージョンの指定だけは必要。
ビルド時間はローカルとほぼ変わらずだけど、ビルドして終わればページが表示される。
https://advent-craft-astro.pag...
こういう所はこの構成が楽と思える所、開発体験の良さなのかもしれない。
サービスに乗っかる安心さとかのメリットと、カスタマイズできないところがあるとかのデメリットなど、判断基準はプロジェクト、組織によりけりだけれども。
導入は簡単そう。
とはいえ、 middleware とかあれこれやろうとすると Astro だと物足りないとかあるのかなぁ。
全然深く触れていないからわかっていないところがほとんどだけど。
色々と触っていって経験はしておかないと。
やはり感じるJS力不足（何もやってないから当然）。