How to build Rails + Vue + MySQL environment with Docker [2020/09 latest version]

Introduction

The combination of Vue on the front and Rails on the API server is one of the major configurations in Japan. This time, we will build this configuration using Docker.

By reading this article, you will be able to create the following configuration with Docker! API: ** Rails 6 series ** Front: ** Vue (TypeScript) 2 series ** DB： MySQL 5.7

Flow of environment construction

1. Rails, Vue Dockerfile creation
2. Create docker-compose.yml
3. Rails, Vue project creation

The final directory structure is as follows.

[project_name]
├── api // Rails
│   ├── Dockerfile
│   ├── ...
├── docker-compose.yaml
└── front // Vue
    ├── Dockerfile
    ├── ...

Let's start building the environment!

1. Create directory

Create the project directory and the API and front directories under it

$ mkdir project_name
$ cd project_name
$ mkdir api front

Subsequent commands are described assuming that the current directory is the project directory.

2. Create Dockerfile

Create Dockerfiles for Rails and Vue respectively. 2-1. Rails Specified version

• Ruby 2.7.1
• Rails 6.0.x

api/Dockerfile

FROM ruby:2.7.1

RUN apt-get update -qq && \
    apt-get install -y build-essential \ 
                       libpq-dev \        
                       nodejs \
   && rm -rf /var/lib/apt/lists/* 

RUN mkdir /app
ENV APP_ROOT /app
WORKDIR $APP_ROOT

ADD ./Gemfile $APP_ROOT/Gemfile
ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock

RUN bundle install

rm -rf / var / lib / apt / lists / * is clearing apt's cache. This is to reduce the image file size of Docker.

This Dockerfile requires a Gemfile containing Rails, so create the following file in ʻapi / `.

api/Gemfile

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

It also creates an empty Gemfile.lock.

$ touch api/Gemfile.lock

Directory structure at this point

[project_name]
├── api 
│   ├── Dockerfile   <- New!
│   ├── Gemfile      <- New!
│   └── Gemfile.lock <- New!
└── front

2-2. Vue Specified version

• node 12.18.3 --Vue 2 series <-This is specified when creating a Vue project in the container described later.

front/Dockerfile

FROM node:12.18.3-alpine

ENV APP_HOME /app
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME

RUN apk update && npm install -g @vue/cli

Directory structure at this point

[project_name]
├── api 
│   ├── Dockerfile
│   ├── Gemfile
│   └── Gemfile.lock
└── front 
    └── Dockerfile <- New!

3. Create docker-compose.yml

Create the following docker-compose.yaml in your project directory

docker-compose.yaml

version: '3'

services:
  web:
    build: ./api
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    ports:
      - '3000:3000'
    depends_on:
      - db
    volumes:
      - ./api:/app
      - bundle:/usr/local/bundle
    tty: true
    stdin_open: true
  db:
    image: mysql:5.7
    volumes:
      - mysql_data:/var/lib/mysql/
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - '3306:3306'
  front:
    build: ./front
    volumes:
      - ./front:/app
    ports:
      - '8080:8080'
    tty: true
    stdin_open: true
    command: npm run serve

volumes:
  mysql_data:
  bundle:

Specify the host with -b when starting the Rails development server. If omitted, the container cannot be accessed from the host. By specifying 0.0.0.0, you can listen on all interfaces of the container, so you can access the container from the host side.

MySQL and bundle data is mounted on the volume and persisted. This will not erase the data if you delete the container. Even if you don't mount the bundle, you can build the image every time you add a gem, but it takes time. By mounting the bundle, adding a gem seems to be done with docker-compose run api bundle install.

Directory structure at this point

[project_name]
├── api 
│   ├── Dockerfile
│   ├── Gemfile
│   └── Gemfile.lock
├── docker-compose.yaml <- New!
└── front 
    └── Dockerfile

4. Create a project

4-1. Rails ** Creating a Rails project ** Create a Rails project with rails new

$ docker-compose run web rails new . --force --database=mysql --api --skip-bundle

About the argument of rails new --force: Forcibly overwrite and update Gemfile --database: Make the database used MySQL --api: Create a project in API mode. In API mode, files related to the UI are omitted. --skip-bundle: Omit bundle install. This is to do bundle install on the next docker image build.

** docker image update ** Now that the Gemfile has been updated, build and update the docker image.

$ docker-compose build

** Modify DB configuration file **

Modify the Rails DB configuration file ʻapi / config / database.yml`.

api/config/database.yml

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

-- password is the one specified by the environment variable MYSQL_ROOT_PASSWORD in docker-compose.yaml --host is the DB service name It corresponds to.

** Creating a DB **

$ docker-compose run web rails db:create 

This completes the Rails environment construction!

4-2. Vue ** Create a Vue project with vue-cli ** Go inside the container and use vue-cli to interactively create a Vue project.

The following setting items are for vue-cli v4.5.6. The settings are just an example, so feel free to use them.

Run shell in Vue container

$ docker-compose run front sh

Below, we will set it interactively in the front container.

$ vue create .
#Current directory(/app)Confirmation of whether to create
? Generate project in current directory? (Y/n) Yes

#Whether to use presets
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features #Select this to install TypeScript

#Select libraries to install in your project
? Check the features needed for your project:
 ◉ Choose Vue version #
 ◉ Babel
❯◉ TypeScript #Select this if you want to install TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

#Vue version selection
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 2.x
  3.x (Preview)

#Whether to use Class style. No because I use Object style
? Use class-style component syntax? (Y/n) No

#Whether to use babel with TypeScript
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Yes

#What to use to set Lint and Formatter
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
❯ ESLint + Prettier
  TSLint (deprecated)

#Lint execution timing
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save #Run Lint on save
 ◯ Lint and fix on commit (requires Git)

# Babel,Where to write settings such as ESLint
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files #Make each configuration file
  In package.json

#Do you want to save the contents set this time as a preset? Basically, no project will be created after that.
? Save this as a preset for future projects? No

#What to use for your package manager
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
  Use NPM

After the installation is complete, press Ctrl + D to stop the container.

5. Operation check

Launch the container

$ docker-compose up -d

-d: Run the process in the background

5-1. Rails Access localhost: 3000 and confirm that the following page is displayed

5-2. Vue Access localhost: 8080 and confirm that the following page is displayed

in conclusion

Thank you for your hard work. This time I wrote about how to build an environment of Ruby on Rails + Vue + MySQL with Docker.

Vue and Rails are not so expensive to learn, so even beginners can recommend them. Please try!