空雲 Blog

Eye catchCloudflare Workers / Pages の Deploy ~ NODE_ENV の罠

publication: 2024/10/25
update:2024/10/28

NODE_ENV に注意

Cloudflare Workers / Pages にデプロイする時 wrangler deploy を使用します。この時、内部では esbuild が実行され、依存している node_modules がバンドルされます。ここで気をつけなければならないのが、コマンド実行時点で NODE_ENVproduction になっている必要があるということです。特に React を使っている場合、NODE_ENVproductionになっていないと開発用のコードがバンドルされ、ビルド後のサイズが肥大化し、パフォーマンスも落ちます。

どのぐらい違うのか

試しに、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-------------------------------------------------------
    3
    4Total Upload: 2902.99 KiB / gzip: 1061.40 KiB
  • size-test:production

    1⛅️ wrangler 3.80.1 (update available 3.83.0)
    2-------------------------------------------------------
    3
    4Total Upload: 2563.51 KiB / gzip: 958.48 KiB

NODE_ENV を設定するだけで、サイズが約 100KB 減りました。

まとめ

Cloudflare Workers / Pages の無料プランは gzip 時のサイズが 1MB までという制限があるので、Remix + Prisma のような構成でなにも設定しないと、問答無用でデプロイを却下されます。

デプロイ時の環境変数設定は忘れないようにしましょう。