20200806のRubyに関する記事は9件です。

GitHubでMiniMagickの脆弱性アラートが出た際の解決方法

現象

RailsアプリをGitHubにプッシュした所、mini_magickに関する脆弱性のアラームメールが届いた。
解決までの備忘録として残しておく。

問題と原因

image.png
mini_magickのバージョンが古く、フェッチされたリモートイメージファイル名がリモートコマンドの実行を引き起こす可能性があるとのこと。
解決するには、バージョンをアップグレードすれば良さそう。

GemFileを編集する

Gemfile
gem 'mini_magick',  '3.8.0'

現在のMiniMagickのバージョンは、3.8だったので
アラートにて提示されているように4.9.4以降をインストールするように修正する。

Gemfile
gem 'mini_magick', '>= 4.9.4'

上記のように編集することで、4.9.4以降にアップグレードされるはず。

bundle installする

bundle install

これでバージョンが変わっているはずなので、動作確認をして問題なければOK。
あとは、プッシュすればアラートが消えてました!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【webpacker】Rails6.0でのBootstrap, jQueryの導入方法まとめ

Railsへの​BootstrapとjQuery導入方法は、

  • 今までもあったGemを使った方法
  • 6.0からのWebpackerを使った方法

と2つあるが、今回は後者の方を採用する。

参考対象者

  • Rails6.0で、bootstrapやjQueryを使いたいなと思っている方

環境

$ rails -v
Rails 6.0.3.1
$ ruby -v
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-darwin19]

Webpakerでパッケージを管理

$ yarn install jquery popper.js bootstrap

Railsでは、BootstrapはjQueryとpopper.jsというパッケージに依存しているため、一緒にインストールする。
また、パッケージ類はnode_modulesディレクトリ以下にインストールされる。

bootstrapの導入

Webpackの設定

config/webpack/environment.js
const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)

module.exports = environment

jQueryやpopperを事前に読み込むように設定している。
こうすることで、わざわざrequireや@importで読み込む必要がなくなる。

bootstrap製のjavascriptを読み込む

app/javascripts/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('bootstrap/dist/js/bootstrap.min.js')

bootstrapのCSSを読み込む

app/assets/stylesheets/application.scss
 *= require bootstrap/dist/css/bootstrap.min.css
 *= require_tree .
 *= require_self

Bootstrapの読み込みは、自分自身で書いたcss(*= require_self)よりも前に書き込む必要がある。

jQueryの導入

jQueryを読み込む

app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require('bootstrap/dist/js/bootstrap.min.js')

Usage

自身のJavaScriptファイルを読み込む

new.html.erb
<div>
  //省略
  <%= javascript_pack_tag 'users/new' %>
</div>

javascript/packsディレクトリ配下の、users/new.jsファイルを呼び出すことでjsファイルを使えるようにする。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

今日のメモ(添字演算子、多重代入)

添字演算子

添字には負の数値(-の値)を指定できる。
要素(a=[n1,n2,n3,n4])の末尾を-1とし、先頭に向かって順に減っていく。
スクリーンショット 2020-08-06 15.57.15.png
更に添字に2つの整数を指定すると複数の要素を出力できます。

a = [0,1,2,3,4,5]
a[1,3]
#=> [1,2,3]

多重代入

コード内の複数の変数に一度に代入をする。
メソッドの返り値で複数の値を返し、多重代入で受け取る事もできるがreturnを指定する必要がある。

def foo
    return 1,2,3
end
a,b,c = foo
p a
p b
p c
#=> 1
    2
    3

変数よりも代入する値が少ない場合は、余った変数にnilが入る。

a,b,c = 1,2
p a
p b
p c
#=> 1
    2
    nil

変数よりも代入する値が多い場合は、余った値は無視される。

a,b = 1,2,3
p a
p b
#=> 1
    2

1つの変数に複数の値を代入した場合は配列の代入と見なされるので注意ですが、値が余った場合最後の変数に*をつける事で配列としてまとめて代入されます。

a,*b = 1,2,3
p a
p b
#=> 1
    [2,3]
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Active Storage 導入環境下での単体テスト

