Apple macOSで始めるAstro入門：環境構築からCloudflare Pages自動デプロイまで完全ガイド

Astro は、極限まで JavaScript を削減する「アイランドアーキテクチャ」を採用した次世代の静的サイトジェネレーター（SSG）／Webフレームワークです。優れた表示パフォーマンスと快適な開発体験から、個人ブログから大規模コーポレートサイトまで支持を集めています。

本記事では、Apple macOS 環境においてゼロから Astro の開発環境を構築し、GitHub 経由で Cloudflare Pages に自動デプロイする一連の流れを分かりやすくまとめました。

🚀 開発環境の準備

1. 必要ツールのインストール

Mac用のパッケージマネージャー Homebrew が未導入の場合は、ターミナルで以下を実行します：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

続いて Node.js（Astro が要求する Node 18.17.1 以上）を導入します：

brew install node

インストール結果を確認します：

node --version
npm --version

2. Astro プロジェクトの新規作成

公式の対話型コマンドを実行してプロジェクトを立ち上げます：

npm create astro@latest my-astro-site

ディレクトリへ移動し、必要な依存関係をインストールします：

cd my-astro-site
npm install

🛠️ ローカル開発の流れ

開発用ローカルサーバーの起動

npm run dev

ブラウザで http://localhost:4321 にアクセスします。ホットリロード（HMR）に対応しており、コードの編集結果が瞬時に画面へ反映されます。

ディレクトリ構成の概要

my-astro-site/
├── src/
│   ├── pages/          # ルーティングに対応するページ群
│   ├── layouts/        # 共通レイアウト
│   └── components/     # 再利用可能なUIコンポーネント
├── public/             # 静的配信アセット（favicon・画像等）
└── astro.config.mjs    # Astro 設定ファイル

ページの追加方法

src/pages/ 配下に .astro または .md ファイルを配置するだけで、自動的にルーティングが生成されます：

---
// src/pages/about.astro
---
<html>
  <head>
    <title>会社概要</title>
  </head>
  <body>
    <h1>Astro へようこそ！</h1>
    <p>これは静的にビルドされたページです。</p>
    <p>Mountos Code Lab</p>
  </body>
</html>

📦 プロダクションビルド

静的ファイルの生成

本番配信用に静的アセットをコンパイルします：

npm run build

出力先は dist/ ディレクトリとなり、エッジCDNや静的ホスティングへ即座に配置可能です。

本番環境のローカルプレビュー

npm run preview

☁️ Cloudflare Pages への自動デプロイ

1. デプロイ設定ファイルの準備

プロジェクトルートに wrangler.toml を作成します：

name = "my-astro-site"
compatibility_date = "2024-01-01"

[pages]
build_command = "npm run build"
build_output_dir = "dist"

2. GitHub へのプッシュ

git init
git add .
git commit -m "Initial Astro project"

git remote add origin https://github.com/あなたのユーザー名/あなたのリポジトリ.git
git push -u origin main

3. Cloudflare Pages の設定

1. Cloudflare ダッシュボードにログイン。
2. 左メニュー「Workers & Pages」を開く。
3. 「アプリケーションの作成」→「Pages」を選択。
4. GitHub アカウントとリポジトリを連携。
5. ビルド設定を入力：
   • ビルドコマンド：npm run build
   • ビルド出力ディレクトリ：dist

4. 自動デプロイの確認

以降は GitHub の main ブランチにプッシュするだけで、Cloudflare Pages が自動でビルド＆全世界のエッジへ即時配信してくれます：

git add .
git commit -m "サイト更新"
git push origin main

💡 知っておくと便利なポイント

• カスタムドメインの設定：Cloudflare Pages の「カスタムドメイン」メニューから独自ドメインを無料SSL付きで簡単に接続可能。
• 環境変数の管理：APIキーなどの秘匿情報は「設定」→「環境変数」で安全に管理。
• 軽量かつ無料：個人利用や中規模サイトであれば、Cloudflare Pages の無料枠内で十分運用可能です。

macOS と Astro、そして Cloudflare Pages の組み合わせは、モダンWeb制作における最強の快速スタックです。ぜひ最初のプロジェクトを立ち上げてみてください！