Environnement Build Rails (API) x MySQL x Nuxt.js avec Docker

introduction

Dans un projet, j'ai décidé d'utiliser Rails (serveur API) MySQL (serveur DB) x Nuxt (serveur Web), j'ai donc décidé d'utiliser Docker pour créer l'environnement. En même temps que de laisser un journal, j'essaierai de créer un environnement sous une forme réutilisable le plus universellement possible.

Le «formulaire réutilisable» signifie que lorsque j'ai utilisé Laravel dans un autre projet auparavant, j'ai construit l'environnement avec laradock, mais la variable d'environnement inclut le nom de l'application et Spécifiez simplement le numéro de port, et il construira un conteneur, etc. Cette fois, je vais faire la version Rails. (À propos, laradock n'a pas de fichier Docker pour lancer un conteneur pour nuxt.)

Tout ce que nous faisons cette fois-ci est de lire la valeur de la variable d'environnement et de définir le Dockerfile et docker-compose.yml. L'environnement créé peut être trouvé à ici, veuillez donc vérifier les détails à tout moment.

Structure du répertoire

.
|- mysql
|   |- Dockerfile
|   └ my.cnf
|- nuxt
|   |- src
|   |└ application nuxt
|   └ Dockerfile
|- rails
|   |- src
|   |   |- Gemfile
|   |   |- Gemfile.lock
|   |└ application des rails
|   └ Dockerfile
|- docker-compose.yml
└ .env

Serveur MySQL

Tout d'abord, nous allons construire un serveur DB.

Dockerfile

mysql/Dockerfile

ARG MYSQL_VERSION
FROM mysql:${MYSQL_VERSION}

ENV TZ ${TIMEZONE}
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone && chown -R mysql:root /var/lib/mysql/

COPY my.cnf /etc/mysql/conf.d/my.cnf

RUN chmod 0444 /etc/mysql/conf.d/my.cnf

CMD ["mysqld"]

EXPOSE 3306

docker-compose.yml

docker-compose.yml

version: "3.7"

services:
  mysql:
    build:
      context: ./mysql
      args:
        - MYSQL_VERSION=${MYSQL_VERSION}
    image: ${PROJECT_NAME}-mysql-img
    container_name: "${PROJECT_NAME}_mysql"
    environment:
      - MYSQL_DATABASE=${MYSQL_DATABASE}
      - MYSQL_USER=${MYSQL_USER}
      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
      - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
      - TZ=${TIMEZONE}
    volumes:
      - ${DATA_PATH_HOST}/mysql:/var/lib/mysql
    ports:
      - "${MYSQL_PORT}:3306"
    user: "1000:50"
    command: --innodb-use-native-aio=0

Construire et démarrer le conteneur

$ docker-compose up -d mysql

Au fait, le fichier env ressemble à ceci. Veuillez définir ici individuellement comme vous le souhaitez.

.env

###########################################################
###################### General Setup ######################
###########################################################
# PROJECT NAME
PROJECT_NAME=railsdock

# TIMEZONE
TIMEZONE=Asia/Tokyo

# Choose storage path on your machine. For all storage systems
DATA_PATH_HOST=./.storage

### MYSQL #################################################
MYSQL_VERSION=8.0.21
MYSQL_DATABASE=default
MYSQL_USER=default
MYSQL_PASSWORD=secret
MYSQL_PORT=3306
MYSQL_ROOT_PASSWORD=root
MYSQL_ENTRYPOINT_INITDB=./mysql/docker-entrypoint-initdb.d

### Rails #################################################
RAILS_PORT=23450

### NUXT #################################################
NUXT_PORT=8080

Construire un serveur API (Rails)

Cette fois, nous allons créer un environnement Rails en tant que serveur API appelé depuis Nuxt (avant).

Dockerfile

rails/Dockerfile

FROM ruby:2.7.1

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

WORKDIR /rails/src
COPY ./src/Gemfile /rails/src/
COPY ./src/Gemfile.lock /rails/src/

RUN bundle install

EXPOSE 23450

CMD ["bundle", "exec", "rails", "server", "-p", "23450", "-b", "0.0.0.0"]