まずActive Storageって何?

ファイルアップロードを行うための機能で、
これを使えばフォームで画像の投稿機能などが簡単に作れる。
また、クラウドストレージサービスへのファイルのアップロードも
簡単にできちゃいます。

自分の場合は画像をアップロードできる機能があるアプリケーションを作成していたので、
Active Storageを導入していました。
特徴としては画像用のカラムを用意する必要がないこと。
今回はこの特徴で、エラーがでまくっていたのですが...

本題のテストのこと

今回のエラーの原因は
①FactoryBotで、ダミーのimageデータを作ってしまっていた
②spec.rbで、fixture_file_uploadメソッドを使っていなかった

以上の2つが主な原因でエラーを吐きまくっていました。

特に②に関しては、見当違いのことを調べていたばかりに中々たどり着きませんでした..


それでは①から。

例えばproductというモデル/テーブルがあるとして

Active Storageを使っていない場合
imageカラム(画像用のカラム)が必要

Active Storageを使っている場合
imageカラム(画像用のカラム)が必要ない

ですよね。

上記を踏まえてFactoryBotの記述を見直すと

Active Storageを使っていない場合

products.rb
FactoryBot.define do
  factory :product do
    image             { 'test_image.jpg' }
    name              { '化粧水' }
    explanation       { '良い化粧水です' }
    price             { '2000' }
    user
  end
end

Active Storageを使ってる場合

products.rb
FactoryBot.define do
  factory :product do
    name              { '化粧水' }
    explanation       { '良い化粧水です' }
    price             { '2000' }
    user
  end
end

こうなるのは当然ですよね。
だってActive Storage環境下ではimageカラム必要ないですし。
(全然気付いていなかった..)

これで①の部分は解決しました。


続いて②の方を。

fixture_file_uploadメソッド

fixture_file_uploadメソッド

fixture_file_uploadメソッド

大事なことなので3回言いました。
このメソッドはRSpecで用意されているメソッドです。

全然テストが通らなかったときのspec.rb ↓↓↓↓

product_spec.rb
require 'rails_helper'


describe Product do

  describe '#create' do
    before do
      @product = build(:product)
    end



    # 1. imageが存在すれば登録できること
    it 'is valid with an image' do
      expect(@product).to be_valid
    end

    # 2. nameが空では登録できないこと
    it 'is invalid without a name' do
      @product.name = nil
      @product.valid?
      expect(@product.errors[:name]).to include('を入力してください')
    end

                        .
                        .
                        .
                        .
                        .

  end
end

修正後のspec.rb ↓↓↓↓

product_spec.rb
require 'rails_helper'


describe Product do

  describe '#create' do
    before do
      @product = build(:item)
      @product.image = fixture_file_upload("/files/test_image.jpg")
    end



    # 1. imageが存在すれば登録できること
    it 'is valid with an image' do
      expect(@product).to be_valid
    end

    # 2. nameが空では登録できないこと
    it 'is invalid without a name' do
      @product.name = nil
      @product.valid?
      expect(@product.errors[:name]).to include('を入力してください')
    end

                        .
                        .
                        .
                        .
                        .

  end
end

fixture_file_upload("/files/test_image.jpg")
とはなんぞやということなんですけども、
下記のディレクトリの通りにテスト画像を配置しています。

spec
  ├ factories
  ├ fixtures
  │     └ files
  │         ├ test_image.jpg
  │         └ .keep
  ├ models
  :
  :

これを、before do ~ end の間でコールバック(予約)しておいて、
テストコードが実行される前にテスト用の画像を生成しているわけです。

これで②も無事に解決です。


解決してしまえばなんてことない原因でしたが、
たどり着くまでに相当な時間と気力を消費してしまいました。

もっと検索力上げないとな...

同じような原因でテストが通らない方の参考になれば幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

TodoじゃなくてNoTodoアプリをリリースした。。(とridgepoleの注意点)

前書き

