소개

이 기사 에서 구축한 환경에, 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을 위와 같이 변경합니다.
루비의 버전도 올리고 있습니다.

Gemfile

gem 'rails', '5.1.1'

rails의 버전을 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

이렇게하면 필요한 파일 설치와 defalt 디렉토리를 만들 수 있습니다.
적당한 view에,

hoge.html.erb

<%= javascript_pack_tag 'hello_react' %>

그리고 추가하면,

라고 표시되어야 합니다.

마지막으로

app/javascript/packs라고 하는 지금까지와 다른 디렉토리에 js가 들어 있기 때문에 그것을, 좋은 느낌의 디렉토리 구성으로 하고 싶다.

잘못하고 있는 곳이나, 이러한 쪽이 좋은 것들이 있으면, 코멘트 잘 부탁드립니다! !

코드는 여기입니다