En spécifiant CMD, le serveur rails peut être démarré simplement en démarrant le conteneur.

docker-compose.yml

docker-compose.yml

version: "3.7"

services:
  mysql:
    #réduction

  rails:
    container_name: ${PROJECT_NAME}-rails
    build: rails/
    image: ${PROJECT_NAME}-rails-img
    volumes:
      - ./rails:/rails
    ports:
      - "${RAILS_PORT}:23450"
    depends_on: 
      - mysql
    stdin_open: true
    tty: true

En spécifiant mysql avec depend_on, le serveur rails sera démarré après le démarrage du conteneur du serveur mysql.

Rails de lancement

rails/src/Gemfile

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

Créez également un Gemfile.lock.

touch rails/src/Gemfile.lock

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

Définissez le mot de passe et l'hôte dans database.yml

rails/src/config/database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: root # <= .MYSQL défini dans env_ROOT_PASSWORD
  host: mysql # <= docker-compose.Le nom du service défini dans le service yml

$ docker-compose run rails rails db:create
$ docker-compose up -d rails

L'application Rails devrait maintenant être opérationnelle.

Veuillez accéder au 23450 (le numéro de port suit votre fichier env) et vérifiez le démarrage.

# Nuxt (construction d'environnement avant)
 Enfin, nous allons construire un serveur d'applications avec Nuxt.

 Dockerfile


#### **`nuxt/Dockerfile`**
```dockerfile

FROM node:14.5.0

ENV LNAG=C.UTF-8 \
    TZ=Asia/Tokyo

WORKDIR /nuxt/src

RUN apt-get update && \
    yarn global add \
                create-nuxt-app \
                nuxt \
                @vue/cli \
                pug \
                pug-plain-loader \
                node-sass \
                sass-loader

ENV HOST 0.0.0.0

EXPOSE 8080

CMD [ "yarn", "dev" ]

docker-compose.yml

docker-compose.yml

version: "3.7"

services:
  mysql:
    #réduction

  rails:
    #réduction

  nuxt:
    build:
      context: ./nuxt
      dockerfile: Dockerfile
    image: ${PROJECT_NAME}-nuxt-img
    container_name: "${PROJECT_NAME}_nuxt_app"
    environment:
      - HOST=0.0.0.0
    volumes:
      - ./nuxt:/nuxt:cached
    ports:
      - ${NUXT_PORT}:8080
    stdin_open: true
    tty: true

Création d'applications Nuxt

$ docker-compose run nuxt npx create-nuxt-app .


create-nuxt-app v3.1.0
✨  Generating Nuxt.js project in .
? Project name: src
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code)

Pour les modules Nuxt.js, nous vous recommandons de choisir axios. De plus, même si je ne l'ai pas introduit cette fois, si vous installez Vuetify dans le framework UI, vous pouvez facilement utiliser de jolis composants. Donc, je pense que c'est un cadre parfait pour ceux qui ne sont pas bons à la réception. Vous pouvez l'installer plus tard, veuillez donc l'ajouter lorsque vous en aurez besoin.

paramètres du serveur nuxt

js:nxut/src/nuxt.config.js

server: {
  port: 8080, //Défaut: 3000
  host: '0.0.0.0' //Défaut: localhost
},

Par défaut, nuxt est configuré pour démarrer le serveur sur le port 3000, localhost. Si vous avez changé le numéro de port de manière arbitraire, ajoutez le paramètre de serveur ci-dessus à nuxt.config.js à la fin.

démarrer le serveur nuxt

$ docker-compose up -d nuxt

Construire la première application nuxt prendra un certain temps. Je pense que cela prendra environ 1 minute au plus, alors attendez un moment et accédez à localhost: 8080. Si vous pouvez voir la première page de nuxt, l'environnement de développement est terminé.

Au fait

Actuellement, je l'implémente avec Docker sur Vagrant. Cela a rendu les constructions de conteneurs et les recharges à chaud plus rapides. (J'ai l'impression que c'est devenu.) Je vais également laisser un journal pour cela.