経緯

最近プログラミングを始めたエンジニアさんが環境構築でつまづく事が多かったので、もう既に開発現場ではスタンダードになってるDocker & docker-composeを使って、すぐに環境構築できるようにテンプレートを作成。

テンプレート

とりあえず出来上がった物が欲しい人はこちらからcloneしてください。手順はREADME読んでね。

~~ただ、RailsのWelcomeページが見れる所までしか確認してないので、今後問題が出れば適宜テンプレートは更新していきます。~~
→ だいぶ導入実績が蓄積されたので大丈夫っぽい。

Dockerって何？

そもそもDockerって何よって話なんですが、詳しく説明すると物凄い長い内容になるのですごいザックリ解説すると、開発環境の構築、作成、配布がものすごく簡単にできるツールです。

そして、docker-composeは複数のDocker環境(コンテナ)を簡単に管理するためのツールです。

ピンとこない人はDocker使えば今まで苦労してた開発環境構築がコマンド一発で構築できるって考えてください。そう思うと使いたくなってきますよね。

上記の説明だとあまりにもザックリなので、次の手順を進める前に是非ともDockerの全体像を理解するを読んでください。中編までで大丈夫です。とても丁寧に解説してます。

とりあえず試してみたい！って人は早速次の手順からどうぞ。

手順

ここからは実際にテンプレートを使ってRailsを起動してWelcomeページを表示するまでの手順を詳しく解説していきます。

まず最初に

Dockerをインストールしてください。これしなきゃ何もできません。

右メニューから使ってるOSのリンクを選択して、掲載されてる手順通りに進めてください。英語ですが画像で視覚的に説明してくれてるので分かりやすいかと思います。

結局コマンドとか打たないといけないのかよーって悲鳴が聞こえてきそうですが、思ってる以上に簡単な手順ですみますよ。

Windowsユーザーの場合

Windowsユーザーの場合はOSによってインストールするパッケージが変わってきます。
また、そもそも32bitだとDockerが使えないので、64bitのWiondowsパソコンを買ってください。

Windows10 Pro

Windows上で仮想環境を構築できるHyper-Vが使えるので有効化して、Docker for Windowsをインストールします。比較的簡単です。

Windows10 Pro以外

Hyper-Vが使えないのでDocker for Windowsが使えません。。。
その代わり、Docker Toolboxというパッケージが用意されていて、同じく仮想環境を作成するVirtual Boxを利用してDockerを使えるようにしています。

Linuxユーザーの場合

Linuxユーザは追加でdocker-composeのインストールも行ってください。

リポジトリのクローン

リポジトリをローカルに落としましょう。

任意のディレクトリに移動して下記のコマンドを打ってください。プロジェクト名つけないとquickstartって名前のプロジェクトフォルダになるので、なんかテキトーにつけましょう。

masterブランチの場合はdatabaseはPostgreSQLになります

git clone https://github.com/belion-freee/quickstart.git <プロジェクト名>
cd <プロジェクト名>

MySQLを使いたい場合

MySQL用のブランチがあるのでブランチを指定してクローンしてください。以降の手順は同じです。

git clone -b for_mysql https://github.com/belion-freee/quickstart.git <プロジェクト名>
cd <プロジェクト名>

Rails6以降を使いたい場合

Rails6用のブランチがあるのでブランチを指定してクローンしてください。以降の手順は同じです。

git clone -b rails6 https://github.com/belion-freee/quickstart.git <プロジェクト名>
cd <プロジェクト名>

リモートリポジトリの変更

もし自分のリモートリポジトリにpushしたいなら、リモートリポジトリのURLを変更する必要があります。下記のコマンドで実行できるので必要な場合は設定してください。

$ git remote set-url origin <自分のリモートリポジトリURL>
$ git remote -v
origin  <自分のリモートリポジトリURL> (fetch)
origin  <自分のリモートリポジトリURL> (push)

セットアップコマンドの実行

次に ./qs setup を実行します。
こちらのスクリプトではオプションも使えます。使えるオプションは rails new コマンドで使えるオプションと同じです。

$ ./qs setup # デフォルトのまま
$ ./qs setup --webpack # webpackerを使いたい時

上記のコマンドを打ってしばらくするとサービスが起動するので、ブラウザを開いてhttp://localhost:3000にアクセスしてみましょう。RailsのWelcomeページが見れるはずです。

ここまで確認できれば開発環境の構築は終わりです。お疲れ様でした！

やり直す場合

因みに、 セットアップコマンドは最初の一度のみ実行するコマンド です。

やりなおす場合は、別フォルダに移動してもう一度gitリポジトリのクローンからやり直してください。その際、 必ずプロジェクトフォルダ名を変えてください

また、実行前に docker ps で起動しているコンテナを確認して、 docker stop <コンテナID> を指定してportが競合する コンテナを全て停止 してください。
よくわからなければ起動してるコンテナを全て停止すればいいと思います。

Windowsの場合

悲しい事に、Windowsだと上手くコマンドが動作しない報告が度々されます。コマンドが失敗したらシェルスクリプトは使わずに、手動でコマンドを実行していってください。

以下の手順の解説は英語ですがコマンド打つだけなんで簡単です。

PostgreSQLを使う場合の手順
 MySQLを使う場合の手順

スクリプトについて

このテンプレートにはプロジェクト直下にqsというファイルがあります。これはシェルスクリプトというファイルで、本来docker-compose run --rm ~~って感じで長ったらしく打たなければいけないコマンドを省略してくれます。

