tea-e7n.dev

Cloudflare上にデプロイされたAstro静的サイトをcfコマンドベースで動かす

このサイトはCloudflare & Astroの構成でデプロイしています。

2026-09-29にcfというCloudflare APIを操作できるcliが登場しました。 これを利用することにより、従来wranglerコマンドベースでビルドやデプロイしていたところを、cfコマンドベースで代替可能になりました。

ここでは、一通りのマイグレーション方法について確認していこうと思います。

やること

Astroを利用して作成された静的サイトを、cfコマンドを利用してビルド・デプロイできるようにマイグレーションします。

なお、Workers Previewを有効にしているので、PreviewとProductionの両方の環境に対応します。

cfコマンドベースでビルド・デプロイできることにより嬉しいこととしては、Cloudflare側の設定をts形式で扱うことができるようになるというところです。 従来のwranglerを利用する方式ではwrangler.jsoncに設定を書く方式が基本でしたが、cfコマンドベースの方式では設定がts形式で表現されます。 それにより、厳格な型の恩恵を受けながら設定を記述することができるようになります。

cfコマンドベースに移行する

cfコマンドのインストール

次のコマンドでcfコマンドのインストールができます。

> npm i -g cf

> cf -v
🍊☁️  cf · v1.0.0-beta.5 · delegated

wrangler.jsoncの内容をmigrateする

wrangler.jsoncに書かれた設定を、cfコマンドで利用できるcloudflare.config.tsとwrangler.config.tsに移行します。

migration用のコマンドが用意されているので、それに乗っかるのが手っ取り早いです。

> cf migrate

🍊☁️  cf · v1.0.0-beta.5
────────────────────────
Updated 4 file(s):
├─ cloudflare.config.ts
├─ wrangler.config.ts
├─ package.json
└─ package-lock.json

✔ Migration complete.

cfに対応したbuild手順を追加する

cf deploy / cf previews deploy (preview環境のデプロイ) は、Build Outputと呼ばれるフォーマットのファイル群を要求するので、それをデプロイ前に用意しておく必要があります。

ただ現状、@astrojs/cloudflare:v14.3.3 (執筆時点での最新バージョン) はcfが生成した*.config.ts形式に対応していないので、Astro周辺の仕組みだけでは解決することができません。

そこで、今回はastro build -> Build Output生成を別々に行ってあげることで、一旦この問題を解決します。

具体的には、次のnpm scriptを追加しました。

{
  "scripts": {
    ...,
    "build:cf": "npm run build && cf-wrangler build",
    "build:cf:preview": "npm run build && CLOUDFLARE_PREVIEW_BUILD=true cf-wrangler build"
  }
}

buildしてasset類を./distに保存した後、それを使ってBuild Outputを作成します。

cf-wranglerは、cfコマンド内部から呼ばれる委譲用のバイナリとなっており、これによりastro buildした結果からBuild Outputを作成することができます。 また、CLOUDFLARE_PREVIEW_BUILD=trueは、preview用のBuild Outputを作成するために指定しています。

WorkerのBuild設定を変更する

ここまででcfコマンドを利用してデプロイする準備ができたので、WorkerのBuild設定を次のように変更します。

プロダクション環境
プレビュー環境

あとは問題なくデプロイが通ることを確認すればOKです。

wrangler.jsoncを削除する

wrangler.jsoncは*.config.tsに置き換わったので、削除できます。

注意点

一応、今回の方法でcfコマンドによるデプロイを実現して、wrangler.jsoncを削除することには成功しましたが、いくつか注意点があるので記載しておきます。

  • cf-wranglerコマンドに依存している
    • 前述の通りではありますが、cfではなくcf-wranglerという内部コマンドを利用しているので、本来想定されている方法ではないと思います。
  • Preview URLがPR上に表示されない
    • cf previews deployコマンドによりpreview環境のデプロイを行った場合、PR上のPreview URLが表示されないという現象が確認できています。これについてはcf側の対応を待つことになりそうです。
    • PRから直接Previewページにアクセスできないだけであり、Workerのページからアクセスすることは可能です。

まとめ

早速cfコマンドを利用して、既存のAstroプロジェクトのビルド・デプロイ方法を変更してみました。

まだbetaでもありますし、色々足りていない部分も感じてはいますが、今後どんどん進化していくであろうことに期待しておこうと思います。