docker for macでrails × yarn × webpackerのfront環境を整える

#はじめに
この記事で構築した環境に、yarnというjsのパッケージ管理ツールとwebpackerというrailsでwebpackを簡単に構築できるツールを使ってfrontの環境を整える。

ちなみにwebpackerはrails5.1から使えるようになった最新のgemです。

#yarnのインストール
こちらを参考に、

Dockerfile

FROM ruby:2.4.0

# シェルスクリプトとしてbashを利用
RUN rm /bin/sh && ln -s /bin/bash /bin/sh

# 必要なライブラリインストール
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev

# yarnパッケージ管理ツールインストール
RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
    echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
    apt-get update && apt-get install -y yarn

# Node.jsをインストール
RUN curl -sL https://deb.nodesource.com/setup_7.x | bash - && \
    apt-get install nodejs

# ワークディレクトリ設定
RUN mkdir /myapp
WORKDIR /myapp
ADD Gemfile /myapp/Gemfile
ADD Gemfile.lock /myapp/Gemfile.lock

# bundle install
RUN bundle install
ADD . /myapp

Dockerfileを上記のように変更します。
rubyのversionもあげています。

Gemfile

gem 'rails', '5.1.1'

railsのversionを5.1.1にしてから、$ docker-compose buildを実行し、yarnをインストールします。

これでエラーが出なければ、yarnのインストールは完了です。

#webpackerのインストール

Gemfile

gem 'webpacker', '~> 3.0'

をGemfileに追記したら、

docker-compose run web bundle update
docker-compose build

を実行して、webpackerのインストールは完了です。

#reactの導入

docker-compose run rails rails webpacker:install
docker-compose run rails rails webpacker:install:react

これを実行すると、必要なfileのインストールとdefaltのディレクトリを作成してくれます。
適当なviewに、

hoge.html.erb

<%= javascript_pack_tag 'hello_react' %>

と追加すると、

と表示されるはずです。

#最後に
app/javascript/packsという今までと違うディレクトリにjsが入っているのでそれを、いい感じのディレクトリ構成にしたい。

間違っているところや、こうした方がいい的なことがありましたら、コメントよろしくお願いします！！

コードはこちらです