docker-node-browsersync

• Dockerコンテナで完結する、nodemon と Browsersync のシンプルなホットリロードのテンプレ

• Webフレームワークなしで簡単な静的サイトをホットリロードしつつ作りたく、下記等が自分の環境で動かなかったので作った

  • https://acncuc.medium.com/a-very-basic-browser-sync-development-environment-based-on-docker-568e7a0c8c0f
  • https://github.com/wildpeaks/docker-browser-sync _{(最終更新 2年前)}
  • https://github.com/touchifyapp/docker-browser-sync _(7年前)
  • https://github.com/ustwo/docker-browser-sync _(8年前)

• サーバ側も、Browsersyncのビルトインサーバより若干柔軟にしたくて app.js を作り、nodemon でホットリロードさせた

  • node --watch だと、最初の app.js 編集時はリロードされるのに2回目以降は謎にリロードされなかった

動作確認環境

• macOS 14.7.1

  $SHELL --version
  # GNU bash, version 5.2.37(1)-release (x86_64-apple-darwin23.4.0)
  
  docker --version
  # Docker version 28.0.1, build 068a01e
  
  docker-compose --version
  # Docker Compose version v2.33.1-desktop.1

使い方

• 任意の場所にクローンして、初回起動は docker-compose up --build

  • 設定を変えてコンテナを再作成する時は --force-recreate を付けるといいかも

• 2回目以降の起動は docker-compose up または docker-compose up -d

  • 前者はホットリロードやエラーがすぐ分かる、後者はバッググラウンドで稼動

• 正常起動した例

  

• localhost:3030 をブラウザでを開くと app/public/index.html が開かれる

  • public下を適当に編集するとホットリロードされる

  • index.html 以外に任意のHTMLを置いて開いてもホットリロードされる

• サーバアプリ app/app.js を編集するとサーバが再起動し、ブラウザもホットリロードされる

• localhost:8080 はホットリロードされない (これはこれで使い道があるかも)

• localhost:3031 は Browsersync のダッシュボード

諸設定

• ポートは .env で任意に修正可

  • PORT_SERVER_CONTAINER コンテナ内でのサーバ待ち受け用

  • PORT_SERVER_HOST ホストからのサーバ接続用 (ホットリロードされない)

  • PORT_BROWSER Browsersyncのメイン (ホットリロードされる)

  • PORT_BROWSER_SYNC_UI Browsersyncの管理画面

• nodemon の設定は package.json > nodemonConfig

  • サンプルの ignore を設定済み (編集してもホットリロードさせないもの)

• Browsersync の設定は app/bs-config.js

  • 同じくサンプル ignore を設定済み

付記

• 問題等あれば Issues や Pull Request を上げていただくか、プロフィールのEメールまでご連絡下さい。

以上