Laravel Vite를 위한 환경 설정

Docker 개발환경으로 변경하면서 Vite의 HMR 기능이 오류가 발생해서 매우 불편했습다. 이 문제는 WSL2의 문제만이 아니라 Docker 개발환경에서도 문제가 되었습다. Laravel 공식 문서 Asset Bundling 문서의 Running The Development Server In Sail On WSL2 부분의 내용을 적용해도 해결되지 안습다. 최근에야 이 문제를 해결할 수 있었다. 문제의 원인은 요청을 수신하는 IP 주소가 지정되지 안아 생기(?)는 문제로 보입니다. 이 문제를 해결하기 위해 아래와 같이 vite.config.js 파일에 아래의 내용을 추가했습니다.

server: {
    https: false,   // HTTPS 비활성화
    host: true,     // 요청 수신 IP 설정
    hmr: {host: 'localhost', protocol: 'ws'},   // HMR 엔더포인트 및 프로토콜 설정
},

간혹 이렇게 해도 오류가 나는 경우가 있습다. (마지막 점검중에 발생) 아래와 같이 포트번호를 추가했습다.

server: {
    https: false,   // HTTPS 비활성화
    host: true,     // 요청 수신 IP 설정
    port: 5173,
    hmr: {host: 'localhost', protocol: 'ws', port: 5173},   // HMR 엔더포인트 및 프로토콜 설정
},

host 항목을 설정하지 않으면 npm run dev 실행 시 아래와 같이 네트워크 부분이 표시되지 안습니다.

  VITE v4.0.3  ready in 6254 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

  LARAVEL v9.45.1  plugin v0.7.3

  ➜  APP_URL: https://public............wd

위와 같이 설정하면 아래와 같이 네트워크 부분이 설정되어 표시되고, 오류가 발생하지 안습니다.

  VITE v4.0.3  ready in 1183 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.26.0.3:5173/
  ➜  press h to show help

  LARAVEL v9.45.1  plugin v0.7.3

  ➜  APP_URL: https://public..........wd