本文へスキップ
MITSUKI WORKS

Astro と Cloudflare Pages でコーポレートサイトを作るときに決めたこと

約 3 分で読めます

事業用のサイトを Astro + Cloudflare Pages で作り直しました。技術ブログを兼ねるため「記事が増えても運用が破綻しないこと」を最優先に、いくつか方針を決めています。この記事では、その判断の中身を残しておきます。

なぜ Astro なのか

コーポレートサイトとブログは、ページのほとんどがビルド時に確定します。つまりリクエストごとに JavaScript を実行する理由がない。この前提に一番素直に乗れるのが Astro でした。

比較対象は Next.js と Hugo です。

Astro Next.js Hugo
既定の JS 送出量 0 KB ランタイムを同梱 0 KB
コンポーネント記述 .astro / 各種 UI FW React Go テンプレート
部分的な動的化 アイランド単位 ページ・コンポーネント単位 実質なし

Next.js は動的機能が必要になったときに強い一方、静的ページしかないサイトにはランタイムが過剰でした。Hugo はビルドが速いものの、フォームやテーマ切り替えのような小さな UI をコンポーネントとして書きたい場面で窮屈になります。

Astro なら既定で JS を出さず、必要なところだけ client:* ディレクティブでアイランド化できます。今のところ、クライアントで動いているのはテーマ切り替えとモバイルメニューの数行だけです。

コンテンツはコンテンツコレクションに寄せる

記事は src/content/blog/ に Markdown で置き、src/content.config.ts でスキーマを定義しています。

import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';
import { z } from 'astro/zod';

const blog = defineCollection({
  loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    publishedAt: z.coerce.date(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

frontmatter の書き間違いがビルド時にエラーとして落ちるのが効きます。description を書き忘れた記事が OGP なしで公開される、といった事故が構造的に起きません。

Cloudflare Pages の設定

出力は静的ファイルなので、アダプターは不要です。Pages 側の設定は 3 つだけ。

  • ビルドコマンド: npm run build
  • 出力ディレクトリ: dist
  • Node のバージョン: .node-version に記載（Astro 7 は Node 22.12 以上が必要）

キャッシュとセキュリティヘッダーは public/_headers に置きます。ビルド時にハッシュ付きのファイル名が振られる /_astro/* は、長期キャッシュにして問題ありません。

/_astro/*
  Cache-Control: public, max-age=31536000, immutable

/*
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin

運用してみて分かったこと

プレビューデプロイが効く。 Pages はブランチごとにプレビュー URL を発行します。記事を書くブランチを切っておけば、公開前の見た目を実機で確認できます。スマホでの表示確認が一気に楽になりました。

画像は後回しにしない。 最初は記事に生の PNG を貼っていましたが、Astro の <Image /> 経由に変えるだけで転送量が半分以下になりました。Markdown からでも相対パスで書けば最適化の対象になります。

サイトマップは自動生成に任せる。 @astrojs/sitemap を入れておけば、ページを追加するたびに更新されます。手で XML を書く運用は必ず腐ります。

まとめ

「静的なものは静的なまま配る」という当たり前の方針を、いちばん素直に実装できたのが Astro + Cloudflare Pages の組み合わせでした。記事が 100 本になっても同じ構成で回せる見込みです。

構成の詳細や、既存サイトからの移行について相談したい方はお問い合わせからご連絡ください。