rails6 + docker + webpackerで環境構築

rails6を使ってみたかったので、実際に構築してみました。
環境構築した際のメモとして残しておこうと思います。

必要なファイルを作成する

今回photosというアプリを作った時の備忘録なので、photosのところは任意で変更して下さい。

docker-compose.yml

version: '3.4'
services:
  db:
    image: mysql:5.7
    environment:
      TZ: Asia/Tokyo
    build:
      context : .
      dockerfile: Dockerfile-MySQL
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    container_name: 'photos_db'
    volumes:
      - ./db/mysql/volumes:/var/lib/mysql:cached
    ports:
      - "3344:3306"
    env_file: .env
    user: mysql
  web:
    container_name: 'photos_web'
    environment:
      TZ: Asia/Tokyo
    build:
      context : .
      dockerfile: Dockerfile
    command: bash -c "rm -rf /photos/tmp/pids/server.pid && bundle exec rake db:create && bundle exec rails s -p 3014 -b '0.0.0.0'"
    volumes:
      - .:/photos:cached
    ports:
      - "3014:3014"
    env_file: .env
    privileged: true
    depends_on:
      - db
    tty: true
    stdin_open: true

volumes:
  redis-data:
    driver: local

Dockerfile

FROM ruby:2.6.3

RUN 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

RUN curl -sL https://deb.nodesource.com/setup_10.x | bash && apt-get update -qq && \
apt-get install -y build-essential libpq-dev nodejs yarn vim

RUN gem install bundler
ENV APP_HOME /photos
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME
ADD . $APP_HOME
ADD Gemfile Gemfile
ADD Gemfile.lock Gemfile.lock
RUN bundle install

webpackerを使うために、yarnを入れます。あとcredentialをvimでedit出来るようにvimも入れときます。

Dockerfile-MySQL

FROM mysql:5.7
RUN { \
    echo '[mysql]'; \
    echo 'default-character-set=utf8mb4'; \
    echo '[mysqld]'; \
    echo 'character-set-server=utf8mb4'; \
    echo 'collation-server=utf8mb4_general_ci'; \
    echo 'init-connect = SET NAMES utf8mb4'; \
    echo 'innodb-file-format=barracuda'; \
    echo 'innodb_file_format_max=barracuda'; \
    echo '[client]'; \
    echo 'default-character-set=utf8mb4'; \
} > /etc/mysql/conf.d/charset.cnf

Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

gem 'rails', '~> 6.0.2'

Gemfile.lock

中身は何も記載しません。

.env

MYSQL_USER=root
MYSQL_PASSWORD=password
MYSQL_ROOT_PASSWORD=password
MYSQL_HOST=db
MYSQL_DATABASE=photos_db

アプリ作成

上記６つ揃ったらアプリを作成します。

docker-compose run web bundle exec rails new . --force --database=mysql --skip-bundle

こんな感じで作られていきます。
MySQLのところでコケますが、一旦無視しましょう。

database.ymlを書き換え

config/database.ymlを書き換えましょう。

# MySQL. Versions 5.1.10 and up are supported.
#
# Install the MySQL driver
#   gem install mysql2
#
# Ensure the MySQL gem is defined in your Gemfile
#   gem 'mysql2'
#
# And be sure to use new-style password hashing:
#   https://dev.mysql.com/doc/refman/5.7/en/password-hashing.html
#
default: &default
  adapter: mysql2
  encoding: utf8mb4
  charset: utf8mb4
  collation: utf8mb4_unicode_ci
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV['MYSQL_USER'] %>
  password: <%= ENV['MYSQL_ROOT_PASSWORD'] %>
  host: db

development:
  <<: *default
  database: photos_development

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: photos_test

# As with config/secrets.yml, you never want to store sensitive information,
# like your database password, in your source code. If your source code is
# ever seen by anyone, they now have access to your database.
#
# Instead, provide the password as a unix environment variable when you boot
# the app. Read http://guides.rubyonrails.org/configuring.html#configuring-a-database
# for a full rundown on how to provide these environment variables in a
# production deployment.
#
# On Heroku and other platform providers, you may have a full connection URL
# available as an environment variable. For example:
#
#   DATABASE_URL="mysql2://myuser:mypass@localhost/somedatabase"
#
# You can use this database configuration with:
#
#   production:
#     url: <%= ENV['DATABASE_URL'] %>
#
production:
  <<: *default
  database: photos_production
  username: photos
  password: <%= ENV['PHOTOS_DATABASE_PASSWORD'] %>

Gemfileを編集

Gemfileを編集します。
入れたいGemがあれば追加します。

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.6.3'
gem 'rails', '~> 6.0.2'
gem 'mysql2', '>= 0.4.4', '< 0.6.0'
gem 'puma', '~> 3.11'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
gem 'bootsnap', '>= 1.1.0', require: false
# .env
gem 'dotenv-rails'
# bootstrap 4
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'mini_racer'
gem 'sprockets-rails'
# font awesome 5
gem 'font-awesome-rails'

gem 'ridgepole'

gem 'webpacker', '~> 4.0'

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'factory_bot_rails'
  gem 'faker'
  gem 'rspec_junit_formatter', require: false
  gem 'rubocop', require: false
  gem 'rubocop-performance', require: false
  gem 'rubocop-rails', require: false
  gem 'rubocop-rspec', require: false
  gem 'rails_best_practices', require: false
  gem 'brakeman', require: false
end
group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'spring-commands-rspec'
  gem 'spring-watcher-listen', '~> 2.0.0'
end
group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'rspec-rails', '~> 3.8.0'
  gem 'selenium-webdriver'
  # Easy installation and use of chromedriver to run system tests with Chrome
  gem 'webdrivers', '~> 3.0'
  gem 'database_cleaner'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
# gem 'active_admin_flat_skin'
# gem 'activeadmin'
gem 'carrierwave', '~> 1.0'
gem 'devise'
gem 'devise-i18n'
gem 'enum_help'

gem ‘webpacker’, ‘~> 4.0’は必須です。

Gemfileを編集したら一度アップデートします。
docker-compose run --rm web bundle update

webpackerインストール

webpackerをインストールします。
まずビルドして、
docker-compose build

ビルドしたらwebpackerを入れましょう。
docker-compose run --rm web rails webpacker:install

上記みたいなれば完了です。

完了したら起動させましょう。
docker-compose up

localhostにアクセス

Great!

bootstrapとfontawesomeをインストールする

ここも若干やり方変わってるのでメモ。

Add Bootstrap 4 to your Ruby on Rails 6 ap...

Add Bootstrap 4 to your Ruby on Rails 6 application

https://www.mashrurhossain.com/blog/rails6bootstrap4

Use yarn to add Bootstrap and its dependencies - jquery and popper.js Run the following command from your application directory (if you don't have yarn, install it):yarn add bootst

上記参考にしてます。

yarnでbooststrapを入れる

docker-compose run --rm web yarn add bootstrap@4.4.1 jquery popper.js @fortawesome/fontawesome-free
上記コマンドでインストール。

入りましたね。

environment.jsを編集する

ここら辺がいつもと違いますね。

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
}))

module.exports = environment

application.jsを編集

app/javascript/packs/application.js

import "bootstrap"
import "../stylesheets/application"
import "@fortawesome/fontawesome-free/js/all";

application.scssを作成

app/javascriptディレクトリにstylesheetsディレクトリを作成し、そこのapplication.scssを作成する。

app/javascript/stylesheets/application.scss

@import "~bootstrap/scss/bootstrap";
@import '@fortawesome/fontawesome-free';

これで完了です。

rails6 + docker + MySQLで環境構築する