[Homestead+Laravel+Vue.js] いちいちページリロードするのが大変だったのでホットリロードを試してみたら捗りすぎた話

はじめに

保存(Ctrl + S)→F5キーの連打、端的に言って疲れますよね。
特にフロントエンドはちょこっと修正してリロード...の繰り返しで、これ以上消費したくない！と思っていたところにHotreloadなるものを発見。
使えないかどうか検討してみた。

SPA構築云々は飛ばします。
過去の記事 とか これ 辺りを参考に。

デモ

環境

Vagrantから起動したHomesteadをWebサーバーにして開発してます。

手順

1.エントリポイント作成

トランスパイル後のjs側実行ファイルは public/js/app.js に出力されます。
これをエントリポイントで読み込んであげればオッケーなんですが…。

vue_layout.blade.php

...
<!-- 環境ごとの差分を考えないようにするにはこれよりも -->
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ secure_asset('js/app.js') }}"></script>

<!-- こっちの方がいいみたいです -->
<script src="{{ mix('js/app.js') }}"></script>
...

2.ローカル側でビルド実行

LocalMachine

npm run hot

3.VM側でサーバー起動

LocalMachine

vagrant ssh

homestead

cd code
php artisan serve

4.ブラウザから接続

http://localhost:8000 にアクセスするとホットリロード機能が有効になっている！はず。

まとめ

これでいちいちページリロードしなくてもよくなった！素敵！
あくまでもjsで記述されたものだけなので、例えばエントリポイント（bladeファイル）を書き換えた場合なんかは素直にリロードしてください。

ちなみにオレオレ証明書でSSLアクセスしてみたりといろいろ試しましたがどれもうまくいきませんでした。
何が悪いんだろう...。