[Docker] How to create a virtual environment for Rails and Nuxt.js apps

How can I use the Docker environment with an application that uses Nuxt and Rails? For reference, I will explain the files and commands up to the construction step by step!

This time, I would like to build an application development environment called feeder.

Files and directories prepared by yourself

#Files prepared by yourself

|-web/
|    |--app folder
|    |--Dockerfile
|--back/
|    |--app folder
|    |--Dockerfile
|    |--Gemfile
|    |--Gemfile.lock  #Empty file
|--docker-compose.yml
|--.git

Settings and Docker command files for container creation, startup (server startup), image creation, etc.

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'

• Since it is common for the local docker environment to have the same container name, you can flexibly change the container name.
• If MySQL DB is also used by another application (even if docker-compose up and stopped), only one port can be used, so change the port number flexibly.

Description of files required for image creation and creation

Nuxt image blueprint

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 image blueprint

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'

Image creation

$ docker-compose build

Nuxt application generation

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

Rails application generation

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

Setting up the connection between DB and 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'] %>

Creating a database

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

Start the server (start container)

$ docker-compose up -d

Enter the command in the service (in the container)

$ docker-compose exec service name command script to execute

I want to type a Rails application command

$ docker-compose exec back sh

I want to type a command for a Nuxt application

$ docker-compose exec web sh