macOS 10.12.6 / Docker CE 17.23.0 / Middleman 4.2.1 / Chrome 63.0.3239.84 (64bit)

Middleman の開発環境を Docker 内に移行しようとしています。Docker 内で起動したプレビューサーバのサイトをホストマシンのウェブブラウザに表示することはできるのですが、サイトのソースを編集してもプレビューが更新されません。ライブリロードも反映されず、ブラウザの更新ボタンを手動でクリックしても変更が反映されません。プレビューサーバを停止し、再起動すると更新されます。

プレビューまでの手順

Dockerfile

FROM ruby:2.4.3
RUN gem install \
  execjs:2.7.0 \
  therubyracer:0.12.3 \
  middleman:4.2.1 \
  middleman-autoprefixer:2.8.0 \
  middleman-livereload:3.4.6
CMD /bin/bash

仮に middleman:4.2.1-soj としてビルド。

docker build -t middleman:4.2.1-soj .

コンテナ起動

ポート 4567, 35729 を同じ番号で公開。作業用にカレントディレクトリをバインドマウントし、サイトのソース編集などはホストマシンから行います。

docker run -it --rm \
-p 4567:4567 -p 35729:35729 \
--mount type=bind,source=$(pwd),target=/mnt/local \
middleman:4.2.1-soj

コンテナ内の作業

インタラクティブモードで起動したコンテナの端末で作業します。

Middleman のデフォルトテンプレートで新規プロジェクト mysite を作成し、Gemfile に JavaScript ランナーとライブリロードの Gem を追記し、bundle update します。

cd /mnt/local
middleman init mysite
cd mysite
echo "gem 'execjs'" >> Gemfile
echo "gem 'therubyracer'" >> Gemfile
echo "gem 'middleman-livereload'" >> Gemfile
bundle update

開発サイクル

設定ファイルでライブリロードを有効化します。

# config.rb
activate :livereload
...

プレビューサーバを バックグラウンドで 起動します。

middleman server
# == The Middleman is loading
# == LiveReload accepting connections from ws://172.17.0.2:35729
# == View your site at "http://localhost:4567", "http://127.0.0.1:4567"
# == Inspect your site configuration at "http://localhost:4567/__middleman", "http://127.0.0.1:4567/__middleman"

ホストマシンのブラウザでプレビューを表示します。

http://localhost:4567/

このプレビューまでは表示できます。ただし、ソースを更新しても反映されません。

なお、正しく更新される場合、プレビューサーバは更新箇所のパスを出力します。

== LiveReloading path: /

試したこと・参考情報

  • ライブリロードを activate :livereload, :host => '0.0.0.0', :port => '1234' とし、コンテナ起動時のポートを -p 4567:4567 -p 1234:1234 にするが変化なし - via: Using Docker for Development with Middleman
  • ホストマシンのネットワークを直接使える？　とのことで docker run に --net=host をつけたが、逆にプレビューへアクセスできない状態になる。Mac 版ではドキュメント通りではないという議論も - via: Should docker run –net=host work?
  • Boot2docker ではないので真似できなかった - via: はじめてのDocker：Docker上で動かしているMiddlemanにアクセスしてLiveReloadを使う（小ネタ）
  • [2018-01-12 10:38 追記] コンテナのベースになっている Linux（ruby:2.4.3はDebian GNU/Linux 8 (jessie)）を変えてはどうかと ubuntu:16.04 を元に Ruby 2.4.3 をインストールして同じことをしたが変化なし
  • [2018-01-12 11:43 追記] ホストマシン上でプレビューサーバを起動してもバックグラウンド middleman server -d だと更新されません。前提を middleman server に変更します。
  • [2018-01-12 12:19 追記] execjs の選択する JavaScript ランタイムが不適切なのかもしれないと思い、コンテナ内に Node.js v8.9.4 と therubyrhino 2.0.4 をインストールしたが変化なし - via: sstephenson/execjs

どのようにすれば、プレビューが更新されるようになるでしょうか？