- 投稿日:2020-08-06T22:49:50+09:00
GitHubでMiniMagickの脆弱性アラートが出た際の解決方法
現象
RailsアプリをGitHubにプッシュした所、mini_magickに関する脆弱性のアラームメールが届いた。
解決までの備忘録として残しておく。問題と原因
mini_magickのバージョンが古く、フェッチされたリモートイメージファイル名がリモートコマンドの実行を引き起こす可能性があるとのこと。
解決するには、バージョンをアップグレードすれば良さそう。GemFileを編集する
Gemfilegem 'mini_magick', '3.8.0'現在のMiniMagickのバージョンは、3.8だったので
アラートにて提示されているように4.9.4以降をインストールするように修正する。Gemfilegem 'mini_magick', '>= 4.9.4'上記のように編集することで、4.9.4以降にアップグレードされるはず。
bundle installする
bundle installこれでバージョンが変わっているはずなので、動作確認をして問題なければOK。
あとは、プッシュすればアラートが消えてました!
- 投稿日:2020-08-06T19:01:51+09:00
【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 bootstrapRailsでは、BootstrapはjQueryとpopper.jsというパッケージに依存しているため、一緒にインストールする。
また、パッケージ類はnode_modulesディレクトリ以下にインストールされる。bootstrapの導入
Webpackの設定
config/webpack/environment.jsconst { 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 = environmentjQueryやpopperを事前に読み込むように設定している。
こうすることで、わざわざrequireや@importで読み込む必要がなくなる。bootstrap製のjavascriptを読み込む
app/javascripts/packs/application.jsrequire("@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_selfBootstrapの読み込みは、自分自身で書いたcss(*= require_self)よりも前に書き込む必要がある。
jQueryの導入
jQueryを読み込む
app/javascript/packs/application.jsrequire("@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ファイルを使えるようにする。
- 投稿日:2020-08-06T16:59:47+09:00
今日のメモ(添字演算子、多重代入)
添字演算子
添字には負の数値(-の値)を指定できる。
要素(a=[n1,n2,n3,n4])の末尾を-1とし、先頭に向かって順に減っていく。
更に添字に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 21つの変数に複数の値を代入した場合は配列の代入と見なされるので注意ですが、値が余った場合最後の変数に*をつける事で配列としてまとめて代入されます。
a,*b = 1,2,3 p a p b #=> 1 [2,3]
- 投稿日:2020-08-06T15:43:08+09:00
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.rbFactoryBot.define do factory :product do image { 'test_image.jpg' } name { '化粧水' } explanation { '良い化粧水です' } price { '2000' } user end end
Active Storageを使ってる場合
products.rbFactoryBot.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.rbrequire '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.rbrequire '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 の間でコールバック(予約)しておいて、
テストコードが実行される前にテスト用の画像を生成しているわけです。これで②も無事に解決です。
解決してしまえばなんてことない原因でしたが、
たどり着くまでに相当な時間と気力を消費してしまいました。もっと検索力上げないとな...
同じような原因でテストが通らない方の参考になれば幸いです。
- 投稿日:2020-08-06T11:29:35+09:00
TodoじゃなくてNoTodoアプリをリリースした。。(とridgepoleの注意点)
前書き
https://notodoo.herokuapp.com/
今回、NoTodoというwebアプリを作りました。Todoリストを作って「やることが多すぎる!」と感じたことはありませんか?
しかし逆にやらなくてもいいことも多くないですか
無駄なことを減らせば本当にやらなければいけないことに時間をさくことができます。
このwebアプリはそんな「しないことリスト」(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について書こうと思います。紹介
今回始めてスマホ優先のサイトを作りました。いままではずっとパソコン優先のサイトでした。
↑ログイン前のTopページ TodoではなくNoTodoが目立つようにしました。
登録ページにはSNS認証が実装されています。(facebook認証が調子悪いときがあります。できないときはこのQiitaの記事のコメントにかいてください。)↑ログイン後のtopページ ずっと表示され続けるページと保存した翌日には非表示になるページがありますがデザインは一緒です。
ridgepole
使ってみた感想としてはすごく便利っです。migrateファイルをいちいち作らなくてもいいのはすごく楽でスマートです。ただ初めてなので結構つまずいたとこがありました。今回はそのうち2つを説明しようと思います。
①
migratecreate_table :posts do |t|ridgepolecreate_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お願いします。
- 投稿日:2020-08-06T11:29:35+09:00
TodoじゃなくてNoTodoアプリ作ってみた。(とridgepoleの注意点)
前書き
https://notodoo.herokuapp.com/
今回、NoTodoというwebアプリを作りました。Todoリストを作って「やることが多すぎる!」と感じたことはありませんか?
しかし逆にやらなくてもいいことも多くないですか
無駄なことを減らせば本当にやらなければいけないことに時間をさくことができます。
このwebアプリはそんな「しないことリスト」(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について書こうと思います。紹介
今回始めてスマホ優先のサイトを作りました。いままではずっとパソコン優先のサイトでした。
↑ログイン前のTopページ TodoではなくNoTodoが目立つようにしました。
登録ページにはSNS認証が実装されています。(facebook認証が調子悪いときがあります。できないときはこのQiitaの記事のコメントにかいてください。)↑ログイン後のtopページ ずっと表示され続けるページと保存した翌日には非表示になるページがありますがデザインは一緒です。
ridgepole
使ってみた感想としてはすごく便利っです。migrateファイルをいちいち作らなくてもいいのはすごく楽でスマートです。ただ初めてなので結構つまずいたとこがありました。今回はそのうち2つを説明しようと思います。
①
migratecreate_table :posts do |t|ridgepolecreate_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お願いします。
- 投稿日:2020-08-06T10:28:14+09:00
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分で理解!
- 投稿日:2020-08-06T10:28:14+09:00
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分で理解!
- 投稿日:2020-08-06T01:13:48+09:00
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 updatewebpackerのインストール
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