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

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

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 スクリーンショット 2020-09-24 22.37.32.png

5-2. Vue Access localhost: 8080 and confirm that the following page is displayed スクリーンショット 2020-09-24 23.30.07.png

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!

Recommended Posts

How to build Rails + Vue + MySQL environment with Docker [2020/09 latest version]
How to build Rails 6 environment with Docker
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ Express ~
[Rails] How to build an environment with Docker
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ MySQL edition ~
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ Sequelize ~
How to build Rails, Postgres, ElasticSearch development environment with Docker
How to build a Ruby on Rails development environment with Docker (Rails 5.x)
How to build docker environment with Gradle for intelliJ
Build Rails (API) x MySQL x Nuxt.js environment with Docker
Rails + MySQL environment construction with Docker
Build environment with vue.js + rails + docker
Build Rails environment with Docker Compose
How to use mysql with M1 mac Docker preview version
[Rails] [Docker] Copy and paste is OK! How to build a Rails development environment with Docker
Create Rails 6 + MySQL environment with Docker compose
[Rails] How to use rails console with docker
Deploy to heroku with Docker (Rails 6, MySQL)
How to install Pry after building Rails development environment with Docker
How to link Rails6 Vue (from environment construction)
Rails6 [API mode] + MySQL5.7 environment construction with Docker
How to build API with GraphQL and Rails
Template: Build a Ruby / Rails development environment with a Docker container (Ubuntu version)
Template: Build a Ruby / Rails development environment with a Docker container (Mac version)
How to build an environment with Docker, which is the minimum required to start a Rails application
[Road _node.js_1-1] Road to build Node.js Express MySQL environment using Docker
Easily build a Vue.js environment with Docker + Vue CLI
Build docker environment with WSL
How to build Java development environment with VS Code
[Docker + Rails] How to deal with Rails server startup failure
How to quit Docker for Mac and build a Docker development environment with Ubuntu + Vagrant
How to set environment variables when using Payjp with Rails
Rails application development environment construction with Docker [Docker, Rails, Puma, Nginx, MySQL]
Build a Node-RED environment with Docker to move and understand
Create a Vue3 environment with Docker!
Build Couchbase local environment with Docker
Build PlantUML environment with VSCode + Docker
How to get along with Rails
Update MySQL from 5.7 to 8.0 with Docker
Build docker + laravel environment with laradock
How to build CloudStack using Docker
How to start Camunda with Docker
Build apache7.4 + mysql8 environment with Docker (with initial data) (your own memo)
I tried to build the environment of PlantUML Server with Docker
Super beginner builds Rails6 + Postgresql environment with Docker to the end
Procedure for building a Rails application development environment with Docker [Rails, MySQL, Docker]
Build a development environment for Django + MySQL + nginx with Docker Compose
"Rails 6 x MySQL 8" Docker environment construction procedure for sharing with teams
Steps to build a Ruby on Rails development environment with Vagrant
[Rails] How to reset the database in production environment (Capistrano version)
GPU environment construction with Docker [October 2020 version]
Rails environment construction with Docker (personal apocalypse)
Build a PureScript development environment with Docker
Migrate existing Rails 6 apps to Docker environment
Edit Mysql with commands in Docker environment
Create a MySQL environment with Docker from 0-> 1
How to use MySQL in Rails tutorial
[Docker] Development environment construction Rails6 / Ruby2.7 / MySQL8
Laravel + MySQL + phpMyadmin environment construction with Docker
Build a Wordpress development environment with Docker
[Docker] Build Jupyter Lab execution environment with Docker