Team Blog HubをVercelからCloudflare Pagesに移行しました

VPoTの岩本 (iwamot) です。

ENECHANGEでは、所属エンジニアの個人的なアウトプットをまとめたハブサイト「ENECHANGE Engineers' Articles」を運用しています。

engineer.enechange.co.jp

このハブサイトは、OSSのTeam Blog Hubで構築したものです。これを使うと、メンバーのアウトプットが簡単にまとめられます。

先日、ハブサイトのデプロイ先をVercelからCloudflare Pagesに移行しました。

この記事では、なぜ移行しようと思ったのか、また、どのように移行したのか書いてみます。

なぜ移行しようと思ったのか

デプロイ先をVercelからCloudflare Pagesに移行しようと思ったのは、下記の理由からでした。

Cloudflareについて学べる
費用が節約できる

Cloudflareについて学べる

昨年10月にVPoTを拝命してから、それまで以上に、未導入の技術への関心が強くなってきました。

特にCloudflareについては、ENECHANGEでの利用実績はないものの、エッジでいろんなことができそうで気になるところです。

この四半期で何か試せないかな、と考えたときに浮かんだのが、Team Blog Hubの移行でした。

費用が節約できる

そこで調べてみると、Cloudflare Pagesの無料プランは今のところ商用利用可能であるとわかりました。

一方、Vercelでは、無料プランが非営利の個人利用にのみ制限されているため、有料プランを選んだ経緯があります。

つまり、Cloudflare Pagesに移行できれば、Vercelの有料プランにかかっていた費用がゼロになります。ENECHANGEの場合、もともと月20ドルと少額でしたが、安いにこしたことはありません。

どのように移行したのか

実際に試してみると、いくつか詰まったポイントはあったものの、おおむねスムーズに移行できました。

以下、Vercelでの運用から手を加えたところをまとめてみます。

ビルドが通るようにした
- 環境変数でYarnとNode.jsのバージョンを指定した
- next.config.jsを追加した
定期ビルドのトリガーをGitHub ActionsからCloudflare Workersに変えた

ビルドが通るようにした

単純にビルドを実行したところ、下記のエラーで失敗しました。

13:36:32.186 Detected the following tools from environment: yarn@3.6.3, nodejs@18.17.1
（中略）
13:36:40.509    ➤ YN0002: │ my-app@workspace:. doesn't provide eslint (p91753), requested by @typescript-eslint/eslint-plugin
13:36:40.509    ➤ YN0002: │ my-app@workspace:. doesn't provide eslint (p1d612), requested by @typescript-eslint/parser
13:36:40.510    ➤ YN0002: │ my-app@workspace:. doesn't provide eslint (pcb836), requested by eslint-config-prettier
13:36:40.510    ➤ YN0002: │ my-app@workspace:. doesn't provide eslint (peb4a8), requested by eslint-plugin-prettier
13:36:40.510    ➤ YN0002: │ my-app@workspace:. doesn't provide eslint (p9ef23), requested by eslint-plugin-react-hooks
13:36:40.510    ➤ YN0002: │ my-app@workspace:. doesn't provide eslint (pad563), requested by eslint-plugin-react
13:36:40.510    ➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code

依存関係のエラーですが、これは下記の環境変数を設定することで解決しました。

YARN_VERSION: 1.22.19
NODE_VERSION: 16.20.2

いずれもローカル開発環境のバージョンに合わせた形です。

また、Next.jsのドキュメントを参考に、next.config.jsを追加しました。

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig

これで、ビルドが通るようになりました。

定期ビルドのトリガーをGitHub ActionsからCloudflare Workersに変えた

これだけでもよかったのですが、Cloudflare Workersでも定期ビルドが実行できそうなので、好奇心から試してみました。

まず、Pagesでデプロイフックを作成し、Workersで下記のコードをデプロイしました。

export default {
  async scheduled(event, env, ctx) {
    ctx.waitUntil(handleSchedule());
  },
};

async function handleSchedule() {
 let deployHook = "<デプロイフックのURL>";
 await fetch(deployHook, {
  method: "POST",
  headers: {
   "Content-Type": "application/json",
  },
 });
 return "Called deploy hook!";
};

あとは、WorkersでCronトリガーを設定するだけです。現状は 0 1-12 * * * として、無料プランの月間ビルド数上限の500回を超えないようにしています。

まとめ

以上、Team Blog Hubの移行について、理由と対応内容をまとめてみました。

今回の移行は、狙いどおりCloudflareを学ぶスモールステップになったとともに、費用も節約できたので満足しています。副産物として、Workersに触れる機会にもなりました。

まだ触れていない機能がCloudflareにはいろいろあるので、引き続き試していこうと思っています。「千里の道も一歩から」ですよね。

ENECHANGE Developer Blog

ENECHANGE開発者ブログ