第2回 WindowsでAstroブログを作成してCloudflare Workers用に設定する

実作業の環境はWindows。エディターにVisual Studio Code、ターミナルにPowerShellを使用。

開発環境の準備

必要なソフトウェアは次の3つ。

  • Node.js 22.12以上
  • Git for Windows
  • Visual Studio Code

インストール後、PowerShellでバージョン確認を実行。

node -v
npm -v
git --version

各バージョン番号が表示されれば準備完了。VS CodeにはAstro拡張機能も追加しておく。

Astroブログの作成

Astro公式ブログテンプレートの作成コマンドを実行。

cd C:\000pj\astro
npm create astro@latest -- --template blog

対話画面での選択内容はこちら。

プロジェクト名：yumaru-site
テンプレート：blog
依存関係のインストール：Yes
Gitリポジトリの初期化：Yes

作成先は次のフォルダ。

C:\000pj\astro\yumaru-site

最初の起動で作業フォルダを間違える

Astro作成直後、1階層上のC:\000pj\astroでnpm run devを実行。結果はpackage.jsonが見つからないというENOENTエラー。

原因はコマンドではなく、実行場所の間違い。プロジェクトへ移動して再実行する。

cd C:\000pj\astro\yumaru-site
npm run dev

表示されたローカルURLをブラウザで確認。

http://localhost:4321

Astroのブログ画面が開けば、開発サーバーの起動は成功。

本番用ビルドの確認

ローカル表示の次は、本番用ファイルの生成を確認。

npm run build
npm run preview

Complete!とページ数が表示され、distフォルダへHTMLや画像を出力。Cloudflare Workersへ送るのは、このdist内のファイルになる。

Astroによる静的ページの生成結果

Wranglerの追加でEPERM警告

Cloudflare用CLIのWranglerを開発依存関係へ追加。

npm install --save-dev wrangler

ここでnpm warn cleanupとEPERMの警告が発生。

Wranglerインストール時に表示されたnpmのEPERM警告

主なメッセージはこちら。

npm warn cleanup Failed to remove some directories
Error: EPERM: operation not permitted, rmdir '...node_modules...'

これはAstroのソースエラーではなく、Windowsがnode_modules内の一部ファイルを使用中として扱い、npmがフォルダを削除できなかったという警告。

今回のログ末尾には、パッケージ追加の完了とfound 0 vulnerabilitiesを表示。インストール自体は成功しているため、まずはそのまま起動確認を実施。

起動できない場合のみ、Node.jsを停止して依存関係を再構築する。

Get-Process node -ErrorAction SilentlyContinue
Get-Process node -ErrorAction SilentlyContinue | Stop-Process -Force
Remove-Item -LiteralPath 'C:\000pj\astro\yumaru-site\node_modules' -Recurse -Force
npm cache verify
npm install
npm run dev

npm cache clean --forceは不要。npmのキャッシュ確認にはnpm cache verifyを使用する。

Workers Static Assetsの設定

プロジェクト直下へwrangler.jsoncを作成。

{
  "$schema": "./node_modules/wrangler/config-schema.json",
  "name": "yumaru-site",
  "compatibility_date": "2026-09-05",
  "workers_dev": true,
  "preview_urls": true,
  "assets": {
    "directory": "./dist",
    "not_found_handling": "404-page"
  }
}

今回採用したのは静的生成。AstroのCloudflareアダプターを追加せず、事前生成したHTMLを配信する構成になる。

以上でローカル側の準備は完了。次回はGitHubへの登録へ進む。