使い方

./qsもしくは./qs -hと打つと使い方が出力されます。
このコマンドを全て解説するのは辛いので、特に使うコマンドだけ紹介します。

Railsサーバーの起動

./qs server で起動できます。基本的にはこのコマンドだけで大丈夫だと思います。

Railsコマンドの実行

./qs rails で起動できます。因みに、rakeコマンドは ./qs rake で起動できます。

Rspecの実行

./qs rspec で起動できます。因みに、minitestは ./qs test で起動できます。

gemをインストールしたい時

./qs bundle install でbundle installを実行できます。

Railsコンソールの起動

./qs cons で起動できます。

Rails dbコマンドの実行

./qs db で rails db:migrate:status
./qs db set で rails db:migrate
./qs db up 2019~ で rails db:migrate:up VERSION=2019~
./qs db down 2019~ で rails db:migrate:down VERSION=2019~
./qs db reset で rails db:reset

yarnコマンドの実行

./qs yarn <コマンド> で実行できます。

DBに入りたい時

./qs psql でデータベースの中に入れます。

サービスの説明

このテンプレートにはwebサービスとdbサービス以外にも、下記のサービスを利用できます。
デフォルトではこれらのサービスはwebサービスを起動しても同時起動しない設定になってます。

Redisサービス
Springサービス
Solargraphサービス
Chromeサービス(Selenium)

Redisサービス

RedisはいわゆるNoSQLデータベースの1つで、インメモリで動作するので高速です。RailsだとSession機能で使う事がありますが、用途は様々です。

./qs up redis で起動します。Redisサービスはその用途的にWebサービスとセットで使う事が多いと思うので、同時起動した方が使い勝手がいいかもしれません。

その場合は、docker-compose.ymlで下記の修正を加えてください。

docker-compose.yml

  web: &app
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    ~(省略)~
    links:
      - db
      - redis # ここに追加

Chromeサービス

ヘッドレスブラウザを利用できる環境です。Chromeサービスって名前ですが、Seleniumを利用してます。Chromeは正式にイメージを提供していないんですよね。

因みに、ヘッドレスブラウザというのはGUIのないブラウザです。人間がアプリ起動してポチポチやるのではなくてプログラム書いて自動で操作します。変態ですね。

./qs up chrome で起動します。主にフィーチャーテストで使う用途で利用する事が多いと思うので、こちらもWebサービスと同時起動できるようにしておくといいかもしれません。

このサービスを利用したSystem Specの作り方についてこちらの投稿で解説してますので参考にしてみてください。

Spring

railsコマンドの高速化に使うサービスです。./qs up spring で起動します。
springサーバーを立ち上げたコンテナ上でrailsコンソールやマイグレーションを実行するとかなり早くなります。

もし、なんかコマンドの実行遅いな〜と思ったら是非使って見てください。

サービスが起動している状態で、 ./qs spring <実行したいコマンド> を打ってください。もしくは、./qs sdiveでコンテナの中に入れるので、コンテナ内でspring <実行したいコマンド>でもいいです。こちらの方が早いですね。

Solargraph

詳細はQiitaの別記事に記載しています。

このプロジェクトでの手順と使い方を説明します。

手順

Gemfileに以下を追記してください。

gem 'solargraph', group: :development

./qs bundle install を実行してください。

./qs up solargraph で起動します。これでsolargraphサーバーが利用できるようになります。あとは上記の記事を参考にしてVSCodeのプラグインを追加してsolargraphを利用してください。

その他

その他の本環境の留意事項について書いていく。

Rubocop

そのままだとAtomなどのエディタのプラグインでrubocopがDockerから使えない状態なので、テキストエディタでRubocop使いたい！って時はこちらの記事を参考に設定してみてください。

ImageMagick

画像のリサイズ処理で使うrmagickなどを使用する際にサーバーにインストールが必要なライブラリ。
webサービスにdiveしてconvert --versionを叩くと、ImageMagick6系が既にインストールされている事が分かる。Debianの場合は最初から入ってるようである。

root@539af0a85c5d:~# cat /etc/issue
Debian GNU/Linux 9 \n \l
root@539af0a85c5d:~# convert --version
Version: ImageMagick 6.9.7-4 Q16 x86_64 20170114 http://www.imagemagick.org
Copyright: © 1999-2017 ImageMagick Studio LLC
License: http://www.imagemagick.org/script/license.php
Features: Cipher DPC Modules OpenMP 
Delegates (built-in): bzlib djvu fftw fontconfig freetype jbig jng jp2 jpeg lcms lqr ltdl lzma openexr pangocairo png tiff wmf x xml zlib

ER図

アプリ作成に必須ドキュメントであるER図ですが、gemを追加するだけで簡単に作成することができます。
なお、db/schema.rbを元に作られるので、migrationを実行した後じゃないと作成されません。

手順

下記の手順によりプロジェクトフォルダ直下にerd.pdfと言うpdf形式のER図が作成されます。簡単なのならこのgemでまかなえるかと思います。

Gemfileにgem 'rails-erd' 追加
./qs bundle install 実行
./qs bundle exec erd 実行

最後に

今回の設定や手順は殆ど公式リファレンスに記載されているものです。
Dockerは公式のドキュメントが非常に豊富で親切なのでとても読みやすいです。
もっと詳しくDockerについて知りたい方は公式のガイダンスを読んで、自分でRailsや他の環境を構築するのも良いと思います。

docker-composeでナウいRails環境をサクッと作ろう！

経緯