WindowsでAstroブログを作る方法｜初期設定からCloudflare Workers向け設定まで

Astro公式ブログテンプレートの作成、ローカル表示、ビルド、Wrangler設定と、npmのEPERM警告への対応を紹介します。

公開：更新：
WindowsでAstroブログを作る方法｜初期設定からCloudflare Workers向け設定まで

WindowsでAstroを始めようとして、「Node.jsやGitは入れたけれど、このあと何をすればいいのか分からない」「npm run devを実行したらエラーになった」という方に向けた記事です。Astroは導入自体は難しくありませんが、最初はコマンドを実行するフォルダを間違えるだけでも起動できません。

ゆまラボでも実際に1階層上のフォルダからnpm run devを実行し、package.jsonが見つからないENOENTエラーを出しました。この記事では、Windows上でAstroのブログテンプレートを作成し、ローカル表示、本番ビルド、Cloudflare Workersへ公開する前の準備までを、実際につまずいた点も含めて紹介します。

開発環境の準備#

必要なソフトウェアは次の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エラー。

最初に見たときはAstro側で何か壊したかと思ったが、原因はコマンドではなく実行場所の間違い。プロジェクトへ移動して再実行する。

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...'

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

今回のログ末尾には、パッケージ追加の完了と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への登録へ進む。