VirtualBox5.0.10でWindowsホストでsynced_folderを利用した場合の260文字問題(npmとか)が解決していた

windowsでlaravel5をvagrantの共有フォルダで開発しようと思っている人へ。 - Qiita

私もこれと同じ事象でハマリ、周りの方々に迷惑をかけまくった結果、結局あきらめてWindows側にnpm入れてもらったという辛い思い出があるのですが、たまたま他プロダクトのフォーラムを見ていたら「VirtualBox 5.0.10でこの問題が解決された」 ¹というコメントを見ました。

確認してみるとたしかにそれっぽいのがあります。
https://www.virtualbox.org/wiki/Changelog

VirtualBox 5.0.10 (released 2015-11-10)

ちょっと確認してみます。

確認

以下に確認用のVagrantプロジェクトを作りました。$ vagrant up して確認にご利用ください。
terukizm/vagrant-virtualbox-sample-with-windows-longpath

たまたまこの問題に遭遇したのがLaravel-Elixirだったので同じようにしてみましたが、node_modulesの階層がやたら深くなっているnpmパッケージならなんでもよさそうです。

1. Windows 10 + npm 2.14.4

手元のWindowsと、たまたま入ってたnpmでとりあえず試してみます。

$ node -v
v4.1.1

$ npm -v
2.14.4

$ cd source/blog/
$ gulp
[19:47:36] Using gulpfile C:\cygwin64\home\terukizm\vagrant-virtualbox-npm-win\source\blog\gulpfile.js
[19:47:36] Starting 'default'...
[19:47:36] Starting 'sass'...

Fetching Sass Source Files...
   - resources\assets\sass\app.scss


Saving To...
   - public\css\app.css

[19:47:37] Finished 'default' after 678 ms
[19:47:37] gulp-notify: [Laravel Elixir] Sass Compiled!
[19:47:38] Finished 'sass' after 1.56 s

Windows側でgulpを動かす分にはエラーなく動きますね。

$ gulp watch
[19:48:51] Using gulpfile C:\cygwin64\home\terukizm\vagrant-virtualbox-npm-win\source\blog\gulpfile.js
[19:48:51] Starting 'watch'...
[19:48:51] Finished 'watch' after 9.01 ms
[19:49:48] Starting 'sass'...

Fetching Sass Source Files...
   - resources\assets\sass\app.scss


Saving To...
   - public\css\app.css

[19:49:49] Finished 'sass' after 704 ms
[19:49:49] gulp-notify: [Laravel Elixir] Sass Compiled!

gulp-watchしてsassのファイル(resources/assets/sass/app.scss)をいじってみてもきちんと反応します。想定通りです。

2. VirtualBox(5.0.14) + Vagrant(1.8.1) + CentOS 7.2 + npm 2.14.4

さて、問題のVagrant内でやった場合です。

[vagrant@localhost blog]$ rm -rf node_modules/

[vagrant@localhost blog]$ npm install --g gulp
[vagrant@localhost blog]$ npm install --no-bin-links
...

[vagrant@localhost blog]$ 

前はこの時点でコケてたような気がするのですが… 動作も確認してみます。

[vagrant@localhost blog]$ node -v
v4.1.1
[vagrant@localhost blog]$ npm -v
2.14.4

[vagrant@localhost blog]$ gulp
[10:28:16] Using gulpfile /source/blog/gulpfile.js
[10:28:16] Starting 'default'...
[10:28:16] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/app.scss


Saving To...
   - public/css/app.css

[10:28:21] Finished 'default' after 4.78 s
[10:28:22] gulp-notify: [Laravel Elixir] Sass Compiled!
[10:28:22] gulp-notify: [Error in notifier] Error in plugin 'gulp-notify'
Message:
    not found: notify-send
[10:28:22] Finished 'sass' after 6.48 s

notify-sendが動かないのはしかたなさそうな感じですが、Sassコンパイルはできてるっぽいです。

gulp watchした状態で、ホスト側(Windows側)からファイル編集を試してみます。

[vagrant@localhost blog]$ gulp watch
[10:29:27] Using gulpfile /source/blog/gulpfile.js
[10:29:27] Starting 'watch'...
[10:29:27] Finished 'watch' after 14 ms
[10:29:47] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/app.scss


Saving To...
   - public/css/app.css

[10:29:52] Finished 'sass' after 4.75 s
[10:29:52] gulp-notify: [Laravel Elixir] Sass Compiled!
[10:29:52] gulp-notify: [Error in notifier] Error in plugin 'gulp-notify'
Message:
    not found: notify-send

動いてる…

過去に似たようなものでハマった経験があり、「VirtualBoxの5.0.10以前の環境」 がある方、同じように試してみていただければ幸いです。

結論

「VirtualBoxのアップデート通知、毎回毎回うざいなあ」と思わずに確認してみれば、たまにはいいことがあるかもしれません。

以上です。

---

---

1. WindowsでVirtualBoxのsynced_folderを利用した場合、npmのディレクトリパスがWindowsファイルシステムの最大パス長260文字以上になるとnpmインストールor実行時にエラーになる ↩