Laravel8(Docker) + Vue3 + browserSync のセットアップ

2021/12/21 技術系メモ

広告：超オススメUnity Asset
　　広告：超オススメUnity Asset

Laravelでuiをvue3にし、コードを変更したら自動リロードするbrowserSyncをセットアップするところまでの簡単なMEMOです。今回は Docker を使う方法で。

Laravel8セットアップ

まず Docker Desktop をインストールして起動。

curl -s "https://laravel.build/my-laravel-vue5" | bash
cd my-laravel-vue5 && ./vendor/bin/sail up

./vendor/bin/sail upした時に

Error response from daemon: Ports are not available: listen tcp 0.0.0.0:80: bind: address already in use

ポート80はすでに使われてます、というメッセージが出たので

sudo apachectl stop

したところ、もう一度 ./vendor/bin/sail up したらうまくいきました。
また、今後何度も ./vendor/bin/sailと打つのは面倒なので

vi ~/.zshrc
alias sail="./vendor/bin/sail" （←viで.zshrc内に追記）
source ~/.zshrc

としておくことで、以降このディレクトリから sail 〜 で実行できるようになります。

sail composer install
sail npm install

webpack.mix.jsに.vue()とbrowserSync()を追加

webpack.mix.jsのmix.js()に .vue() と .browserSync() を追記。

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .browserSync({
        files: [
            "resources/**/*",
            "config/**/*",
            "routes/**/*",
            "app/**/*",
            "public/**/*"
        ],
        proxy: {
            target: "http://127.0.0.1",
        },
        open: false,
        reloadOnRestart: true
    })
;

Vue3のインストール

sail npm run watch

を試してみると

We couldn’t find a supported version of Vue in your project. Please ensure that it’s installed (npm install vue).

と言われたので、

sail npm install vue@next

と@nextをつけることでvue3が入ります（2021年11月現在）
バージョン確認は sail npm list vue で。

sail npm run dev 
(Please run Mix again.)
sail npm run dev

browserSyncの動作確認

npm run watch

を実行するとウォッチモードになる。 （Please run Mix again.）と出たら 再度

sail npm run watch

しかしこのままではポート3000を叩いても「接続できません」となるので、
一度、sail downし、docker-compose.ymlの以下の箇所に3000と3001のポート番号を追加し、

services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.0
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.0/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '3000:3000'
            - '3001:3001'

再度、sail upとsail npm run watch。

webpack compiled successfully
[Browsersync] Proxying: http://127.0.0.1
[Browsersync] Access URLs:
 -----------------------------------
       Local: http://localhost:3000
    External: http://xxx.xxx.xxx.xxx:3000
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -----------------------------------
[Browsersync] Watching files...

と出たらブラウザで http://localhost:3000 を叩いて監視。 ファイルを修正するたびに右上に「Browsersync: connected」と表示される。ブラウザを表示したまま、resources/views/welcome.blade.php などを書き換えてみるとリアルタイムにブラウザ内のコンテンツが書き換えられることが確認できる。

 

以上