Docker + Rails + Webpacker + Spectre.css

以下のつづき。

l-chika.hatenablog.com

前提

DockerでRailsが起動する

概要

• Webpacker のgemインストール
• Spectre.css をyarnでインストール

参考

• [Rails 5.1]webpackerを使用して、Spectre.cssを適用する方法
• Rails & Webpackerでフロントエンド開発環境を整える

step

Yarn install setting

$ touch yarn.lock

Dockerfile

以下の設定を追加 - apt-get install -y yarn - ADD package.json - ADD yarn.lock - RUN yarn install

$ vim Dockerfile

FROM ruby:2.4.2
ENV TZ=Asia/Tokyo
ENV LANG C.UTF-8

# NOTE: Yarn requires Node.js 4.0 or higher to be installed.
RUN curl -sL https://deb.nodesource.com/setup_8.x | bash - && apt-get install -y nodejs

RUN apt-get update -qq && apt-get install -y build-essential libmysqlclient-dev vim

# NOTE: 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

ARG APP_DIR="/myapp"
RUN mkdir $APP_DIR
WORKDIR $APP_DIR

ADD Gemfile ${APP_DIR}/Gemfile
ADD Gemfile.lock ${APP_DIR}/Gemfile.lock
ENV BUNDLE_GEMFILE=${APP_DIR}/Gemfile \
  BUNDLE_JOBS=2 \
  BUNDLE_PATH=/bundle
RUN gem install bundler & bundle install

ADD package.json ${APP_DIR}/package.json
ADD yarn.lock ${APP_DIR}/yarn.lock
RUN yarn install

ADD . $APP_DIR

diff

diff --git a/Dockerfile b/Dockerfile
index cf2e811..113df83 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,6 +7,12 @@ RUN curl -sL https://deb.nodesource.com/setup_8.x | bash - && apt-get install -y

 RUN apt-get update -qq && apt-get install -y build-essential libmysqlclient-dev vim

+# NOTE: 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
+
 ARG APP_DIR="/myapp"
 RUN mkdir $APP_DIR
 WORKDIR $APP_DIR
@@ -19,4 +25,8 @@ ENV BUNDLE_GEMFILE=${APP_DIR}/Gemfile \
   BUNDLE_PATH=/bundle
 RUN gem install bundler & bundle install

+ADD package.json ${APP_DIR}/package.json
+ADD yarn.lock ${APP_DIR}/yarn.lock
+RUN yarn install
+
 ADD . $APP_DIR
diff --git a/docker-compose.yml b/docker-compose.yml
index d78c9de..a277fdd 100644

docker-compose.yml

• volumesに/node_modulesを追加

version: '3'
services:
  db:
    image: mysql:5.7
    command: "mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci"
    environment:
      MYSQL_ROOT_PASSWORD: password
    volumes:
      - mysql-db:/var/lib/mysql
    ports:
      - "3306:3306"
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    environment:
      EDITOR: vim
    volumes:
      - .:/myapp
      - /myapp/node_modules
      - bundle:/bundle
    ports:
      - "3000:3000"
    depends_on:
      - db
volumes:
  mysql-db:
    driver: local
  bundle:
    driver: local

diff

--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -17,6 +17,7 @@ services:
       EDITOR: vim
     volumes:
       - .:/myapp
+      - /myapp/node_modules
       - bundle:/bundle
     ports:
       - "3000:3000"

$ docker-compose build

確認

$ docker-compose run --rm web yarn -v
1.3.2

Gemfile

$ vim Gemfile

gem 'webpacker'

$ docker-compose run --rm web bundle install

$ docker-compose run --rm web bin/rails -T | grep webpacker
rails webpacker                          # Lists all available tasks in Web...
rails webpacker:check_binstubs           # Verifies that webpack & webpack-...
rails webpacker:check_node               # Verifies if Node.js is installed
rails webpacker:check_yarn               # Verifies if Yarn is installed
rails webpacker:clobber                  # Remove the webpack compiled outp...
rails webpacker:compile                  # Compile JavaScript packs using w...
rails webpacker:install                  # Install Webpacker in this applic...
rails webpacker:install:angular          # Install everything needed for An...
rails webpacker:install:elm              # Install everything needed for Elm
rails webpacker:install:react            # Install everything needed for React
rails webpacker:install:vue              # Install everything needed for Vue
rails webpacker:verify_install           # Verifies if Webpacker is installed
rails webpacker:yarn_install[arg1,arg2]  # Support for older Rails versions

$ docker-compose run --rm web bin/rails webpacker:install
$ docker-compose build

確認

$ docker-compose run web yarn check --integrity
Starting myapp_db_1 ... done
yarn check v1.3.2
success Folder in sync.
Done in 0.13s.

node_modulesの確認

$ docker-compose down
$ docker-compose up

$ docker exec -it myapp_web_1 /bin/bash
# ls node_modules/

spectre.css追加

$ docker-compose run --rm web yarn add spectre.css
$ docker-compose build

css適用

app-style.sass

$ vim app/javascript/app-style.sass

@import '~spectre.css/dist/spectre'

application.js

$ vim app/javascript/packs/application.js

import '../app-style'

application.html.erb

$ vim app/views/layouts/application.html.erb

<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>

compile

$ docker-compose run --rm web bin/rails webpacker:compile

確認

• 上手くdocker-compose upできない時は docker-compose downを実行してみる

$ docker-compose run --rm web bin/rails g controller pages top --no-helper --no-assets --skip-test-framework
$ docker-compose up

ブラウザ

http://0.0.0.0:3000/pages/top

binstub

./bin/webpack、 /bin/webpack-dev-server を追加

$ docker-compose run --rm web bundle binstubs webpacker --force --path=bin/
$ ls -1 bin/
bundle*
rails*
rake*
setup*
update*
webpack*
webpack-dev-server*
yarn* 

$ docker exec -it myapp_web_1 /bin/bash
# ./bin/webpack-dev-server

関連

Ruby on Rails 5アプリケーションプログラミング

プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ)

プログラマのためのDocker教科書 インフラの基礎知識＆コードによる環境構築の自動化

Docker