logo hsb.horse
← ブログ一覧に戻る

ブログ

Cloudflare Workersでサブディレクトリをルーティングする設定方法

Cloudflare Workersでサブディレクトリ配下にAstroプロジェクトをデプロイする際の設定手順。wrangler.jsonとastro.configの調整方法を整理。

公開日:
#cloudflare #astro #deployment

このサイトは2025-11-28時点で、2つのAstroプロジェクトで稼働している。

  • hsbt.horse/*: ルート
  • hsbt.horse/tools/*: ツール

ルートのwrangler.jsonは公式ドキュメント通りシンプルに記載すれば問題ない。

{
  "name": "root",
  "compatibility_date": "2025-11-19",
  "route": "hsbt.horse/*",
  "assets": {
    "directory": "./dist/",
    "not_found_handling": "404-page"
  },
  "preview_urls": false
}

一方、toolsの方は一手間加えないと期待通りに動作しなかった。

問題: サブディレクトリのルーティングが404になる

wrangler.jsonを以下のように記載する。

{
  "name": "tool",
  "compatibility_date": "2025-11-19",
  "route": "hsbt.horse/tools/*",
  "assets": {
    "directory": "./dist/",
    "not_found_handling": "404-page"
  },
  "preview_urls": false
}

書き方は問題ないが、このままデプロイすると404エラーになる。

原因は、routeに記載した/tools/*という階層構造に合わせて、dist/tools配下がアップロードされる挙動がwranglerの仕様っぽいから。

解決策: astro.config.mjsでbaseとoutDirを設定する

この方法は、src/pagesをtools/として扱う場合に利用すればよい。

astro.config.mjsでbaseとoutDirを下記の通りにすれば期待通りに動くようになる。

export default defineConfig({
  site: "https://hsbt.horse",
  base: "/tools/",
  outDir: "./dist/tools",
})

baseはAstroが生成するリンクやアセットパスにプレフィックスを追加する。

outDirはビルド出力先を./dist/toolsに変更し、wranglerが期待する階層構造に合わせる。

没案: src/pages/toolsの配下に各種ページを実装していく

astro.config.mjsの設定は変えない。baseは設定しないし、outDirもdistから変更しない。

その代わり、src/pages配下のファイルベースルーティング側に実装規約を定めて対応していくやり方。

src/pages/tools配下に必要なページを実装していくことで設定変更なしで、dist/toolsに各種ページを出力できる。

しかし、このやり方だと_astroディレクトリ(各種バンドルされたJS、CSS、アセット)がdist直下に作成されてしまうため、dist/tools配下のHTMLはデプロイされるが、アセットがデプロイされなくなってしまう。

まとめ

Cloudflare Workersでサブディレクトリ配下にプロジェクトをデプロイする場合、wranglerのroute設定だけでなく、Astro側のbaseとoutDirも調整する必要がある。

階層構造を揃えることで、wranglerが正しくファイルをアップロードできるようになる。