【Docker】RailsとNuxt.jsアプリの仮想環境を作るには

NuxtとRailsを使ったアプリで、Docker環境を使うにはどうすれば良いんじゃ〜〜〜ということで、
参考までに、構築するまでのファイルやコマンドを順を追って説明していきます！

今回は、feederというアプリの開発環境を構築していきたいと思います。

自前で用意するファイルやディレクトリ

# 自前で用意するファイル

|-web/
|    |--appフォルダ
|    |--Dockerfile
|--back/
|    |--appフォルダ
|    |--Dockerfile
|    |--Gemfile
|    |--Gemfile.lock  # 空ファイル
|--docker-compose.yml
|--.git

コンテナ作成や起動(サーバー起動)、イメージ作成などまで手がける設定とDockerコマンドファイル

docker-compose.yml

version: "3"

services:
  db:
    container_name: database
    image: mysql:5.7
    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    environment:
      MYSQL_ROOT_PASSWORD: feeder
      MYSQL_DATABASE: feeder
      MYSQL_USER: feeder
      MYSQL_PASSWORD: feeder
      TZ: Asia/Tokyo
    ports:
      - 3308:3306
    volumes:
      - ./database/my.cnf:/etc/mysql/conf.d/my.cnf
      - ./database/data:/var/lib/mysql
      - ./database/sql:/docker-entrypoint-initdb.d

  api:
    container_name: back
    tty: true
    depends_on:
      - db
    build:
      context: back/
      dockerfile: Dockerfile
    ports:
      - 3000:3000
    volumes:
      - ./back/app:/app
    command: rails server -b 0.0.0.0

  front:
    container_name: web
    tty: true
    build:
      context: web/
      dockerfile: Dockerfile
    ports:
      - 8080:3000
    volumes:
      - ./web/app:/app
    command: sh -c 'yarn install; yarn dev'

• ローカルのdocker環境に同じコンテナ名か被ることはよくあるので、柔軟にコンテナ名は変える
• MySQL DBも他アプリケーションで使用していたら(docker-compose upしていて、stopしている状態でも)、ポートは一つしか使えないので、柔軟にポート番号を変更する

イメージ作成と作成に必要なファイルの記述

Nuxtのイメージ設計図

FROM node:12.5.0-alpine

ENV LANG=C.UTF-8 \
  TZ=Asia/Tokyo

WORKDIR /app

RUN apk update && \
  apk upgrade && \
  npm install -g npm && \
  npm install -g @vue/cli && \
  npm install -g create-nuxt-app

ENV HOST 0.0.0.0
EXPOSE 3000

Railsのイメージ設計図

FROM ruby:2.5

ENV LANG=C.UTF-8 \
  TZ=Asia/Tokyo

WORKDIR /app

RUN apt-get update -qq && \
  apt-get install -y nodejs default-mysql-client

COPY app/Gemfile /app/Gemfile
COPY app/Gemfile.lock /app/Gemfile.lock
RUN bundle install

Gemfile

source 'https://rubygems.org'
gem 'rails', '~> 6.0.3', '>= 6.0.3.2'

イメージ作成

$ docker-compose build

Nuxtアプリケーションの生成

$ docker-compose run --rm web yarn create nuxt-app

Railsアプリケーションの生成

$ docker-compose run --rm back rails new . -f -d mysql --api

DBとrailsの接続の設定

database.yml

# MySQL. Versions 5.5.8 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
  charset: utf8mb4
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: feeder
  password: feeder
  host: database

development:
  <<: *default
  database: feeder

# 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: feeder

# As with config/credentials.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 https://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: feeder
  username: feeder
  password: <%= ENV['FEEDER_DATABASE_PASSWORD'] %>

データベースの作成

$ docker-compose build
$ docker-compose run --rm back rails db:create

サーバー起動させる(コンテナ起動)

$ docker-compose up -d

サービス内(コンテナ内)で、コマンドを入力する

$ docker-compose exec サービス名前 実行するコマンドスクリプト

Railsアプリケーションのコマンドを打ちたい

$ docker-compose exec back sh

Nuxtアプリケーションのコマンドを打ちたい

$ docker-compose exec web sh