Zenn
🚀

Docker×Laravel×Vue.jsでbrowserSyncを使った時にハマったのでその対処法を残しておくッッッ！！！

2021/02/06に公開
Docker
Laravel
Vue.js
npm
tech

はじめに

Docker×Laravel×Vue.jsの環境で開発を効率化するためにbrowserSyncを使おうとした時にハマりました。。

解決できた時がめちゃくちゃ嬉しかった＆正直解決できた理由がわかっていないのでまとめておきます。

開発環境

Docker for Macで構築したLEMP環境

  • Linux
  • Nginx
  • MySQL
  • PHP

Docker×Laravelでの環境構築手順はこちらでまとめていますのでご参考までに(^^)

バージョン

$ docker -v
Docker version 19.03.13, build 4484c46d9d

$ docker-compose -v
docker-compose version 1.27.4, build 40524192

$ composer -V
Composer version 2.0.9 2021-01-27 16:09:27

$ php artisan -V
Laravel Framework 6.20.16

$ npm list vue
/var/www/html
`-- vue@2.6.12

browserSyncについて

browserSyncについては BrowserSyncの使い方 をご覧いただければわかりやすいかなと思います。

一部抜粋させていただきます。

BrowserSyncはファイルの変更を監視して、変更を即座にブラウザーに反映させることができます。

こんな感じです。

今回の用途としてはVue.jsのファイルの修正を即座に反映して開発を効率化することです。

事象

JSファイルのコンパイルはできているのに、http://localhost:3000にアクセスすると「このページは動作していません」との表示でブラウザにアプリの画面が表示されない...

$ npm run watchの結果

http://localhost:3000にアクセスした結果

解決策

PHPコンテナのポートに3000:3000を追加する

docker-compose.ymlの抜粋↓

  app:
    build: ./docker/php
    volumes:
      - ./src/:/var/www/html
    ports:
      - '3000:3000'

でも理由がわからない...

でもとりあえず残しておく...

※理由がわかり次第追記します

webpack.mix.js

現時点でのwebpack.mix.jsの中身を載せておきます。
cssファイルを作成する前なのでコンパイルさせるためのコードは書いていません。

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .browserSync({
        proxy: "web", //nginxコンテナのサービス名
        files: [
            './resources/**/*',
            './public/**/*',
        ],
        open: false,
        reloadOnRestart: true,
    })
    .version();

参考

Discussion