Posted at

Windows10+Laravel/Homesteadでvue.js(Laravel-MIX)の環境を作る

マジで苦労しました。残念なことに1ヵ月以上は時間を浪費しました。

しばらく放置していましたがVue.js/Nuxt.js meetup #2 に参加してモチベーション回復してなんとか解決。

できてしまえばどうってことない話ですが、誰かのお役に立てれば幸いです。

よくわかってなくて周りに聞ける人もいないとこうなるんだよ!って記事です。

Windows10 Homeの人向けです。


Laravelを準備

vagrantなのでこういう記事を参考にLaravelのプロジェクトを作成、とっても簡単。

この状態で既にVue.js(Laravel MIX)が準備されているらしい。


Vagrant環境でnpm installが失敗する件

作成したLaravelプロジェクトのディレクトリでnpm installとするだけでwebpackやらvue.jsが使えるようになりますよと言われたのですがnpm installでエラーになりまくりです。

解決方法の選択肢がいろいろあって悩まされたのですが、共有フォルダ内にあるnode_modulesフォルダにシンボリックリンクが張れない問題を回避する方法でやってみました。



http://jjtake.hatenablog.jp/entry/2017/10/22/004650

mount --bindを使って共有フォルダ外にnode_modulesフォルダをマウントしています。マウントの永続化はvagrantfileのプロビジョニングで起動時にコマンド実行。

これで無事npmインストールは完了しました。


ローカルサーバー(webpack-dev-server)ってなに?

これが本当によくわかりませんでした。

Webサーバーみたいなものが動いているんだろうけど、本当に動いているのかどうか確認することもできないし(ドキュメントルートがどこなのか知らない)そもそもアクセス方法もわからない。

ブラウザ開いてlocalhost:8080でOKとか言われても仮想マシン上で動いてるのにlocalhostでアクセスできないし。


  • どこに置いたソースが表示されているかわからない

  • ローカルサーバーの設定方法がわからない

  • アクセス方法がわからない

  • そもそもちゃんと起動しているのかわからない

vagrantだからダメなのか、Laravelがダメなのか、npmのインストールがダメなのか、webpackがだめなのか??

あれこれ考えましたが問題の切り分け方法もわからず進展のない日々が続いたのは辛かったです。

なんせ設定を変更して試そうにもどのファイルを変更したらいいのかという知識すら持ち合わせていなかったので、、


とりあえずこれで動いた

・仮想マシン上のローカルサーバーにはポート転送でアクセスする

vagrantの機能でポート転送することができます。

config.vm.network "forwarded_port", guest: 8080, host: 8080

vagrantfileに追記したら仮想マシンのローカルサーバーにアクセスできました。

・webpack-dev-serverの設定を変更する

ようやくわかったのですがwebpack.mix.jsでmixオブジェクトに設定してやるとデフォルトを上書きしてくれるみたいです。


webpack.mix.js

mix.webpackConfig({

devServer: {
disableHostCheck: true,
host: '0.0.0.0',
port: 8080,
},
watchOptions: {
poll: 2000,
ignored: /node_modules/
}
});

重要なのはwatchOptionsです、これを設定しておかないとソースの変更を検知してくれず自動的に更新してくれません。


おわりに

これで念願のvue.jsの開発に着手できるようになりました。

この方法が正しいのかどうかわかりませんしDockerとか使えたら状況は違っていたかも知れません。何はともあれvue.jsのサンプルコードとか試せるようになったので大満足です。

もうほぼほぼ諦めていたんです、かなりの時間を費やしながら解決できず凹んでましたし。

Vue.js/Nuxt.js meetup #2に参加してよかったです。みなさんVue.jsでわいわい楽しそうだったのでライフが回復しました!ありがとう~