https://notodoo.herokuapp.com/
今回、NoTodoというwebアプリを作りました。Todoリストを作って「やることが多すぎる!」と感じたことはありませんか?
しかし逆にやらなくてもいいことも多くないですか
無駄なことを減らせば本当にやらなければいけないことに時間をさくことができます。
このwebアプリはそんな「しないことリスト」(NoTodo)をつくるためのものです。ツイッターでリストを公開することも出来ます。

NoTodo>

使った技術

rails6
heroku hobbyプラン(freeだとスリープするのがつらい)
ドメインは取得してません。

使ったgem(一部省略してあります)

gem 'rspec-rails'
gem 'factory_bot_rails'
gem 'ridgepole'
gem 'devise'
gem 'omniauth-facebook'
gem 'omniauth-google-oauth2'
gem 'dotenv-rails'
gem 'devise-i18n'
gem 'devise-i18n-views'
gem 'activeadmin'
gem 'rails-i18n'

今回初めて使ったものはrspecとfactory_bot_railsとridgepoleとomniauth-facebookです。
特に今回はridgepoleについて書こうと思います。

紹介

今回始めてスマホ優先のサイトを作りました。いままではずっとパソコン優先のサイトでした。

NOtodotop.png

↑ログイン前のTopページ TodoではなくNoTodoが目立つようにしました。
登録ページにはSNS認証が実装されています。(facebook認証が調子悪いときがあります。できないときはこのQiitaの記事のコメントにかいてください。)

notodo2.png

↑ログイン後のtopページ ずっと表示され続けるページと保存した翌日には非表示になるページがありますがデザインは一緒です。

ridgepole

使ってみた感想としてはすごく便利っです。migrateファイルをいちいち作らなくてもいいのはすごく楽でスマートです。ただ初めてなので結構つまずいたとこがありました。今回はそのうち2つを説明しようと思います。

migrate
create_table :posts do |t|
ridgepole
create_table "posts" do |t|

ちがいです。笑うかもしれませんがマイグレーションからそのままコピーして移すと最初、結構ハマります。できれば文法同じにしてほしかったです(わけがあって変えてるのかもしれない)。

このサイト公開するにあたって最もハマった点です。ふつうherokuで公開するとき最後に

heroku run rails db:migrate

を打つと思うのですがこれをやってしまうと大変です。

heroku run 'bundle exec ridgepole -c config/database.for.heroku.ridgepole.yml -E production -f db/Schemafile --apply'

ホントはこれをやるべきでした。しかしもうDBをリセットしても治りません。他にもやり方があるかもですが僕の場合は一旦アプリを削除してheroku createからやりました。これがわかるまで丸1日かかりました(泣)ちなみにseedをやるときはheroku run rails db:seedでいいんです。

ridgepoleを使うメリット・デメリット

メリット

・いちいちmigrateファイルをつく作らなくてもいい。
・ファイル一つで済む。

デメリット

・コマンドが覚えにくい

bundle exec ridgepole -c config/database.for.heroku.ridgepole.yml -E development -f db/Schemafile --apply

こんな長いのなかなか覚えられません。いちいちコマンドを遡ってやらないといけません。

・エラーが不親切

これはただの僕の技術不足かもですがエラーが分かりづらいと思います。サンプル出せなくてすみません。

まとめ

いろいろ書きましたがとにかくNoTodoお願いします。

https://notodoo.herokuapp.com/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

TodoじゃなくてNoTodoアプリ作ってみた。(とridgepoleの注意点)

前書き

https://notodoo.herokuapp.com/
今回、NoTodoというwebアプリを作りました。Todoリストを作って「やることが多すぎる!」と感じたことはありませんか?
しかし逆にやらなくてもいいことも多くないですか
無駄なことを減らせば本当にやらなければいけないことに時間をさくことができます。
このwebアプリはそんな「しないことリスト」(NoTodo)をつくるためのものです。ツイッターでリストを公開することも出来ます。

NoTodo>

使った技術

rails6
heroku hobbyプラン(freeだとスリープするのがつらい)
ドメインは取得してません。

使ったgem(一部省略してあります)

