[Webpack] 원격 서버 Browser-Sync 사용하기

파일이 변경되면 브라우저를 자동으로 새로고침 해 주는 Browser-Sync 라는게 있다고 한다.

찾아보니 로컬서버의 경우는 매우 쉽게 설정이 가능한듯 했다.

하지만 나는 원격 서버 유저... (로컬 네트워크 내에 가상머신을 몇개 만들어 사용)

뭔짓을 해도 새로고침이 되지 않기에, 구글신께 빌어 계시를 받았다.

[Laravel-mix 의 경우]

기본적으로 Browser-Sync가 dependency에 포함되어 있다.

webpack.mix.js 파일에 셋팅만 해주면 된다.

윈도우의 hosts 파일을 변경하여 가상 도메인으로 활용중이므로, proxy 설정을 포함 해 준다.

mix.browserSync({
   proxy: 'http://my-virtual-domain.com',
   files: [
      './dist/**',
      '../resources/views/**',
      '../resources/lang/**',
   ]
});

webpack의 빌드 디렉토리인 dist를 포함했다.

추가로 laravel의 view와 다국어 파일이 들어있는 lang 디렉토리도 포함시켰다.

여기까지 해 주면 자동으로 새로고침이 되지 않는다(!).

원격이기 때문에 템플릿에서 js를 따로 import 시켜 줘야 동작한다.

<script id="__bs_script__">
   document.write('<script async src=\'http://192.168.0.100:3000/browser-sync/browser-sync-client.js?v=2.18.12\'><\/script>'.replace("HOST", location.hostname));
</script>

위 <script/> 태그를 템플릿 파일이나 view 파일에 추가 시켜 준다.

요즘 추새에 따라 <body/> 의 마지막에 추가했다.

개발서버에서만 사용할 것이므로, .env 의 APP_ENV 설정 등에 따라 조건문으로 표시 여부를 정해 준다.

[codeigniter의 경우]

browser-sync가 기본적으로 설치되어 있지 않으므로 우선 설치부터 해 준다.

npm i -D -S browser-sync browser-sync-webpack-plugin webpack-dev-server

형상관리 저장소에서 내려받으면 바로 사용할 수 있도록, -S 옵션을 주어 package.json 에 dependency를 추가시켰다.

다음으로 webpack.config.js 파일을 열어 플러그인을 로드 해 준다.

const BrowserSyncPlugin = require("browser-sync-webpack-plugin");

plugins 배열에 플러그인 사용 설정을 해 준다.

plugins: [   
   new BrowserSyncPlugin({
      proxy: 'http://your-virtual-domain.com',
      files: [
         './dist/**',
         '../application/views/**',
      ]
   })
],

CodeIgniter의 application 디렉토리와, public 디렉토리가 같은 depth에 있는 디렉토리 구조를 사용중이므로 위와 같이 설정했다.

public 디렉토리가 application 디렉토리 내에 있는 구조를 사용중이라면 조금 수정 할 필요가 있겠다.

이후, Laravel에서와 동일한 <script/> 태그를 템플릿 또는 view 파일에 삽입 해 준다.

마찬가지로 constants나 nginx의 fastcgi_params 등을 사용 해 개발서버에서만 삽입 되도록 조건문을 추가 해 준다.

<?php if (ENV == "dev"): ?>
   <script id="__bs_script__">
      document.write('<script async src=\'http://192.168.0.100:3000/browser-sync/browser-sync-client.js?v=2.18.12\'><\/script>'.replace("HOST", location.hostname));
   </script>
<?php endif; ?>

사용중인 framework에 따라 설정을 마치고, 브라우저를 새로고침 하면, 

BrowserSync: Connected 

라는 기분 좋은 메시지와 함께 사용 가능 한 상태가 된다.

끗.