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
アプリ作成
上記6つ揃ったらアプリを作成します。
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をインストールする
ここも若干やり方変わってるのでメモ。
上記参考にしてます。
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';
これで完了です。
コメント