Skip to content

fix: 開発コンテナの yarn build が開発版の React を同梱しないようにする - #43

Merged
shin4488 merged 1 commit into
mainfrom
fix/build-node-env-production
Oct 4, 2026
Merged

shin4488 merged 1 commit into
mainfrom
fix/build-node-env-production

Conversation

@shin4488

@shin4488 shin4488 commented Oct 4, 2026

Copy link
Copy Markdown
Owner

docker-compose.yml が app サービス全体に NODE_ENV=development を設定していたため、docker compose exec で実行するコマンドがすべてこの値を引き継いでいました。parcel build は既に設定されている NODE_ENV をそのまま使うので、開発コンテナで yarn build を実行すると React などの開発版が同梱されていました。JS は本番(Render)の約 443 kB に対して約 611 kB になり、本番とは異なる成果物ができていました。

変更

  • docker-compose.yml から NODE_ENV=development を削除し、Parcel の既定値に任せるようにしました。再び設定されないよう、理由をコメントに書いています。
  • 空の environment: は compose がエラーにするため、PARCEL_WATCH_INTERVAL の例は environment ブロックごとコメントアウトしました。コメントを外せば、そのまま有効な設定になります。

NODE_ENV を設定しない場合、各コマンドは次の値を使います(node_modules 内の Parcel 2.16.4・Vitest 4.1.11 のソースで確認)。

コマンド 変更前 変更後
yarn dev(parcel serve) development development(Parcel の既定値)
yarn build(parcel build) development production(Parcel の既定値)
yarn test(Vitest) development test(Vitest の既定値。CI と同じ)

HMR は、Parcel が NODE_ENV に関係なく開発サーバーで有効にするため影響を受けません。package.json は変えていないので、Render のビルドにも影響しません。devcontainer も同じ compose ファイルを使うため、同じく直ります。

検証

arm64 の開発コンテナ(Node v24.21.0)で、compose の environment と command をそのまま使う docker compose run により、変更前と変更後のコンテナを作って比べました。

  • compose の設定:docker compose config が通ることを確認しました。コメントアウトを外した場合に PARCEL_WATCH_INTERVAL=100 が有効になることも確認しています。
  • コンテナの NODE_ENV:変更前は development、変更後は未設定です。
  • yarn build:JS は 610.64 kB から 442.94 kB になりました。変更前は開発版 React の文字列(react-devtools)を含み、変更後は本番版の文字列(Minified React error)を含みます。CSS・favicon・og-image.png は変更前後で同一で、HTML の違いは参照する JS のハッシュ名だけです。
  • 本番配信物との比較:変更後の成果物は、現在の本番サイトの /・/ja/・/en/ の HTML、JS(ja.3afbfaa2.js)、CSS、favicon とバイト単位で一致しました。og-image.png だけは Cloudflare Polish が配信時に再圧縮しているため一致しませんが、レスポンスヘッダーの元のサイズ(orig_size=250178)はビルド出力と同じです。
  • yarn typecheck・yarn lint・yarn format・yarn test(26 件):変更後のコンテナですべて成功しました。
  • yarn dev:compose の既定コマンドで起動し、配信される JS に開発版の react-dom と HMR ランタイムが含まれることを確認しました。さらにブラウザで /ja/ を開いたまま HeaderBar.tsx の文言を一時的に変更し、元に戻しました。どちらの変更も、ページを再読み込みせずに反映されました(window に置いた目印の値が残ったままでした)。
  • 機密情報:差分を gitleaks で確認し、検出はありませんでした。

docker compose up は、固定の container_name: algorithm-visualizer-dev が別の worktree の停止中コンテナと衝突するため使っていません。上記のとおり、同じ設定で起動する docker compose run で確認しています。

🤖 Generated with Claude Code

docker-compose.yml set NODE_ENV=development for the whole app service,
so every command run with `docker compose exec` inherited it. Parcel
keeps an existing NODE_ENV, which made `yarn build` in the container
bundle the development builds of React: the JS came out at ~611 kB
instead of the ~443 kB Render serves.

Parcel already defaults NODE_ENV to development for the dev server and
to production for `parcel build`, and enables HMR for the dev server
regardless of NODE_ENV. Vitest likewise defaults it to test, as in CI.
Stop setting it in compose and keep the PARCEL_WATCH_INTERVAL hint as a
commented-out environment block, since compose rejects an empty one.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@shin4488
shin4488 merged commit 5d7ca62 into main Oct 4, 2026
5 checks passed
@shin4488
shin4488 deleted the fix/build-node-env-production branch October 4, 2026 07:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant