Cloudflare Workers / Pages の Deploy ~ NODE_ENV の罠
publication: 2024/10/25
update:2024/10/28
NODE_ENV に注意
Cloudflare Workers / Pages にデプロイする時 wrangler deploy を使用します。この時、内部では esbuild が実行され、依存している node_modules がバンドルされます。ここで気をつけなければならないのが、コマンド実行時点で NODE_ENV が production になっている必要があるということです。特に React を使っている場合、NODE_ENVがproductionになっていないと開発用のコードがバンドルされ、ビルド後のサイズが肥大化し、パフォーマンスも落ちます。
どのぐらい違うのか
試しに、Remix + Prisma を使用したプログラムをビルドしてみます。
https://github.com/SoraKumo001/remix-global-prisma
ちなみにこのプログラムは、Cloudflare Workers 上の prisma インスタンスを env のバケツリレー無しで使用するサンプルです。
package.json
next-execは指定した env ファイルを読み込んでコマンドを実行するツールです。
1{2 "scripts": {3 "size-test:development": "wrangler deploy --dry-run",4 "size-test:production": " next-exec -c deploy -- wrangler deploy --dry-run"5 }6}
env.deploy
1NODE_ENV=production
実行結果
size-test:development
1⛅️ wrangler 3.80.1 (update available 3.83.0)2-------------------------------------------------------34Total Upload: 2902.99 KiB / gzip: 1061.40 KiBsize-test:production
1⛅️ wrangler 3.80.1 (update available 3.83.0)2-------------------------------------------------------34Total Upload: 2563.51 KiB / gzip: 958.48 KiB
NODE_ENV を設定するだけで、サイズが約 100KB 減りました。
まとめ
Cloudflare Workers / Pages の無料プランは gzip 時のサイズが 1MB までという制限があるので、Remix + Prisma のような構成でなにも設定しないと、問答無用でデプロイを却下されます。
デプロイ時の環境変数設定は忘れないようにしましょう。