gem 'rspec-rails'
gem 'factory_bot_rails'
gem 'ridgepole'
gem 'devise'
gem 'omniauth-facebook'
gem 'omniauth-google-oauth2'
gem 'dotenv-rails'
gem 'devise-i18n'
gem 'devise-i18n-views'
gem 'activeadmin'
gem 'rails-i18n'

今回初めて使ったものはrspecとfactory_bot_railsとridgepoleとomniauth-facebookです。
特に今回はridgepoleについて書こうと思います。

紹介

今回始めてスマホ優先のサイトを作りました。いままではずっとパソコン優先のサイトでした。

NOtodotop.png

↑ログイン前のTopページ TodoではなくNoTodoが目立つようにしました。
登録ページにはSNS認証が実装されています。(facebook認証が調子悪いときがあります。できないときはこのQiitaの記事のコメントにかいてください。)

notodo2.png

↑ログイン後のtopページ ずっと表示され続けるページと保存した翌日には非表示になるページがありますがデザインは一緒です。

ridgepole

使ってみた感想としてはすごく便利っです。migrateファイルをいちいち作らなくてもいいのはすごく楽でスマートです。ただ初めてなので結構つまずいたとこがありました。今回はそのうち2つを説明しようと思います。

migrate
create_table :posts do |t|
ridgepole
create_table "posts" do |t|

ちがいです。笑うかもしれませんがマイグレーションからそのままコピーして移すと最初、結構ハマります。できれば文法同じにしてほしかったです(わけがあって変えてるのかもしれない)。

このサイト公開するにあたって最もハマった点です。ふつうherokuで公開するとき最後に

heroku run rails db:migrate

を打つと思うのですがこれをやってしまうと大変です。

heroku run 'bundle exec ridgepole -c config/database.for.heroku.ridgepole.yml -E production -f db/Schemafile --apply'

ホントはこれをやるべきでした。しかしもうDBをリセットしても治りません。他にもやり方があるかもですが僕の場合は一旦アプリを削除してheroku createからやりました。これがわかるまで丸1日かかりました(泣)ちなみにseedをやるときはheroku run rails db:seedでいいんです。

ridgepoleを使うメリット・デメリット

メリット

・いちいちmigrateファイルをつく作らなくてもいい。
・ファイル一つで済む。

デメリット

・コマンドが覚えにくい

bundle exec ridgepole -c config/database.for.heroku.ridgepole.yml -E development -f db/Schemafile --apply

こんな長いのなかなか覚えられません。いちいちコマンドを遡ってやらないといけません。

・エラーが不親切

これはただの僕の技術不足かもですがエラーが分かりづらいと思います。サンプル出せなくてすみません。

まとめ

いろいろ書きましたがとにかくNoTodoお願いします。

https://notodoo.herokuapp.com/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

googleアナリティクスを活用し、サイト分析を行う-1章

背景

現在デプロイしているサイトが自分以外のユーザに見ていただいているのか、経緯やアクセス数を調査したく、グーグルアナリティクスを導入ることにしました(ちょっと噛みそうになります…笑)
今まで、gitのトラフィックなどから、自分のポートフォリオサイトのアクセスを確認していたのですが、アナリティクスを使用していろいろと傾向を調査していきたいと考えています。

※この記事は、アナリティクスを設定してから、約1時間ほど経過しました。まだ分析結果が表示されないのですが、もう少し、待ってから状況を報告したいと思います(長ければ24時間かかるとのことです。)
表示結果や、手順の修正情報等々はおって掲載します。

環境

項目 内容
OS.Amazon Linux AMI release 2018.03
Ruby On Rails v5.2.4.3
MySQL v5.6

設定手順

作業時間:15分
(1)Googleアカウントの作成(割愛)
(2)Googleアナリティクスアカウントを作成
サイトに従って、主に以下を入力するだけです。
・アカウント名
・ウェブサイト名
・ウェブサイトのURL
・レポートのタイムゾーン

(3)トラッキングコードを設置
上記のアカウントを作成すると、トラッキングコードが配布されます。
これをサイトの各ページの<ヘッダ>タグに組み込みます。
私の場合、railsで稼働しているので、application.html.erbに設定しました。以下のようになります。

