fix: 開発コンテナの yarn build が開発版の React を同梱しないようにする - #43
Merged
Merged
Conversation
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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)yarn build(parcel build)yarn test(Vitest)HMR は、Parcel が NODE_ENV に関係なく開発サーバーで有効にするため影響を受けません。
package.jsonは変えていないので、Render のビルドにも影響しません。devcontainer も同じ compose ファイルを使うため、同じく直ります。検証
arm64 の開発コンテナ(Node v24.21.0)で、compose の
environmentとcommandをそのまま使うdocker compose runにより、変更前と変更後のコンテナを作って比べました。docker compose configが通ることを確認しました。コメントアウトを外した場合にPARCEL_WATCH_INTERVAL=100が有効になることも確認しています。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に置いた目印の値が残ったままでした)。docker compose upは、固定のcontainer_name: algorithm-visualizer-devが別の worktree の停止中コンテナと衝突するため使っていません。上記のとおり、同じ設定で起動するdocker compose runで確認しています。🤖 Generated with Claude Code