Rails
reactjs
YARN
dockerformac
webpacker

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' %>

と追加すると、
スクリーンショット 2017-12-20 17.42.48.png
と表示されるはずです。

最後に

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

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

コードはこちらです