Cloudflare PagesでGatsbyを動かすのは案外難しい
Cloudflare PagesにGatsbyで作ったウェブサイトを公開しようと思ったら、案外大変だったので紹介したいと思います。
Cloudflare Pages とは
Cloudflare Pages とは Cloudflare が提供する静的なサイトを公開するサービスです。同様のサービスには Vercel や Netlify・Github Pages などがあります。
GitHubなどにpushすると自動的にCloudflareのネットワーク上に公開してくれます。
Cloudflare Pages の特徴はその価格にあります。課金せずとも転送量による制限がないほか、Cloudflare Worker を使いサーバー側で簡単な処理も行えます。Cloudflare Access を使えば簡単な設定でアクセス制限を使えるのも便利です。
詳しい比較はこちら
これを見ると Cloudflare Pages、「向かうところ敵なし」かと思われます…
Gatsby とは
Gatsby は React ベースの静的サイトジェネレーターです。Next.js と異なり静的なサイト開発に重点をおいたフレームワークなのでデプロイ先を選ばずコストが掛かりにくいのが特徴です。
また、他のフレームワークと同様に画像の最適化や Graphql を使ったサイト生成に対応しており更新頻度が少ないサイトを作るならおすすめです。
Cloudflare Pages に Gatsby で作ったサイトを公開してみる
今回はGatsbyで作ったサイトをCloudflare Pagesに公開してみようと思います。
まず、Gatsby のスターターコマンドを使ってとりあえずのサイトを作ります。
作ったサイトをそのまま GitHub にアップロードして、Cloudflare のダッシュボードで簡単な設定を行うと自動的にビルドが行われ公開されます。
Cloudflare 側の設定にも Gatsby のオプションがあり、簡単に設定できることがわかります。
しかし、このままだとデプロイに失敗します。
Cloning repository...
...
Finished restoring cached node modules
Installing NPM modules using NPM version 6.14.4
...
sharp: Installation error: Expected Node.js version >=14.15.0 but found 12.18.0
sharp: Please see https://sharp.pixelplumbing.com/install for required dependencies
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
...
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @lmdb/lmdb-darwin-x64@2.5.3: wanted {"os":"darwin","arch":"x64"} (current: {"os":"linux","arch":"x64"})
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sharp@0.31.2 install: `(node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sharp@0.31.2 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /opt/buildhome/.npm/_logs/2023-01-03T14_30_02_820Z-debug.log
Error during NPM install
Failed: build command exited with code: 1
Failed: an internal error occurred
エラーの原因はココにあります
sharp: Installation error: Expected Node.js version >=14.15.0 but found 12.18.0
sharp というライブラリが Node.js のバージョンが14.15以上を求めているのに、Cloudflare Pages 上にあるライブラリのバージョンが12.18と古いのが原因のようです。
Cloudflare Pages では環境変数や.nvmrcファイルを使って Node.js のバージョンを変えられます。ドキュメントによれば利用できる Node.js のバージョンは17.xまでのようなです。
また、ドキュメントの最後にpackage.jsonに記載されたライブラリが求める Node.js のバージョンを優先すると記載があります。
If you want to set a specific version of a framework your Cloudflare Pages project is using, note that Pages will respect your package manager of choice during your build process. For example, if you use Gatsby.js, your package.json should indicate a version of the gatsby npm package, which will be installed using npm install as your project builds on Cloudflare Pages.
しかし、Gatsby.jsの最新バージョンが必要とするNode.jsのバージョンは18.0.0以上で、Cloudflare Pagesの用意するNode.jsのバージョンを超えてしまっています。
これが原因でパッケージのインストールに失敗しているようです。
解決策
- ローカルでビルドする
- GitHub Actionでビルドする
- Gatsby.jsのバージョンを下げる
1.ローカルでビルドする
Cloudflare Pagesはビルド済みのファイルをアップロードしてサイトを公開することもできます。
ローカルでファイルをビルドし、Cloudflare Pagesのダッシュボードにドラッグ・アンド・ドロップすることで公開できます。
また、Cloudflareの提供するwranglerを使うことでCLIからアップロードすることもできます。
wrangler pages publish ./public
2. GitHub Action
先ほど紹介したように、Cloudflare Pagesはwranglerを使ってデプロイできます。
GitHub Actionを用いてビルドし、その結果をwranglerを使ってCloudflare Pagesにデプロイしてみます。
こちらは、Cloudflare公式のGitHub Actionを利用して簡単に実行できます。（各種環境変数の設定が必要です）
この方法が一番シンプルでおすすめです。
なお、APIトークンを環境変数に設定することでwranglerからCloudflareアカウントを認証できます。
また、wranglerにコミットのハッシュを渡すことでサマリーがGitHubにも表示されるので便利です。
3. Gatsby.jsのバージョンを下げる
最も簡単なのはGatsby.jsのバージョンを下げることです。自分が調べた限りだと4.25.1がCloudflare Pagesで利用できる最も新しいバージョンのようです。
この方法はライブラリが少ないと簡単に済みますが、ライブラリを増やすたびに対応するNode.jsのバージョンを調べる必要があるので少し面倒です。
今後の展望
Cloudflareもこの問題について認識しており、将来的にどんなバージョンでも利用できるようになる計画があります。
しかし、この計画は昨年8月以降進展がありません。
将来的にはCloudflare Pages側でビルドもデプロイもできるといいなと思います。
Discussion
貴重な情報ありがとうございます！Gatsby を Cloudflare にデプロイしようとして失敗して、こちらの記事にたどり着きました。
現在はこちらのdiscussionもcloseにされていて、環境変数の
NODE_VERSIONに任意のバージョンを指定できるようになっていました！