[RUBY] Comment créer un environnement Rails + Vue + MySQL avec Docker [dernière version 2020/09]

introduction

La combinaison de Vue en façade et de Rails sur le serveur API est l'une des principales configurations au Japon. Cette fois, nous allons construire cette configuration à l'aide de Docker.

En lisant cet article, vous pourrez créer les configurations suivantes pour Docker! API: ** Série Rails 6 ** Face avant: ** Série Vue (TypeScript) 2 ** DB： MySQL 5.7

Flux de construction d'environnement

1. Rails, création du Dockerfile Vue
2. Créez docker-compose.yml
3. Rails, création de projet Vue

La structure finale du répertoire est la suivante.

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

Commençons à construire l'environnement!

1. Créer un répertoire

Créez le répertoire du projet et l'API et les répertoires frontaux en dessous

$ mkdir project_name
$ cd project_name
$ mkdir api front

Les commandes suivantes sont décrites en supposant que le répertoire courant est le répertoire du projet.

2. Créez Dockerfile

Créez respectivement des fichiers Dockerfiles pour Rails et Vue. 2-1. Rails Version spécifiée

• 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 / * efface le cache d'apt. Cela permet de réduire la taille du fichier image Docker.

Ce Dockerfile nécessite un Gemfile contenant des Rails, alors créez le fichier suivant dans ʻapi / `.

api/Gemfile

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

Il crée également un Gemfile.lock vide.

$ touch api/Gemfile.lock

Structure du répertoire à ce stade

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

2-2. Vue Version spécifiée

• node 12.18.3 --Vue 2 series <-Ceci est spécifié lors de la création d'un projet Vue dans le conteneur décrit plus loin.

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

Structure du répertoire à ce stade

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

3. Créez docker-compose.yml

Créez le fichier docker-compose.yaml suivant dans le répertoire de votre projet

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:

Spécifiez l'hôte avec -b lors du démarrage du serveur de développement Rails. S'il est omis, le conteneur n'est pas accessible depuis l'hôte. En spécifiant 0.0.0.0, vous pouvez écouter sur toutes les interfaces du conteneur, vous pouvez donc accéder au conteneur du côté hôte.

MySQL et les données groupées sont montées sur le volume et conservées. Cela n'effacera pas les données si vous supprimez le conteneur. Même si vous ne montez pas le bundle, vous pouvez créer l'image à chaque fois que vous ajoutez une gemme, mais cela prend du temps. Il semble que l'ajout d'un gem peut être fait avec docker-compose run api bundle install en montant le bundle.

Structure du répertoire à ce stade

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

4. Créez un projet

4-1. Rails ** Création d'un projet Rails ** Créer un projet Rails avec rails new

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

À propos de l'argument de rails new --force: écraser et mettre à jour Gemfile de force --database: Faire en sorte que la base de données utilise MySQL --api: Crée un projet en mode API. En mode API, les fichiers liés à l'interface utilisateur sont omis. --skip-bundle: Omit bundle install. Il s'agit de faire une `` installation groupée '' sur la prochaine construction d'image de docker.

** mettre à jour l'image du docker ** Maintenant que le Gemfile a été mis à jour, créez et mettez à jour l'image du docker.

$ docker-compose build

** Modifier le fichier de configuration de la base de données **

Modifiez le fichier de configuration de la base de données Rails ʻ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 est celui spécifié par la variable d'environnement MYSQL_ROOT_PASSWORD dans docker-compose.yaml --host est le nom du service DB Cela correspond à.

** Création d'un DB **

$ docker-compose run web rails db:create 

Ceci termine la construction de l'environnement Rails!

4-2. Vue ** Créer un projet Vue avec vue-cli ** Allez dans le conteneur et utilisez vue-cli pour créer de manière interactive un projet Vue.

Les éléments de configuration suivants sont pour vue-cli v4.5.6. Les paramètres ne sont qu'un exemple, alors n'hésitez pas à les utiliser.

Exécuter le shell dans le conteneur Vue

$ docker-compose run front sh

Ci-dessous, nous le définirons de manière interactive dans le conteneur frontal.

$ vue create .
#Répertoire actuel(/app)Confirmation de la création ou non
? Generate project in current directory? (Y/n) Yes

#Utiliser ou non des préréglages
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features #Sélectionnez ceci pour installer TypeScript

#Sélectionnez les bibliothèques à installer dans votre projet
? Check the features needed for your project:
 ◉ Choose Vue version #
 ◉ Babel
❯◉ TypeScript #Sélectionnez ceci si vous souhaitez installer TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

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

#Utiliser ou non le style de classe. Non parce que j'utilise le style Object
? Use class-style component syntax? (Y/n) No

#Utiliser ou non babel avec TypeScript
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Yes

#Quoi utiliser pour les paramètres Lint et Formatter
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
❯ ESLint + Prettier
  TSLint (deprecated)

#Moment d'exécution de la charpie
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save #Exécutez Lint lors de l'enregistrement
 ◯ Lint and fix on commit (requires Git)

# Babel,Où écrire les paramètres tels que ESLint
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files #Faire de chaque fichier de réglage
  In package.json

#Voulez-vous enregistrer le contenu défini cette fois en tant que préréglage? En gros, aucun projet ne sera créé après cela.
? Save this as a preset for future projects? No

#Quoi utiliser pour le gestionnaire de packages
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
  Use NPM

Une fois l'installation terminée, appuyez sur «Ctrl + D» pour arrêter le conteneur.

5. Contrôle de fonctionnement

Lancer le conteneur

$ docker-compose up -d

-d: exécuter le processus en arrière-plan

5-1. Rails Accédez à localhost: 3000 et confirmez que la page suivante est affichée

5-2. Vue Accédez à localhost: 8080 et confirmez que la page suivante est affichée

en conclusion

Je vous remercie pour votre travail acharné. Cette fois, j'ai écrit sur la façon de créer un environnement pour Ruby on Rails + Vue + MySQL avec Docker.

Vue et Rails ne sont pas si chers à apprendre, donc même les débutants peuvent les recommander. S'il vous plaît essayez!