結論から書くと、これまでAzureで運用してきたこのブログのホスティング環境を、Cloudflare Pagesへ完全に移行しました。
きっかけはコスト削減と、以前から検討していた継続的デプロイ(CI/CD)の導入、そしてGitHubの本格活用でした。 結果として、運用コストを抑えつつ、記事をプッシュするだけで自動的にデプロイが完了する、非常に快適な環境を構築できました。
目次
移行の背景とCloudflare Pagesを選んだ理由
これまでこのブログは、Azure StorageのStatic Web Siteホスティング機能とAzure CDNを利用して運用していました。
静的サイトジェネレーターには、私の個人的な好みでC#製のStatiqを継続して使用しています。
また、ソースコードの管理はGitを使い、Azure Reposでリポジトリを運用していました。
この構成は、開発環境をWindowsとMacで行き来しても特に支障なく使えており、バックアップの観点からも大きな不満はありませんでした。
しかし、利用していた「Azure CDN Standard from Microsoft (クラシック)」が2027年に廃止されるとの案内がありました。
参考リンク: Azure の更新情報
CDNサービス自体はSSL証明書も無料で、低コストで満足していたのですが、移行先として推奨されているAzure Front Doorには同等の低コストなプランが見当たりませんでした。
これを機に、他のサービスを本格的に検討し始め、以下の理由からCloudflare Pagesが最適だと判断しました。
ドメイン管理との親和性
ブログのドメインをCloudflareで管理していたため、設定の連携がスムーズで相性が良いと考えました。継続的デプロイの導入しやすさ
本格的に活用したかったGitHubと連携させることで、非常に簡単に継続的デプロイの環境を構築できる点が魅力的でした。
これにより、手動でのビルド・デプロイ作業から解放されます。
実際に行った移行の手順
移行作業は非常にシンプルで、以下のステップで完了しました。
リポジトリのフォルダ構成を見直し
まず、ローカルのリポジトリ構成を変更しました。自動デプロイを機能させるため、Statiqが出力する静的サイトの全ファイル(HTML, CSS, JS, 画像など)がpublic
という単一のフォルダに格納されるように設定を見直しました。GitHubにリポジトリを作成 次に、管理のしやすさを考えてGitHub上に新しいOrganizationを作成し、そこにブログ用の新しいリポジトリを作成しました。そして、ローカルのソースコード一式(
public
フォルダを含む)をプッシュします。Cloudflare Pagesの作成と連携 CloudflareのダッシュボードからPagesプロジェクトを新規作成し、先ほど作成したGitHubリポジトリと連携させます。設定は以下のように行いました。
- ビルドコマンド: 空欄(Statiqによるビルドは手元で行い、生成されたファイルをそのままデプロイするため)
- ビルド出力ディレクトリ:
/public
デプロイ監視パスの設定 初回デプロイ完了後、無駄なビルドを実行しないように設定を最適化します。
プロジェクトの「設定」>「ビルド」から、「監視パスを構築する」をpublic/*
に変更しました。
これにより、public
フォルダ以下に変更があった場合(=サイトのコンテンツが更新された場合)にのみ、デプロイが実行されるようになります。
あとは、ローカルで記事を書き、サイトを生成した後にGitHubへプッシュするだけです。これだけで自動的にCloudflare Pagesへデプロイが実行されます。本当に簡単でした。
参考リンク: Overview · Cloudflare Pages docs
まとめと今後の展望
今回の移行により、コスト面での懸念を解消しつつ、Git-Pushをトリガーとした効率的なデプロイフローを確立することができました。
当面はこの構成で運用を続けていく予定ですが、将来的にブログのファイル数が膨大になったり、使用している静的サイトジェネレーター(Statiq)が何らかの理由で使えなくなったりした場合には、また新しい方法を検討し、その際は改めて記事にまとめようと思います。
参考になるかもしれない書籍リンク(アフィリエイトリンクが含まれます)
- Amazon.co.jp: Webフロントエンド ハイパフォーマンス チューニング eBook : 久保田 光則: Kindleストア
- Amazon.co.jp: 個人開発をはじめよう!クリエイター25人の実践エピソード (技術の泉シリーズ(NextPublishing)) eBook : ゆずたそ: Kindleストア