[First team development ②] Build an environment with Docker

It is a continuation from Last time. I made a development environment for Docker + Rails + Vue + MySQL, so a memorandum. (* This article will be edited as appropriate.)

procedure

1. Preparation
2. Create Dockerfile (Rails, Vue)
3. Create docker-compose.yml
4. Project creation
5. Operation check
6. Push to GitHub

1. Preparation

-Create a working branch

$ git branch (→ Make sure you are on the develop branch)
$ git checkout -b feature/docker-test

[Branch structure at this point]
main
develop
 └── feature/docker-test   <- New!

・ Version confirmation etc.

$ docker -v
Docker version 19.03.8, build afacb8b
$ docker-compose -v
docker-compose version 1.25.4, build 8d51620a

・ Click here for the final directory structure. [Reference]

[project_name]
├── api
│   ├── Dockerfile
│   ├── Gemfile
│   └── Gemfile.lock
├── docker-compose.yml
└── front
    ├── Dockerfile
    ├── ...

2. Create Dockerfile

Create Dockerfiles for Rails and Vue respectively.

First, create a directory.

(Current directory: project_name)
$ mkdir api front
$ ls
api front

2.1 Rails Create a Rails Dockerfile. $ touch api/Dockerfile

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

This Dockerfile requires a separate "Gemfile containing Rails". Therefore, create a Gemfile and an empty Gemfile.lock under the api. $ touch api/Gemfile $ touch api/Gemfile.lock

api/Gemfile

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

2.2 Vue Next, create a Vue Dockerfile. $ touch front/Dockerfile

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

3. Create docker-compose.yml

Next, create docker-compose.yml under the project directory.

docker-compose.yml

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
      - node_modules:/app/node_modules
    ports:
      - '8080:8080'
    tty: true
    stdin_open: true
    command: npm run serve

volumes:
  mysql_data:
  bundle:
  node_modules:

4. Project creation

From here is the production! Create a Rails project and a Vue project in order. Vue is created interactively using something called vue-cli.

4-1. Rails

Rails project creation

First, create a Rails project with rails new. Rails files will be created under the api directory.

• It will take some time.

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

docker image update

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

$ docker-compose build

Modify database.yml

Modify the Rails DB config file api/config/database.yml. For (password), describe the one specified by the environment variable MYSQL_ROOT_PASSWORD in docker-compose.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

DB creation

$ docker-compose run web rails db:create

[Addition] An error occurred in the above command → resolved.

My response

$ docker-compose run web rails db:create → Access Denied error
$ docker-compose down --volumes
$ docker-compose up -d
$ docker-compose run web rails db:create → Errno::ENOENT error
$ docker-compose down
$ docker-compose run web rails db:create → success
Created database 'app_development'
Created database 'app_test'

Reference: https://qiita.com/fujisawatk/items/80da801c7e2ac68e4887 … The cause is around volume? I still don't understand Docker enough ... (^_^;)

Try $ docker-compose up -d, access localhost: 3000, and if it is displayed normally, it is successful!

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 settings are for example.

Reference: https://qiita.com/Kyou13/items/be9cdc10c54d39cded15

$ docker-compose run front sh (← Run shell in Vue container)

Below are the settings.

$ 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. Also, rewrite front/Dockerfile as follows.

FROM node:12.18.3-alpine

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

RUN apk update      (Change)
COPY package.json . (add to)
RUN npm install     (add to)

5. Operation check

Rails Access localhost: 3000 and succeed when" Yay! You are on Rails! "Is displayed. Vue Go to localhost: 8080 and Is displayed, it is successful.

6. Push to GitHub

$ git status
On branch feature/docker-test
nothing to commit, working tree clean
$ git push origin feature/docker-test

Reference article

(This article) -How to build Rails + Vue + MySQL environment with Docker [2020/09 latest version] -Docker Rails Vue.js MySQL environment construction -Tutorial to learn how to put the development environment on Docker and its advantages in 3 steps ・ [Mac] How to create Docker and development environment

(Other team development methods) -Git develop, feature branch from creation to merge (personal memo) ★ Manual for team development on Github