41273


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

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

## プレビューまでの手順

### Dockerfile

[code]

    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
    
[/code]

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

[code]

    docker build -t middleman:4.2.1-soj .
    
[/code]

### コンテナ起動

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

[code]

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

### コンテナ内の作業

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

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

[code]

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

### 開発サイクル

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

[code]

    # config.rb
    activate :livereload
    ...
    
[/code]

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

[code]

    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"
    
[/code]

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

[code]

    http://localhost:4567/
    
[/code]

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

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

[code]

    == LiveReloading path: /
    
[/code]

* * *

### 試したこと・参考情報

  * ライブリロードを `activate :livereload, :host => '0.0.0.0', :port => '1234'` とし、コンテナ起動時のポートを `-p 4567:4567 -p 1234:1234` にするが変化なし - via: [Using Docker for Development with Middleman](https://www.ryanbosinger.com/blog/2017/09/02/using-docker-for-the-development-environment-of-a-middleman-site.html)
  * ホストマシンのネットワークを直接使える？ とのことで `docker run` に `--net=host` をつけたが、逆にプレビューへアクセスできない状態になる。Mac 版ではドキュメント通りではないという議論も - via: [Should docker run –net=host work?](https://forums.docker.com/t/should-docker-run-net-host-work/14215)
  * Boot2docker ではないので真似できなかった - via: [はじめてのDocker：Docker上で動かしているMiddlemanにアクセスしてLiveReloadを使う（小ネタ）](https://whiskers.nukos.kitchen/2015/04/20/docker-live-reload.html)
  * [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](https://github.com/sstephenson/execjs)

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


CC BY-SA 3.0
2018-01-11T14:59:22.617
40892
2018-01-29T02:40:01.313
2018-01-12T03:20:07.973
question
docker
Dockerのコンテナ内で稼働するMiddlemanのプレビューが更新されない


_自己回答_

コンテナ内の実行環境、コンテナのポートなどは正常でした。更新されない原因は、

バインドマウントしたディレクトリ内のソースを **ホスト側で編集しても、** ファイルが変更されたことを **コンテナ側の OS が感知しない**
ためのようです。

試しに、コンテナ内の端末でプレビューサーバの起動コマンドをバックグラウンド実行し（`middleman server
-d`はなぜか更新が反映されないので）、ソースに文字列を追記してみます。

[code]

    middleman server &
    echo "How I reload you?" >> source/index.html.erb
    # ...
    # == LiveReloading path: /
    
[/code]

プレビューの内容が更新されます。 **ただし、ブラウザの自動再読み込みはされません。** が、手動でリロードすると更新が反映されます。

* * *

なお、これは [envygeeks/jekyll-docker](https://github.com/envygeeks/jekyll-docker)
のような、他の静的サイトジェネレータの Docker コンテナのプレビューサーバでも同様にホスト側での編集に反応しませんでした。Middleman
だけのことではないようです。

（ちなみに、`jekyll-docker` はライブリロードに対応していません。派生版の [markkimsal/docker-
jekyll_plus](https://github.com/markkimsal/docker-jekyll_plus) はそのためにあります）


CC BY-SA 3.0
2018-01-12T07:43:48.520
40903
2018-01-29T02:40:01.313
2018-01-29T02:40:01.313
40892
answer


_自己回答_

他の解決策です。

**Docker を諦めて[rbenv](https://github.com/rbenv/rbenv) を使います。** _（質問者は元々 rbenv
からより包括的な環境の固定を求めて Docker へ移行しようとしましたが断念した形です）_


CC BY-SA 3.0
2018-01-29T02:37:31.363
41273
2018-01-29T02:37:31.363
40892
answer