[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.

$ 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.

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 スクリーンショット 2021-01-09 21.46.03.png 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

Recommended Posts

[First team development ②] Build an environment with Docker
[First team development ③] Share the development environment created with Docker
Build a PureScript development environment with Docker
Build a Wordpress development environment with Docker
Build an environment with Docker on AWS
Build an Ultra96v2 development environment on Docker 1
Build a WordPress development environment quickly with Docker
[Rails] How to build an environment with Docker
Build docker environment with WSL
Build an environment of "API development + API verification using Swagger UI" with Docker
Build an environment of Ruby2.7.x + Rails6.0.x + MySQL8.0.x with Docker
Build Java development environment with WSL2 Docker VS Code
Build a Node.js environment with Docker
Build PlantUML environment with VSCode + Docker
Build environment with vue.js + rails + docker
Build Rails environment with Docker Compose
Build jooby development environment with Eclipse
Build Unity development environment on docker
Build docker + laravel environment with laradock
How to build Rails, Postgres, ElasticSearch development environment with Docker
Laravel development environment construction with Docker (Mac)
Create Spring Boot-gradle-mysql development environment with Docker
[Docker] Build Jupyter Lab execution environment with Docker
Lightweight PHP 7.4 development environment created with Docker
Build TensorFlow operation check environment with Docker
How to build Rails 6 environment with Docker
Build a simple Docker + Django development environment
Build Go development environment with WSL2 + Docker Desktop + VSCode (Remote --Containers)
[App development 0.5] [Node.js express Docker] Build an environment for Node.js Express MongoDB using Docker
I tried to build an http2 development environment with Eclipse + Tomcat
Build debug environment on container --Build local development environment for Rails tutorial with Docker-
Build a development environment for Docker + Rails6 + Postgresql
Build a Laravel / Docker environment with VSCode devcontainer
I tried to build a Firebase application development environment with Docker in 2020
[Copy and paste] Build a Laravel development environment with Docker Compose Part 2
Build a simple Docker Compose + Django development environment
How to build a Ruby on Rails development environment with Docker (Rails 6.x)
Build a local development environment for Rails tutorials with Docker (Rails 6 + PostgreSQL + Webpack)
[Copy and paste] Build a Laravel development environment with Docker Compose Participation
[Win10] Build a JSF development environment with NetBeans
Build a development environment for Docker, java, vscode
How to build a Ruby on Rails development environment with Docker (Rails 5.x)
Build mecab (NEologd dictionary) environment with Docker (ubuntu)
Wordpress local environment construction & development procedure with Docker
Template: Build a Ruby / Rails development environment with a Docker container (Mac version)
Create a Spring Boot development environment with docker
Build a Java development environment with VS Code
[App development 1] [Node.js express Docker] Build an environment for Node.js Express MongoDB (mongoose) using Docker [December 2020]
[Error resolution] Occurs when trying to build an environment for spring with docker
How to build an environment of [TypeScript + Vue + Express + MySQL] with Docker ~ Vue edition ~
Build a development environment to create Ruby on Jets + React apps with Docker
Build Java development environment with VS Code on Mac
How to build docker environment with Gradle for intelliJ
Easily build a Vue.js environment with Docker + Vue CLI
Build Docker + Laravel PHP + Vue.js development environment in 5 minutes
Create an E2E test environment with Docker x Cypress
[Note] Build a Python3 environment with Docker in EC2
How to build Java development environment with VS Code
Build Rails (API) x MySQL x Nuxt.js environment with Docker
Build an Android image for Orange Pi 4 with Docker
[Environment construction] Build a Java development environment with VS Code!