app/views/layouts/application.html.erb
<html>
  <head>
   ...

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxx-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-xxxxxxxx-1');
    </script>

  </head>

  <body>
    <%= yield %>
  </body>
</html>

以上です。

参考

Googleアナリティクス導入時の設定・設置方法【初心者向け】
【今さら聞けない】Googleアナリティクスとは?導入手順から使い方まで5分で理解!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Googleアナリティクスを活用し、サイト分析を行う-1章

背景

現在デプロイしているサイトが自分以外のユーザに見ていただいているのか、経緯やアクセス数を調査したく、グーグルアナリティクスを導入することにしました(ちょっと噛みそうになります…笑)
今まで、gitのトラフィックなどから、自分のポートフォリオサイトのアクセスを確認していたのですが、アナリティクスを使用していろいろと傾向を調査していきたいと考えています。

※この記事は、アナリティクスを設定してから、約1時間ほど経過しました。まだ分析結果が表示されないのですが、もう少し、待ってから状況を報告したいと思います(長ければ24時間かかるとのことです。)
表示結果や、手順の修正情報等々はおって掲載します。

環境

項目 内容
OS.Amazon Linux AMI release 2018.03
Ruby On Rails v5.2.4.3
MySQL v5.6

設定手順

作業時間:15分
(1)Googleアカウントの作成(割愛)
(2)Googleアナリティクスアカウントを作成
サイトに従って、主に以下を入力するだけです。
・アカウント名
・ウェブサイト名
・ウェブサイトのURL
・レポートのタイムゾーン

(3)トラッキングコードを設置
上記のアカウントを作成すると、トラッキングコードが配布されます。
これをサイトの各ページの<ヘッダ>タグに組み込みます。
私の場合、railsで稼働しているので、application.html.erbに設定しました。以下のようになります。

app/views/layouts/application.html.erb
<html>
  <head>
   ...

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxx-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-xxxxxxxx-1');
    </script>

  </head>

  <body>
    <%= yield %>
  </body>
</html>

以上です。

参考

Googleアナリティクス導入時の設定・設置方法【初心者向け】
【今さら聞けない】Googleアナリティクスとは?導入手順から使い方まで5分で理解!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

DockerでRailsチュートリアルのローカル開発環境構築(Rails 6 + PostgreSQL + Webpack)

はじめに

最新(2020.8.5現在)のRailsチュートリアルではRails 6が使用されており、
これに対応した開発環境構築をDockerでやってみたいと思います。

個人開発アプリの開発環境構築の際に、
私は新しいものが好きだから...とRails 6を導入しました。

ところが...このRails 6からJavaScriptのモジュールバンドラーにWebpackが導入されたことにより、
BootstrapやFontawesomeといったツールの導入、管理方法が変わるだけでなく、
そもそも環境構築の際もRails 5では必要ない手順が必要だったりと、
Rails 6とWebpackの壁に盛大にぶつかることとなりました...

せっかくなので、今回の試みを経て、知識、経験の整理定着を図りたいと思います。

また、実際にRailsチュートリアルを脱線しながら再走し、学びを深められたらと思っています。

個人開発アプリ
mdClip <オンラインmarkdownエディタ>

以前Rails 5の環境構築をDockerでやってみた記事
はじめてのDockerでRails開発環境構築 [NGINX + Rails 5 (puma) + PostgreSQL] - Qiita

環境

  • Mac OS (Mojave)
  • Docker for Mac
  • Ruby 2.6.3-alpine
  • Rails 6.0.3
  • PostgreSQL 11.0-alpine

構成ファイル

以下の5つのファイルをワークスペースに用意します
Dockerfile, docker-compose.yml, Gemfile, Gemfile.lock, entrypoint.sh

https://github.com/naokit1030/sample_app_on_docker.git

git clone -b create-docker-files https://github.com/dev-naokit/sample_app_on_docker.git

