Makonote

AstroをCloudflare Pagesにデプロイするときのビルド設定

Astroの静的ブログをCloudflare Pagesに載せる場合、最初に迷うのがビルド設定です。

基本はシンプルで、npm run build して dist を公開します。

Astro側の設定

静的サイトとして出すなら、output: 'static' でよいです。

import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://example.com',
  output: 'static',
});

Astroのデフォルトも静的出力ですが、明示しておくと意図が分かりやすくなります。

https://docs.astro.build/en/reference/configuration-reference/#output

Cloudflare Pages側

Cloudflare Pagesの設定は、だいたいこの形です。

Build command: npm run build
Build output directory: dist
Root directory: 空欄

リポジトリ直下にAstroプロジェクトがあるなら、Root directoryは空欄でよいです。

サブディレクトリにAstroを置いている場合だけ、そのディレクトリを指定します。

環境変数

外部APIや秘密情報を使わない静的ブログなら、環境変数は必須ではありません。

ただし、ビルド時にAPIキーやCMSのURLを使うならCloudflare Pages側に設定します。

Astroでは import.meta.env で環境変数を扱えます。

https://docs.astro.build/en/guides/environment-variables/

sitemapと独自ドメイン

独自ドメインで公開する場合、Astroの site には最終的なURLを入れます。

export default defineConfig({
  site: 'https://example.com',
});

@astrojs/sitemap を使っている場合、ここがsitemapのURLにも関係します。

SEOまわりは AstroブログでcanonicalとsitemapとOGPを最初に設定する に分けています。

まとめ

AstroをCloudflare Pagesへ出す設定は、まずこの形です。

  • build command は npm run build
  • output directory は dist
  • root directory は通常空欄
  • 静的ブログなら環境変数は必須ではない
  • site は最終的な独自ドメインにする

WordPressから静的サイトへ移す場合でも、最初はこの最小構成で十分です。

関連記事

参考