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リポジトリと連携する設定を行います。
- Cloudflareの管理コンソールで、作成したプロジェクトの設定画面を開く
- 「Connect to Git」を選択
- GitHubアカウントを認証し、リポジトリを選択
- デプロイ設定(ビルドコマンドや環境変数など)を確認・設定
3. 自動デプロイの設定
GitHub連携を設定すると、以下のような自動デプロイが有効になります:
- プッシュ時の自動デプロイ:
mainブランチ(または指定したブランチ)にプッシュすると自動的にデプロイされる - プルリクエストのプレビュー: プルリクエストを作成すると、プレビュー環境が自動的に作成される
これで、コードをGitHubにプッシュするだけで、AstroブログがCloudflare Workersに自動デプロイされます!
実際にデプロイしてみて
良かった点
- テンプレートからの簡単セットアップ: 管理コンソールからテンプレートを選ぶだけで、必要な設定がすべて含まれていて非常に便利でした
- GitHub連携による自動デプロイ: コードをプッシュするだけで自動的にデプロイされるため、手動でのデプロイ作業が不要
- ビルド時間が短い: 静的サイトのビルドが高速で、デプロイまでの時間が短い
- エッジ配信の速さ: 実際にアクセスしてみると、どの地域からでも高速に表示される
- 無料で使える: 個人ブログであれば、無料プランで十分なパフォーマンスが得られる
- プレビュー環境: プルリクエストごとにプレビュー環境が作成されるため、本番環境に影響を与えずにテストできる
注意点
- 環境変数の設定: 本番環境で使用する環境変数は、Cloudflareの管理コンソールの設定画面で管理する必要がある
- アセットの配信: 静的アセットは自動的に配信されるが、大きなファイルには注意が必要
- ビルドサイズ: Workersの制限内に収まるよう、ビルドサイズを確認する
- GitHub連携の権限: GitHub連携時に適切な権限を設定する必要がある
まとめ
Cloudflareの管理コンソールでテンプレートから作成し、GitHub連携で自動デプロイする方法は、個人ブログを運営する上で非常に優れた選択肢だと思います。テンプレートから始められる手軽さと、GitHub連携による自動デプロイの便利さ、そして無料で使えるという点が魅力的です。
コードを書いてプッシュするだけで、自動的にデプロイされるワークフローは開発体験を大幅に向上させてくれます。これからもAstroとCloudflare Workersを使って、ブログを継続的に更新していきたいと思います。