Dockerfile

  • イメージの軽量化のため"alpine"を使用

  • nodejs, yarnはWebpack導入に必要

  • postgresqlだけでは駄目で、postgresql-devも必要

  • bundle installの-j4オプションでbundle installが高速化される

  • bundle install後、不要ファイル削除はイメージサイズの削減に貢献

FROM ruby:2.6.3-alpine

ENV LANG=ja_JP.UTF-8
ENV TZ=Asia/Tokyo
ENV ROOT=/myapp \
    GEM_HOME=/bundle \
    BUNDLE_PATH=$GEM_HOME
ENV BUNDLE_BIN=$BUNDLE_PATH/bin
ENV PATH /app/bin:$BUNDLE_BIN:$PATH


WORKDIR $ROOT

RUN apk update && \
    apk upgrade && \
    apk add --no-cache \
        gcc \
        g++ \
        libc-dev \
        libxml2-dev \
        linux-headers \
        make \
        nodejs \
        postgresql \
        postgresql-dev \
        tzdata \
        yarn && \
    apk add --virtual build-packs --no-cache \
        build-base \
        curl-dev

COPY Gemfile $ROOT
COPY Gemfile.lock $ROOT

RUN bundle install -j4
# 不要ファイル削除
RUN rm -rf /usr/local/bundle/cache/* /usr/local/share/.cache/* /var/cache/* /tmp/* && \
apk del build-packs

COPY . $ROOT

# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["sh", "/usr/bin/entrypoint.sh"]
EXPOSE 3000

docker-compose.yml

  • macでストレージのアクセスが遅い問題に対応するためvolumeに:cahedオプションを追加
  • webpack-dev-serverを別コンテナで起動させて、hot reloadに対応させています. (ファイル構成に変更があった場合にブラウザのリロード、必要に応じてjavascript周りのコンパイルをしてくれる)
  • dbのhost, user, passwordは後で再利用
version: '3'

services:
  db:
    image: postgres:11.0-alpine
    volumes:
      - postgres:/var/lib/postgresql/data:cached
    environment:
      - TZ=Asia/Tokyo
    ports:
      - '5432:5432'
    environment:
      PGDATA: /var/lib/postgresql/data/pgdata
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
      POSTGRES_INITDB_ARGS: '--encoding=UTF-8 --locale=ja_JP.UTF-8'
      TZ: Asia/Tokyo
  app:
    build: .
    command: ash -c "rm -f tmp/pids/server.pid && ./bin/rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp:cached
      - rails_cache:/myapp/tmp/cache
      - bundle:/bundle:cached
    tmpfs:
      - /tmp
    tty: true
    stdin_open: true
    ports:
      - "3000:3000"
    environment:
      RAILS_ENV: development
      NODE_ENV: development
      DATABASE_HOST: db
      DATABASE_PORT: 5432
      DATABASE_USER: postgres
      DATABASE_PASSWORD: password
      WEBPACKER_DEV_SERVER_HOST: webpacker
    depends_on:
      - db
      - webpacker
    links:
      - db
      - webpacker
  webpacker:
    build: .
    command: ./bin/webpack-dev-server
    volumes:
      - .:/myapp:cached
    environment:
      RAILS_ENV: development
      NODE_ENV: development
      WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
    tty: false
    stdin_open: false
    ports:
      - '3035:3035'

volumes:
  rails_cache:
  postgres:
  bundle:

Gemfile

source 'https://rubygems.org'
gem 'rails',      '6.0.3'

Gemfile.lock

空のファイルで良いのでtouchコマンドのみ

touch Gemfile.lock

entrypoint.sh

#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /myapp/tmp/pids/server.pid

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"

手順

Rails 6.0.3をインストールします

docker-compose run app rails new . --force --no-deps --database=postgresql --skip-bundle

Gemfile

Railsチュートリアルに準じて以下のように変更
(Development, test環境でもPostgreSQLを使用するように変更してあります。)

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

gem 'rails',      '6.0.3'
gem 'puma',       '4.3.4'
gem 'pg',         '1.1.4'
gem 'sass-rails', '5.1.0'
gem 'webpacker',  '4.0.7'
gem 'turbolinks', '5.2.0'
gem 'jbuilder',   '2.9.1'
gem 'bootsnap',   '1.4.5', require: false

group :development, :test do
  gem 'byebug',  '11.0.1', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  gem 'web-console',           '4.0.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.1.0'
  gem 'spring-watcher-listen', '2.0.1'
end

group :test do
  gem 'capybara',                 '3.28.0'
  gem 'selenium-webdriver',       '3.142.4'
  gem 'webdrivers',               '4.1.2'
  gem 'rails-controller-testing', '1.0.4'
  gem 'minitest',                 '5.11.3'
  gem 'minitest-reporters',       '1.3.8'
  gem 'guard',                    '2.16.2'
  gem 'guard-minitest',           '2.4.6'
end

group :production do
end

# Windows ではタイムゾーン情報用の tzinfo-data gem を含める必要があります
#gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Gemfile.lockをアップデート(必要ないかもしれません)

docker-compose run app bundle update

webpackerのインストール

Rails 6ではwebpackerが必要ですが、
このままではインストールされていないためインストールします

docker-compose run app rails webpacker:install

データベースの設定

config/database.yml
host, username, passwordをdocker-compose.ymlと一致させる

default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgres
  password: password
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

#省略...

docker-compose build

DockerfileやGemfileを変更する度に'build'が必要です
bundle installも実施されるため少し時間がかかります

docker-compose build

いよいよコンテナを起動

docker-compose up

データベース作成

このままだとDBがないよと言われるので、development環境のDBを作成

docker-compose run app rake db:create

動作確認

docker psで起動しているコンテナ確認
DB, Rails, webpack-dev-serverの3つのコンテナが起動しています。

$ docker ps
CONTAINER ID        IMAGE                            COMMAND                  ...              PORTS                              NAMES
1fb4f53d5652        sample_app_on_docker_app         "sh /usr/bin/entrypo…"   ...    0.0.0.0:3000->3000/tcp             sample_app_on_docker_app_1
ccd40c018d53        sample_app_on_docker_webpacker   "sh /usr/bin/entrypo…"   ...    3000/tcp, 0.0.0.0:3035->3035/tcp   sample_app_on_docker_webpacker_1
74392532098a        postgres:11.0-alpine             "docker-entrypoint.s…"   ...    0.0.0.0:5432->5432/tcp             sample_app_on_docker_db_1

ブラウザでlocalhost:3000にアクセスすると

お疲れさまでした"Yay! You’re on Rails!"

Trouble shoot

check_yarn_integrity関連

コンテナをdocker-compose upで起動したときに出るエラー

app_1        | ========================================
app_1        |   Your Yarn packages are out of date!
app_1        |   Please run `yarn install --check-files` to update.
app_1        | ========================================
app_1        | 
app_1        | 
app_1        | To disable this check, please change `check_yarn_integrity`
app_1        | to `false` in your webpacker config file (config/webpacker.yml).
app_1        | 
app_1        | 
app_1        | yarn check v1.16.0
app_1        | info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.
app_1        | 
app_1        | 
app_1        | Exiting
sample_app_on_docker_app_1 exited with code 1

config/webpacker.yml
以下のように変更します

#...省略

development:
  <<: *default
  compile: false # true -> falseに変更

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: true

#省略...

"webpack-dev-server" not found

同じくコンテナをdocker-compose upで起動したときに出るエラー

webpacker_1  | yarn run v1.16.0
webpacker_1  | error Command "webpack-dev-server" not found.
webpacker_1  | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
sample_app_on_docker_webpacker_1 exited with code 1

package.jsonにwebpack-dev-serverが記述されていないはずなので
webpack-dev-serverをインストール

docker-compose run app yarn add webpack-dev-server

おまけ

イメージサイズ 477MB
先人の知恵を多々お借りして軽量化したつもりです。
Dockerを学び始めた頃に作ったのイメージは1.5GBほどありました...

$docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
sample_app_on_docker_app latest 84aed607a3d2 31 minutes ago 477MB
sample_app_on_docker_webpacker latest 84aed607a3d2 31 minutes ago 477MB

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む