【Docker × Laravel】browser-sync의 설정 방법

환경

docker 20.10.6

docker-compose 1.29.1

composer 2.0.14

laravel 8.42.1

laravel Mix 6.0.19

php 8.0.7

browser-sync 2.26.14

절차

browser-sync 설치

webpack.mix.js 편집

시작

browser-sync 설치

아래의 명령으로 전역에 browser-sync를 설치

zsh

npm install -g browser-sync browser-sync-webpack-plugin

webpack.mix.js 편집

webpack.mix.js

mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
        require("postcss-import"),
        require("tailwindcss"),
        require("autoprefixer"),
    ])
    // ここから下
    .browserSync({
        proxy: {
            target: "http://localhost:10080",
        },
        files: ["./resources/**/*", "./public/**/*"],
        open: true,
        reloadOnRestart: true,
    });

webpack.mix.js

       proxy: {
            target: "http://localhost:10080",
        },

target 는 웹 서버의 호스트 측 포트 번호로 설정됩니다.

docker-compose.yml

version: "3.9"
services:

　　　　　　　　（省略）

  web:
    image: nginx:1.20-alpine
    ports:
      - 10080:80 //ここの左側の値のこと
    volumes:
      - ./backend:/work
      - ./infra/nginx/default.conf:/etc/nginx/conf.d/default.conf
    working_dir: /work

　　　　　　　　（省略）

webpack.mix.js

        files: ["./resources/**/*", "./public/**/*"],

여기서 각자 변경을 감지하고 싶은 디렉토리를 설정

이번에 말하면 resources, public 부하의 파일에 편집이 더해질 때마다 브라우저에 자동으로 반영해 준다

webpack.mix.js

        open: true,

이것은 browser-sync를 시작할 때 자동으로 브라우저를 열지 여부를 설정합니다.
ture로 하면 자동으로 열림

webpack.mix.js

        reloadOnRestart: true,

이것은 browser-sync를 다시 시작할 때 열려있는 브라우저를 다시로드할지 여부를 설정합니다.

동작 확인

laravel의 프로젝트 루트에서 다음 명령을 치면

npm run watch

browser-sync가 시작되고

( open: true 로 하면 ) http://localhost:3000 에서 브라우저가 열립니다