そろそろ Cloudflare Pages で Gatsby v5 を使おう
現在（2023/07/17）、 Gatsby の最新のバージョンは 5 です。
これまでは Gatsby を Cloudflare Pages でホスティング（ビルド）しようとすると、 Gatsby は v4 までしか使えない状況でした。
その理由は Cloudflare Pages の Node.js の Supported versions が 17 までだったため、 Node.js 18 が required な Gatsby v5 はビルドが出来ません。
しかし、 2023/05/17 にようやく v2 build system が公開されました！
まだ v1 (これまでのビルドシステム)の完全互換ではないようですが、何と Node.js 18 がデフォルトバージョンとして使用することが出来ます！
| Language | Default version | Supported versions | Environment variable | File |
|---|---|---|---|---|
| Node.js | 18.16.1 | Any version | NODE_VERSION |
.nvmrc, .node-version
|
バージョンアップ
Node.js を v18 へ
ここはえいやで上げていいと思います。
-17.9.1
+18.16.1
Gatsby を v5 へ
Migrating from v4 to v5 の breaking changes を読んでみます。
Minimal Node.js version 18.0.0、Minimal required React version is 18がポイントですが、それ以外でも修正が必要な箇所は直します。
{
"dependencies": {
- "gatsby": "^4.0.0"
+ "gatsby": "^5.0.0"
}
}
{
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}
依存ライブラリのアップデート
gatsby-*のバージョンも最新に上げていきます。
{
"dependencies": {
- "gatsby-plugin-sitemap": "^5.24.0",
- "gatsby-plugin-styled-components": "^5.24.0"
+ "gatsby-plugin-sitemap": "^6.11.0",
+ "gatsby-plugin-styled-components": "^6.11.0"
}
}
ビルド設定
Cloudflare dashboardに入り、 Workers & Pages > in Overview から、対象の Pages プロジェクトを開きます。
次に Settings > Build & deployments を開きます。
Configure (Production|Preview) build system をクリックして、 Version: 2 (latest) を選択し、保存します。
一応 Production, Preview を個別に選択出来ます。
ビルド時の注意点
Gatsby の preset を使って Build command を実行するとgatsby buildになります。
しかし、このまま使うと v2 ではビルドが失敗します。
17:02:22.356 Executing user command: gatsby build
17:02:22.364 /bin/sh: 1: gatsby: not found
17:02:22.365 Failed: Error while executing user command. Exited with error code: 127
17:02:22.375 Failed: build command exited with code: 1
17:02:23.318 Failed: error occurred while running build command
gatsby のコマンドが見つからないようです。
これは、 build image v1 の場合node_modules/.binがPATHに自動的に追加されるようですが、 build image v2 の場合は追加されていないようです。なので、node_modules/.binのコマンドを実行するようなnpm run ~~でビルドします。
{
"scripts": {
"build": "gatsby build"
}
}
上記のように package.json を記載して、npm run buildをしてビルドを行います。
終わりに
まだまだcloudflare pages gatsby 5で検索すると「動かない！」「バージョンに注意」が沢山出ている状況ですが、使える状況になったので、使いましょう。
無視され続きた dependabot の Bump gatsby の PR がようやくマージされました（実際はしておらず手動でバージョンアップしたが）。最新バージョンに合わせられると dependabot が機能し始めるので嬉しいですね。
Discussion