Cloudflare WorkersにAstroで作ったブログをデプロイしてみた


最近、Astroでブログを作成し、Cloudflare Workersにデプロイしてみました。今回はその手順と実際にデプロイしてみた感想をまとめます。

なぜCloudflare Workersを選んだのか

Cloudflare Workersを選んだ理由は以下の通りです:

  • 高速なエッジ配信: 世界中のエッジロケーションから配信されるため、どこからでも高速にアクセスできる
  • 無料プランが充実: 個人ブログであれば無料プランで十分
  • 簡単なデプロイ: GitHub連携で自動デプロイが可能
  • サーバーレス: サーバー管理が不要で、スケーラビリティも自動的に対応

セットアップ手順

1. Cloudflare管理コンソールでテンプレートから作成

Cloudflareの管理コンソールにログインし、Workers & Pagesのセクションから「Create application」を選択します。

テンプレート一覧から「Astro Framework Starter」を選択し、プロジェクトを作成します。これにより、Astroプロジェクトが自動的にセットアップされ、必要な設定(astro.config.mjsのCloudflareアダプター設定やwrangler.jsonなど)が含まれます。

2. GitHubリポジトリとの連携

プロジェクト作成後、GitHubリポジトリと連携する設定を行います。

  1. Cloudflareの管理コンソールで、作成したプロジェクトの設定画面を開く
  2. 「Connect to Git」を選択
  3. GitHubアカウントを認証し、リポジトリを選択
  4. デプロイ設定(ビルドコマンドや環境変数など)を確認・設定

3. 自動デプロイの設定

GitHub連携を設定すると、以下のような自動デプロイが有効になります:

  • プッシュ時の自動デプロイ: mainブランチ(または指定したブランチ)にプッシュすると自動的にデプロイされる
  • プルリクエストのプレビュー: プルリクエストを作成すると、プレビュー環境が自動的に作成される

これで、コードをGitHubにプッシュするだけで、AstroブログがCloudflare Workersに自動デプロイされます!

実際にデプロイしてみて

良かった点

  1. テンプレートからの簡単セットアップ: 管理コンソールからテンプレートを選ぶだけで、必要な設定がすべて含まれていて非常に便利でした
  2. GitHub連携による自動デプロイ: コードをプッシュするだけで自動的にデプロイされるため、手動でのデプロイ作業が不要
  3. ビルド時間が短い: 静的サイトのビルドが高速で、デプロイまでの時間が短い
  4. エッジ配信の速さ: 実際にアクセスしてみると、どの地域からでも高速に表示される
  5. 無料で使える: 個人ブログであれば、無料プランで十分なパフォーマンスが得られる
  6. プレビュー環境: プルリクエストごとにプレビュー環境が作成されるため、本番環境に影響を与えずにテストできる

注意点

  1. 環境変数の設定: 本番環境で使用する環境変数は、Cloudflareの管理コンソールの設定画面で管理する必要がある
  2. アセットの配信: 静的アセットは自動的に配信されるが、大きなファイルには注意が必要
  3. ビルドサイズ: Workersの制限内に収まるよう、ビルドサイズを確認する
  4. GitHub連携の権限: GitHub連携時に適切な権限を設定する必要がある

まとめ

Cloudflareの管理コンソールでテンプレートから作成し、GitHub連携で自動デプロイする方法は、個人ブログを運営する上で非常に優れた選択肢だと思います。テンプレートから始められる手軽さと、GitHub連携による自動デプロイの便利さ、そして無料で使えるという点が魅力的です。

コードを書いてプッシュするだけで、自動的にデプロイされるワークフローは開発体験を大幅に向上させてくれます。これからもAstroとCloudflare Workersを使って、ブログを継続的に更新していきたいと思います。