---
title: "Cloudflare上にデプロイされたAstro静的サイトをcfコマンドベースで動かす"
description: "Cloudflare上のAstro静的サイトを、Wranglerからcfコマンドによるビルド・デプロイへ移行しました。設定ファイルの移行と、Production・Preview向けのBuild Output生成手順、現時点での注意点を紹介します。"
createdAt: "2026-09-29"
tags: [cf, Cloudflare, Astro]
---

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

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

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

## やること

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

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

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

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

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

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

```bash
> 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用のコマンドが用意されているので、それに乗っかるのが手っ取り早いです。

```bash
> 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](https://www.npmjs.com/package/@astrojs/cloudflare) (執筆時点での最新バージョン) はcfが生成した`*.config.ts`形式に対応していないので、Astro周辺の仕組みだけでは解決することができません。

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

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

```json
{
  "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を作成するために指定しています。

> [!WARNING]
> 素直に`cf build`を実行するのが本来想定される方法ですが、その場合は`cf`コマンドが自動的に`astro build`を実行します。
> 前述の通り、Astro周辺の仕組みだけでは現状Build Outputを生成できないので、この方法では`cf deploy`などによるデプロイが実行できません。
> ここで紹介している`cf-wrangler`を利用する方法は裏道を掻い潜るような方法なので、無難にAstro側が`cf`形式に対応するか、`cf`にアップデートが入るかのいずれかを待ってもいいと思います。

### WorkerのBuild設定を変更する

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

![プロダクション環境](https://public.tea-e7n.dev/homepage/blog/01m3nwgzmgaz0xh73p49d7v9a2/workers-production-build-settings.png)

![プレビュー環境](https://public.tea-e7n.dev/homepage/blog/01m3nwgzmgaz0xh73p49d7v9a2/workers-preview-build-settings.png)

あとは問題なくデプロイが通ることを確認すれば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でもありますし、色々足りていない部分も感じてはいますが、今後どんどん進化していくであろうことに期待しておこうと思います。