Docker×Laravel×Vue.js에서 browserSync를 사용하다가 빠져서 그 처리 방법을 남겼어요!!!

개시하다

Docker×Laravel×Vue.js 환경에서 개발 효율을 높이기 위해 브라우저 Sync를 사용하다가 반했어요.
해결할 때 너무 즐거웠어요 & 솔직히 해결할 이유를 몰라서 정리해 봤어요.

개발 환경

Mac용 Docker 를 통해 구축된 LEMP 환경

Linux

Nginx

MySQL

PHP

Docker×Laavel의 환경 구축 절차는 여기에서 요약하고 참고만 제공(^^)

절대 실패하지 않는 Docker로 Laavel+Vue의 실행 환경(LEMP 환경)을 구축하는 방법~ 전편~

절대 실패하지 않는 Docker Laavel68+Vue의 실행 환경(LEMP 환경) 구축 방법~후편~

릴리즈

$ 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
`-- [email protected]

브라우저Sync 정보

브라우저SyncBrowserSync 사용 방법에 관해서는 한 번 보시면 알 수 있습니다.
제가 일부분을 발췌하는 것을 허락해 주십시오.
BrowserSync는 파일의 변경 사항을 모니터링하여 브라우저에 즉시 반영할 수 있습니다.
이런 느낌이에요.
이번 용도는 즉각 반영Vue.js문서의 수정을 통해 개발 효율을 높이는 것이다.

이벤트

JS 파일의 컴파일링이 완료되었지만 방문http://localhost:3000 후'이 페이지는 작동하지 않습니다'가 표시되고 브라우저에 응용 프로그램이 표시되지 않습니다..$ npm run watch의 결과

액세스http://localhost:3000 결과

해결책

PHP 컨테이너의 포트에 추가3000:3000docker-compose.yml의 발췌문↓
근데 이유를 모르겠어요...
하지만 일단 남으세요...
※ 이유를 알면 추기

webpack.mix.js

현재 webpack.mix.js 내용을 위에 놓아라.css 파일을 만들기 전이라 컴파일용 코드를 쓰지 않았다.

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

참고 자료

Laavel mix vue No.1-Docker Environment Docker laavel 환경(laradock 사용하지 않음)