ブログをCloudflare Pagesに移行した

VPSを解約してランニングコストを下げる

これまで、いくつかのブログやツールをVPS上にdeployしていました。しかし、ツールの実行でメモリを食いつぶしてしまうと、ブログも落ちてしまう問題がありました。VPSのスペックを上げても良いのですが、ランニングコストが増えるので、VPSを解約することにし、別の移行方法を検討していました。

昨年からGCPを使い始めた結果、ツール群はCloud Runに移行することにしました。ツールを使う頻度はそんなに多くないので、Cloud Runのように必要な時だけ費用が発生する方が合理的です。ツールはDocker Containerにしていたので、移行は簡単でした。cronだけ、Cloud Schedulerに移行する手間があったくらいです。ツールが参照するDBもNeonに移行しました。

そして、ブログはCloudflare Pagesに移行することにしました。今回はNext.jsで構築したブログをVPSからCloudflareに移行する方法について説明します。

Next.jsのブログをCloudflareに移動する

Cloudflare Pages

Cloudflare Pagesは、Cloudflareの高速・強固なCDNネットワーク上で動作する、無料枠が非常に強力な静的・フルスタックWebサイトホスティングサービスです。

Cloudflare Pages側でもNext.jsのSSGでページをビルドできるようですが、移行対象のブログはすでにGithub Actionsでビルドしているので、引き続きGithub Actionsを使います。

Cloudflareのdashboardの"Compute & AI"->"Workers & Pages"をクリックし、"Create application"をクリックして実行します。エラー無く実行が完了すると、Discord

"Create a Worker"のページに遷移するといくつかメニューが表示されるのですが、ここはメニュー外の"Get started"をクリックします。

"Get started"のページに遷移するので、"Drag and drop your files"の"Get started"をクリックします。

"Deploy a site by uploading your project"のページに遷移するので、任意のプロジェクト名を入れて"Create project"をクリックします。

"Upload your project assets"というセクションに移動し、プロジェクトのhtmlやcssのアップロードを促されますが、ここでは空のindex.htmlをzipに固めてアップロードしておきます。

"Success! Your project is deployed to Region: Earth"という画面が出てると、プロジェクトの作成が完了です。"Continue to Project"をクリックすると、作成したプロジェクトの画面に遷移します。

Github Actions

Cloudflare PagesへのコンテンツのdeployはGithub Actionsで行います。

まず、2つのsecretsを登録します。1つはCloudflareのAPI Token、もう1つはCloudflareのAccount IDです。

CloudflareのAPI Tokensは、Cloudflareのdashboardの右上のユーザーのアイコンをクリック->"Profile"をクリックして"My Profile"の画面に遷移し、左メニューの"API Tokens"をクリックし、"Create Token"をクリックすると作成できます。

CloudflareのAccount IDは、dashboardのトップページのアカウント名の右の縦三点リーダーをクリックすると、"Copy account ID"というメニューが表示されるので、それをクリックしてクリップボードにコピーします。

この2つの値をGithubのプロジェクトのsecretsに登録します。Next.jsのブログのプロジェクトを選択し、"Settings"をクリック、左メニューの"Secrets and variables"から"Actions"をクリックし、"Repository secrets"を登録します。

あとは.github/workflows/deploy.ymlを以下のように書き換えてpushすれば、Cloudflare Pagesにdeployされます。

name: deploy

on:
  push:
    branches: main
  workflow_dispatch:
  
permissions:
  contents: read
  pages: write
  id-token: write
  
concurrency:
  group: 'pages'
  cancel-in-progress: false
  
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: yarn
      - name: Restore cache
        uses: actions/cache@v4
        with:
          path: .next/cache
          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
          restore-keys: |
            ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-
      - run: yarn
      - run: yarn build
        env:
          EXPORT: 1
          UNOPTIMIZED: 1
      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy out --project-name=(Cloudflare Pages Project Name) --branch=main

最終行の--project-nameには、Cloudflare Pagesのプロジェクト名を指定します。

ドメインとカスタムドメイン設定

CloudflareではCloudflare RegistrarというDNSレジストラサービスがあります。

今回のブログの移設で、Cloudflare Pagesのカスタムドメインを使うので、持っているすべてのドメインを移行することも考えましたが、基本的に1年契約で料金を支払っているので、ちょうど契約の切れ目になっているドメインのみ移行しました。ですので、今回移行したブログのいくつかのDNSは、別のDNSサービスで管理しています。

別のDNSレジストラサービスを使っている場合は、Name ServerをCloudflareのName Serverに変更し、Cloudflare側にDNSレコードを設定します。こうすることで、Cloudflare Pagesのカスタムドメインを使うことができます。

上記のCNAMEの設定は、カスタムドメインの設定によって自動的に行われます。カスタムドメインの設定は、Cloudflare Pagesのプロジェクト画面から設定することができます。 ドメイン名を設定することで、DNSレコードの追加、及びSSLの設定が行われるようになっています。

おわりに

これまでは「いつかやらなきゃ」と思いつつ、サーバー代を払い続けていたVPSの移行。今回、Next.jsへの集約とCloudflare Pagesへの移行を終えたことで、ようやく重い腰を上げることができました。

長くお世話になったサーバーを削除し、コンソール上の「インスタンス」が消えた瞬間は、まるで大掃除を終えた後のような清々しさを感じました。物理的なモノではありませんが、不必要な固定費と管理の手間から解放されるのは、エンジニアにとって何よりのデトックスかもしれません。

もしあなたも「使っていないリソース」や「割に合わないコスト」にモヤモヤしているなら、この機会にクラウドネイティブな構成へ一歩踏み出してみませんか？ 月額料金がほぼゼロになった画面を見ると、きっと想像以上にスッキリした気持ちになれるはずです。