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.

Recommended Posts

Environnement Build Rails (API) x MySQL x Nuxt.js avec Docker
Construire un environnement Rails 6 + MySQL avec Docker compose
Comment créer un environnement Rails 6 avec Docker
Procédure de construction de l'environnement Docker "Rails 6 x MySQL 8" à partager avec les équipes
[Rails] Comment créer un environnement avec Docker
[Rails API x Docker] Construction facile de l'environnement avec contrôle de la coque et du fonctionnement avec Flutter
Créer un environnement Docker avec WSL
Comment créer un environnement de développement Ruby on Rails avec Docker (Rails 5.x)
Créer un environnement local Couchbase avec Docker
Créez un environnement Docker + Laravel avec Laradock
Comment créer un environnement [TypeScript + Vue + Express + MySQL] avec Docker ~ Express ~
Créez un environnement de développement d'applications Rails avec Docker [Docker, Rails, Puma, Nginx, MySQL]
Construction d'environnement de rails avec Docker (apocalypse personnelle)
Créer un environnement de développement PureScript avec Docker
Rails 6 (mode API) + création d'environnement MySQL Docker par docker-compose (pour Mac)
Déployer sur heroku avec Docker (Rails 6, MySQL)
Procédure de création d'un environnement de développement d'applications Rails avec Docker [Rails, MySQL, Docker]
Modifier Mysql avec des commandes dans l'environnement Docker
Comment créer un environnement [TypeScript + Vue + Express + MySQL] avec Docker ~ MySQL ~
[Docker] Construction de l'environnement de développement Rails6 / Ruby2.7 / MySQL8
Construire un environnement pour Laravel + MySQL + phpMyadmin avec Docker
Créer un environnement de développement Wordpress avec Docker
J'ai essayé de créer un serveur API avec Go (Echo) x MySQL x Docker x Clean Architecture
Créer un environnement de développement pour Django + MySQL + nginx avec Docker Compose
[Docker] Construisez l'environnement d'exécution de Jupyter Lab avec Docker
Créer un environnement avec Docker sur AWS
Comment créer un environnement [TypeScript + Vue + Express + MySQL] avec Docker ~ Sequelize ~
Créer un environnement de vérification des opérations TensorFlow avec Docker
Créer un environnement de débogage sur un conteneur - Créer un environnement de développement local pour les didacticiels Rails avec Docker -
J'ai construit un environnement de rails avec docker et mysql, mais j'étais malade
Créez un environnement de "développement d'API + vérification d'API à l'aide de Swagger UI" avec Docker
Créez une API de tableau d'affichage avec certification et autorisation avec Rails 6 # 1 Construction de l'environnement
Modèle: créer un environnement de développement Ruby / Rails avec un conteneur Docker (version Ubuntu)
Modèle: créer un environnement de développement Ruby / Rails avec un conteneur Docker (version Mac)
Créer un environnement de développement pour Docker + Rails6 + Postgresql
Présentation de Rspec avec Ruby on Rails x Docker
Créer un environnement Laravel / Docker avec VSCode devcontainer
Créez rapidement un environnement de développement WordPress avec Docker
Comment créer une API avec GraphQL et Rails
Créer un environnement mecab (dictionnaire NEologd) avec Docker (ubuntu)
Construction de l'environnement Rails Docker
Docker x Rails 6 (Mémo)
Exécutez l'environnement Docker Rails MySQL sur Heroku. concevoir et cacher l'API Twitter
[Road_node.js_1-1] La voie de la création de l'environnement Node.js Express MySQL à l'aide de Docker
Comment créer un environnement Docker avec Gradle pour IntelliJ
Créez un environnement Ruby2.7.x + Rails6.0.x + MySQL8.0.x avec Docker