仮想環境で開発中 JavaScript が途中で途切れて壊れる場合の対処法

はじめに

Vagrant (VirtualBox) + Apache + Webpack でコンパイルされた JavaScript や CSS が途中で途切れて壊れる場合の対処法を紹介します。

gulp.js の watch モードで JS が壊れる

フロントの開発時、gulp.js の watch モードを用いて webpack コンパイルを自動で行うよう設定されているプロジェクトで開発していていました。
しかし、なぜか半分の割合で、生成された JS が途中で切れてしまいます。当然ブラウザ上ではエラーで停止します。
ファイルを直接見るとまったく問題がなく、Apache の再起動するとすぐに復活するため、Web サーバーのキャッシュの問題を疑いました。

原因

EnableSendfile という Apache の機能が影響していました。
core - Apache HTTP サーバ バージョン 2.4
https://httpd.apache.org/docs/2.4/mod/core.html#enablesendfile
公式ドキュメントには下記の記載があります。
デフォルトでは、 例えば静的なファイルの配送のように、リクエストの処理にファイルの 途中のデータのアクセスを必要としないときには、Apache は OS が サポートしていればファイルを読み込むことなく sendfile を使って ファイルの内容を送ります。
そして、その下に下記の記載があります。
しかし、プラットフォームやファイルシステムの中には運用上の問題を避けるためにこの機能を使用不可にした方が良い場合があります: ネットワークマウントされた DocumentRoot (例えば NFS や SMB) では、カーネルは自身のキャッシュを使ってネットワークからのファイルを 送ることができないことがあります。
ファイルのキャッシュが中途半端なタイミングで行われてしまい、途中で途切れた状態が出力されてしまうというのが原因なようです。
下記の記事のように NFS を使用するように設定している場合に発生します。VirtualBox 初期設定のファイル共有では発生しません。
Vagrant(VirtualBox)でディスクアクセスが遅い問題の対処法
https://bicstone.me/vagrant-laravel-slow/

EnableSendfile を無効にする

EnableSendfile 機能を無効にします。若干の速度低下があるようですが、(VirtualBox を用いている時点で遅いので)よっぽど大量のリクエストを行っていない場合は問題ありません。
httpd.conf の EnableSendfile を Off にします。
EnableSendfile off
または、.htaccess に設定します。
EnableSendfile off