Claude Codeで全部やる
環境構築 ·

AstroとCloudflare Pages、よくわからないまま公開できた

Claude Codeに全部任せてAstroサイトをCloudflare Pagesに公開した記録。自分の理解が追いついていなくても完全AI駆動でどこまでできるか試した話。

AstroとCloudflare Pages、よくわからないまま公開できた
AstroCloudflare PagesClaude Code環境構築

このブログ自体が完全AI駆動で作られている。その中でどうやってAstroサイトをCloudflare Pagesに公開したか、正直に書いておく。

なぜAstroとCloudflare Pagesにしたのか

結論から言うと、Claude Codeに聞いたらそう言われたから。

「静的サイトを無料でホスティングしたい」「Claude Codeで管理しやすい構成にしたい」という条件を伝えたら、AstroとCloudflare Pagesの組み合わせを提案された。自分でフレームワークを比較検討したわけじゃない。

無料というのは大事なポイントで、Cloudflare Pagesは静的サイトなら帯域もビルド数もかなり無料枠が広い。Next.jsとVercelの組み合わせも候補に上がったけど、動的機能は今のところ不要なのでAstroの静的生成で十分という判断になった。これもClaude Codeの判断だけど。

WSL2の環境はこちらの記事で整えた前提で話を進める。

自分はほぼ指示を出しただけだった

このプロジェクトのそもそものモチベーションは「完全AI駆動の開発でどこまでやれるか」を試すことなので、Astroのセットアップも基本はClaude Codeにお任せだった。

正直に言うと、Astroが内部でどういう仕組みで動いているか、今でもよくわかっていない。src/pages/ にファイルを置くとURLが生成される、くらいのことはなんとなくわかるけど、コンテンツコレクションやらastro.config.mjsの細かい設定やら、自分で一から書けと言われたら無理だ。

でも動いている。それでいいのかはわからないけど、とりあえず動いている。

ターミナルコマンドは自分で手打ち

Claude Codeはファイルの編集や生成は自分でやってくれるが、ターミナルコマンドの実行はユーザーの承認が必要なことも多い。詰まったときは自分でコマンドを手打ちした。

主に使ったのはこのあたり:

# WSL2側でプロジェクトに移動
cd /home/okamura/blogs/claude-code-de-zenbu

# 依存パッケージのインストール
npm install

# ビルドして確認
npm run build

コマンド自体はClaude Codeが「これを実行してください」と教えてくれるので、意味がわからなくてもコピペで動いた。

ブラウザ操作は自分担当

Claude Codeがどうしてもできないのがブラウザ操作だ。Cloudflare・Google Analytics・Google Search Consoleへの登録など、アカウント系の操作は全部自分でやった。

これは最初から割り切っていたことで、「AIができないことだけ人間がやる」という役割分担になっている。

完全AI駆動でサイトを公開するまでの流れ

実際の作業の流れをざっくりまとめておく。

1. Astroプロジェクトの初期化

WSL2上でNode.jsとnpmが使える状態から始める。Claude Codeがディレクトリ構成を作って、設定ファイルを生成してくれた。

ポイントはWSL2とOneDriveのデュアルディレクトリ構成。ソースコードはOneDrive（Windowsファイルシステム）に置いてバックアップし、node_modulesやdistなどのビルド成果物はWSL2側に置く。

/mnt/c/Users/username/OneDrive/blogs/my-blog/  ← ソースコード
/home/username/blogs/my-blog/                  ← node_modules・dist

astro.config.mjs はWSL2側に置いて、srcDirとpublicDirでOneDrive側を参照する設定にした:

export default defineConfig({
  site: 'https://my-blog.pages.dev',
  srcDir: '/mnt/c/Users/username/OneDrive/blogs/my-blog/src',
  publicDir: '/mnt/c/Users/username/OneDrive/blogs/my-blog/public',
  outDir: '/home/username/blogs/my-blog/dist/',
  cacheDir: '/home/username/blogs/my-blog/.astro/',
});

最初はrootオプションでOneDriveを指定しようとしたらViteがnode_modulesをOneDrive側で探してエラーになった。srcDir/publicDirで解決したのはClaude Codeが直してくれた。

2. Cloudflare Pagesへのデプロイ

wranglerというCLIツールを使う。初回だけブラウザでCloudflareにログインする作業が必要だった。

# 初回認証（ブラウザが開く）
npx wrangler login

# Cloudflare Pagesにプロジェクトを作成（初回のみ）
npx wrangler pages project create my-blog --production-branch=main

# ビルドしてデプロイ
npm run build
npx wrangler pages deploy dist/ --project-name=my-blog --commit-dirty=true

--commit-dirty=true は、gitのコミットがない状態でも警告を無視してデプロイするオプション。最初これがないとエラーになって、Claude Codeに追加してもらった。

デプロイが完了すると https://my-blog.pages.dev というURLでアクセスできるようになる。カスタムドメインも無料で設定できる。

理解していないのに動いているという感覚

AstroもCloudflare Pagesも、仕組みをちゃんと理解しているかと言われると正直「よくわかっていない」。でも動いている。

成果物がすぐに出てくるのは純粋に楽しい。自分が何時間もドキュメントを読んで試行錯誤しなくても、Claude Codeに任せれば数分で動くものができる。

一方で、自分の理解が追いついていないところで物事が進んでいくのは怖さもある。何かエラーが起きたとき、自分では対処できないケースもある。今のところの答えは「最悪やり直しがきくレベルの開発にとどめておく」だけど、これが正解かどうかはまだわからない。

完全AI駆動の開発実験は続く。何かわかったらまた書く。