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

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

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

フロントの開発時、gulp.jsのwatchモードを用いてwebpackコンパイルを自動で行うよう設定されているプロジェクトで開発していていました。

しかし、なぜか半分の割合で、生成されたJSが途中で切れてしまいます。当然ブラウザ上ではエラーで停止します。

ファイルを直接見るとまったく問題がなく、Apacheの再起動を行うとすぐに復活するため、Webサーバーのキャッシュの問題を疑いました。

原因

EnableSendfileというApacheの機能が影響していました。

https://httpd.apache.org/docs/2.4/mod/core.html#enablesendfile

公式ドキュメントには下記の記載があります。

デフォルトでは、 例えば静的なファイルの配送のように、リクエストの処理にファイルの 途中のデータのアクセスを必要としないときには、Apache は OS が サポートしていればファイルを読み込むことなく sendfile を使って ファイルの内容を送ります。

そして、その下に「しかし、プラットフォームやファイルシステムの中には 運用上の問題を避けるためにこの機能を使用不可にした方が良い場合があります:」という記載があります。

ネットワークマウントされた DocumentRoot (例えば NFS や SMB) では、カーネルは自身のキャッシュを使ってネットワークからのファイルを 送ることができないことがあります。

ファイルのキャッシュが中途半端なタイミングで行われてしまい、途中で途切れた状態が出力されてしまうというのが原因なようです。

下記の記事のようにNFSを使用するように設定している場合に発生します。VirtualBox初期設定のファイル共有では発生しません。

Vagrant(VirtualBox)でディスクアクセスが遅い問題の対処法
Windows + Vagrant + VirtualBox で Laravel を動かすと、ローディングにかなりの時間がかかって仕事が進まなかったという問題の対処方法を紹介します。NFS を使用する方法です。

EnableSendfileを無効にする

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

httpd.confのEnableSendfileをOffにします。

EnableSendfile off

または、.htaccessに設定します。

EnableSendfile off

Web
この記事を書いた人
まっしろ

お家とインターネットが大好きな20代社会人です。
眠らない街渋谷に住んでいますが、平均睡眠時間は10時間です。
在宅勤務でWebサービスのフロント・バックエンドエンジニアをしています。

フォローする
スポンサーリンク
まっしろブログ

コメント