Zenn
🌊

Railsの開発環境にDockerを導入する

2022/03/30に公開
Docker
Rails
macOS
tech

はじめに

今まではAWSのcloud9でrailsアプリを開発していましたが、実際の開発現場で使われているというDockerを開発環境に導入しようと思います。

※導入する際には、以下の記事を参考にさせていただきました。
丁寧すぎるDocker-composeによるrails5 + MySQL on Dockerの環境構築(Docker for Mac)

Quickstart: Compose and Rails (docker公式ドキュメント)

環境

Ruby 2.5.3
Rails 5.2.4
MySQL 5.7
MacBook Pro

1 自分のアプリのディレクトリ直下にDockerfileを作成する

Dockerfile
FROM ruby:2.5.3
RUN apt-get update -qq && apt-get install -y vim nodejs default-mysql-client
COPY . /fishingshares
ENV APP_HOME /fishingshares
WORKDIR $APP_HOME
RUN bundle install
ADD . $APP_HOME

2 docker-compose.ymlを作成する

docker-compose.yml
version: '3'
services:
  db:
    image: mysql:5.7
    volumes:
      - ./db/mysql_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: root
    ports:
      - "3306:3306"

  web:
    build: .
    command: rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/fishingshares
    ports:
      - "3000:3000"
    depends_on:
      - db
    links:
      - db

3 database.ymlを修正する

database.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password
  socket: /var/lib/mysql/mysql.sock
  host: db

4 dockerコンテナを起動

terminal
$ docker-compose build #コンテナを立ち上げる（立ち上げるのに少し時間かかります）

$ docker-compose up　#コンテナを起動する

コンテナを起動して、ターミナルにこんなログが出てきたらうまくいってます。

log.png

5 データベースを構築する

terminal
＄ docker-compose run web rails db:create #コンテナ上にDBを作成する
$ docker-compose run web rails db:migrate # コンテナ上のDBにマイグレーションファイルを反映させる

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

browzer.jpeg

アプリケーションが無事に表示されました！

メモ1

コンテナを立ち上げた後に、以下のコマンドできちんとコンテナを止める必要があるみたいです。

terminal
$ docker-compose down

このコマンドでコンテナを止めないと、次にコンテナを起動したときに、ブラウザでうまく表示されません。

コンテナを起動してから、ブラウザに表示されない時は、以下のコマンドを実施してください。

terminal
$ rm tmp/pids/server.pid

このコマンドを実施してから、もう一度コンテナを起動すると、ブラウザにうまく表示されると思います。

メモ２

ローカルからMySQLコンテナに接続するコマンド

terminal
$ mysql -u root -p -h localhost -P 3306 --protocol=tcp

webコンテナからdbコンテナへの接続方法

docker-compose.yml
version: '3'
services:
  db:
    container_name: local-mysql
    image: mysql:5.7
    volumes:
      - ./db/mysql_data:/var/lib/mysql
    environment:
      MYSQL_DATABASE: 'local-mysql-db'
      MYSQL_PASSWORD: password
      MYSQL_USER: root
    ports:
      - "3306:3306"
    networks:
      - app-net

  web:
    container_name: "local-application"
    build: .
    command: rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/fishingshares
    ports:
      - "3000:3000"
    depends_on:
      - db
    links:
      - db
    networks:
      - app-net

networks:
  app-net:
    driver: bridge

$ mysql -h local-mysql -u root -D fishingshares_db_1 -p

詳しく解説すると、
mysql -h [host名] -u [ユーザ名] -D [database名] -p
ということになる。

以上のコマンドをwebコンテナ内で実行すると、mysqlに接続できる。

コンテナ内で日本語を入力可能にするためのDockerfile記述方法

Dockerコンテナ内でrails cからデータベースにレコードを追加しようとした時に、日本語を入力できなかったので、Dockerコンテナを立ち上げた時に、日本語対応がなされるようにDockerifleを書き換えた。

以下の記事を参考にした。
【Docker】MySQLの日本語化

内容

Dockerfile
FROM ruby:2.5.3
RUN apt-get update -qq && apt-get install -y vim nodejs default-mysql-client \
    locales locales-all && \ #追加
    echo "ja_JP.UTF-8 UTF-8" > /etc/locale.gen && \ #追加
    locale-gen && \ # 追加
    update-locale LANG=ja_JP.UTF-8　#追加
COPY . /fishingshares
ENV LANG="ja_JP.UTF-8" \ #追加
    TZ="Asia/Tokyo" \ #追加
    APP_HOME="/fishingshares"
WORKDIR $APP_HOME
RUN bundle install
ADD . $APP_HOME

コメントを書いているところが追記した箇所である。

以上のDockerfileを基に、コンテナを立ち上げて起動すると、コンテナ内で日本語が入力できるようになる。

頻繁に利用するDockerコマンドのまとめ

build

buildコマンドはimageを構築するのみ。コンテナ作成はしない。

$ docker-compose build

up

upコマンドでは、キャッシュがある場合はそれを使って一発でイメージの構築から、コンテナの構築・起動までします。

$ docker-compose up

start

startコマンドは既存のコンテナを起動します。

$ cocker-compose start

run

runコマンドはimageの構築から、コンテナの構築・起動までする。引数でサービスを指定する必要あり。

$ docker-compose run web

exec

コンテナの中に移動できる

$ docker-compose exec web bash

bash ashの違いは、ashの方が軽量なコマンドらしい。

新たなrailsプロジェクトを立ち上げるコマンド

ターミナル
docker-compose run web rails new . --force --database=mysql

rails newの . は現在いるディレクトリにそのままプロジェクトを作成するというもの)だそうです。

Vue.jsを導入する

サンプルアプリのディレクトリ作成

任意のワークスペースでディレクトリを作成します。

ターミナル
mkdir sample_app
cd sample_app

Dockerの設定ファイルを作成

Dockerfile
FROM ruby:2.5.3

RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - && apt-get update && \
    apt-get install -y nodejs --no-install-recommends && rm -rf /var/lib/apt/lists/*

RUN apt-get update -qq && apt-get install -y build-essential libpq-dev

RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
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 && \
apt-get update && apt-get install -y yarn

RUN curl -sL https://deb.nodesource.com/setup_8.x | bash - && \
    apt-get install nodejs

RUN yarn add node-sass

RUN mkdir /app
WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
COPY . /app
docker-compose.yml
version: '3'
services:
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/app
    ports:
      - 3000:3000
    depends_on:
      - db
    tty: true
    stdin_open: true
  db:
    image: mysql:5.7
    volumes:
      - db-volume:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
volumes:
  db-volume:
Gemfile
source 'https://rubygems.org'
gem 'rails', '5.2.3'

あとは、Gemfile.lockの空ファイルを作成。

Railsプロジェクトを作成する

ターミナル
$ docker-compose run web rails new . --force --database=mysql

※rails newの . は現在いるディレクトリにそのままプロジェクトを作成するというもの)だそうです。

database.ymlを編集

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

hostの部分をdbに変更する。

vue.jsの導入

Gemfile
gem 'webpacker', github: 'rails/webpacker'

その後、

$ docker-compose exec web bash

でwebコンテナに入る。

コンテナ内でコマンドを以下のコマンドを実行

$ rails webpacker:install
$ rails webpacker:install:vue
$ bin/webpack

Railsのviewファイルに以下を記述する


<%=javascript_pack_tag 'hello_vue'%>

こんな画面が出てきたら成功です。

55425ab4b1d58a46d5041eeb75e2128e.png

Discussion