ベースパスパターン

_redirects を使って /pj/my-site/ のようなサブパスでサイトを配信する

パターンの概要

多くのプロジェクトでは、ルートではなくサブパス（例：https://example.pages.dev/pj/my-site/）配下でサイトを配信しています。これには以下の3つが必要です：

1. フレームワークのベースパス設定 -- プレフィックス付きの URL を生成するようフレームワークを設定する

2. デプロイディレクトリのネスト -- ビルド済みファイルを適切なサブディレクトリに配置する

3. ルートリダイレクト -- / からサブパスへリダイレクトする _redirects ファイル

Astro の設定

Astro の設定で base を指定します：

// astro.config.ts
export default defineConfig({
  output: "static",
  base: "/pj/my-site",
});

デプロイディレクトリのセットアップ

CI でデプロイ前にネスト構造を作成します：

mkdir -p deploy/pj/my-site
cp -r dist/* deploy/pj/my-site/
echo '/ /pj/my-site/ 302' > deploy/_redirects
npx wrangler@4 pages deploy deploy --project-name=my-site --branch=main

Astro の出力モードへの対応

Astro は静的出力では dist/ に、SSR では dist/client/ に出力します。両方に対応するには：

if [ -d dist/client ]; then
  cp -r dist/client/. deploy/pj/my-site/
else
  cp -r dist/. deploy/pj/my-site/
fi

_redirects ファイル

_redirects ファイルは、Cloudflare Pages に URL ルーティングを指示します。デプロイディレクトリのルートに配置します：

/ /pj/my-site/ 302

これにより、ルートにアクセスした訪問者を実際のサイトパスにリダイレクトします。

リダイレクトの構文

<source> <destination> <status-code>

• 301 -- 恒久的リダイレクト（ブラウザにキャッシュされる）

• 302 -- 一時的リダイレクト（キャッシュされない）

• 開発中は 302 を、安定したパスには 301 を使用

複数のリダイレクト

URL 構造が変更されたサイトの場合：

/ /pj/my-site/ 302
/pj/my-site/old-path /pj/my-site/new-path 301