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-------------------------------------------------------
  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 のような構成でなにも設定しないと、問答無用でデプロイを却下されます。

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