AWS CloudFrontの代わりにCloudflare PagesでHugoをホスティングする

注意: この記事はLLMによって英語から翻訳されたものです。正確性については保証いたしかねますので、あらかじめご了承ください。英語の原文はこちら。

以前、ブログをHugoに移行した際の記事（Goodbye Ghost, Hello Hugo）で、ホスティングにAWS CloudFrontを使っていることに触れた。

AWSはHugoとそのまま連携できるという利点があった（つまり、hugo deployコマンドを使えば他の依存関係は不要だった）が、少しインフラの構築が必要だった。

また、万が一大量のリクエストが来た場合に破産しないよう、Cloudflareの背後に配置していた（それ以外は非常に安く、月に数セント程度だった）。

最近、インフラを簡素化したいと思い、Cloudflare Pagesを見つけて試してみることにした。プロセスは驚くほどスムーズだった。基本的に必要な手順は以下の通り：

Account / Cloudflare Pagesへの書き込み権限を持つAPIキーを作成する
wranglerをインストールし、npx wrangler pages project create my-projectでプロジェクトを作成する（なぜかUIからは作成できない）
Page ProjectのCustom Domainsでドメインをリンクする

注意：APIキーは特定のPagesプロジェクトに限定できず、アカウント全体にのみ適用される。これが懸念される場合は、専用のCloudflareアカウントの使用を検討するとよい。

リポジトリがGitHub上にある場合は、Cloudflareダッシュボードでリポジトリを直接リンクすることで、CI/CDを完全にスキップできる。私はセルフホストのgitリポジトリを使っているが、CI/CD設定に2つのステップを追加するだけで済んだ：

- name: Build Hugo
  run: hugo
- name: Deploy to Cloudflare Pages
  env:
    CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
    CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
  run: npx wrangler pages deploy public --project-name=my-project

デプロイコマンド内のpublicは、Hugoのデフォルト出力ディレクトリ（ウェブサイトが格納される場所）を指している。

CLOUDFLARE_ACCOUNT_IDがわからない場合は、https://dash.cloudflare.com/にアクセスすればhttps://dash.cloudflare.com/{あなたのアカウントID}/home/overviewにリダイレクトされる。

パフォーマンスも良好で（少なくともPageSpeed Insightsによると）、CloudFrontと比較して悪化は見られなかった。

New Blog Pagespeed — Cloudflare Pagesへの移行後のPageSpeed Insightsの結果

全体的に、この構成にはかなり満足している。AWSの請求書が1つ減り（Pagesは無料）、管理するインフラも1つ減った上に、ブログのデプロイは簡単で表示も速いままだ。今のところ見つけた唯一の欠点は、Cloudflare Pagesのアナリティクスがやや弱い点だが、これは致命的な問題ではない。

メールで返信