Build Rails (API) x MySQL x Nuxt.js Umgebung mit Docker

Einführung

In einem Projekt habe ich mich für Rails (API-Server) MySQL (DB-Server) x Nuxt (Webserver) entschieden. Daher habe ich mich für Docker entschieden, um die Umgebung zu erstellen. Gleichzeitig mit dem Hinterlassen eines Protokolls werde ich versuchen, eine Umgebung in einer Form zu erstellen, die so universell wie möglich wiederverwendet werden kann.

"Wiederverwendbare Form" bedeutet, dass ich, als ich Laravel zuvor in einem anderen Projekt verwendet habe, die Umgebung mit laradock erstellt habe, die Umgebungsvariable jedoch den Anwendungsnamen und enthält Geben Sie einfach die Portnummer an und es wird ein Container usw. erstellt. Dieses Mal werde ich die Rails-Version machen. (Laradock verfügt übrigens nicht über eine Docker-Datei, um einen Container für nuxt zu starten.)

Diesmal lesen wir lediglich den Wert aus der Umgebungsvariablen und legen die Docker-Datei und die Datei docker-compose.yml fest. Die erstellte Umgebung finden Sie unter hier. Überprüfen Sie die Details daher jederzeit.

Verzeichnisaufbau

.
|- mysql
|   |- Dockerfile
|   └ my.cnf
|- nuxt
|   |- src
|   |└ Nuxt-Anwendung
|   └ Dockerfile
|- rails
|   |- src
|   |   |- Gemfile
|   |   |- Gemfile.lock
|   |└ Schienenanwendung
|   └ Dockerfile
|- docker-compose.yml
└ .env

MySQL Server

Zuerst werden wir einen DB-Server erstellen.

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

Container erstellen und starten

$ docker-compose up -d mysql

Die env-Datei sieht übrigens so aus. Bitte stellen Sie hier individuell ein, wie Sie möchten.

.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

API-Server erstellen (Rails)

Dieses Mal werden wir eine Rails-Umgebung als API-Server erstellen, der von Nuxt (vorne) aufgerufen wird.

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"]

Durch Angabe von CMD kann der Rails-Server nur durch Starten des Containers gestartet werden.

docker-compose.yml

docker-compose.yml

version: "3.7"

services:
  mysql:
    #Kürzung

  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

Durch Angabe von MySQL mit Depends_on wird der Rails-Server nach dem Start des MySQL-Servercontainers gestartet.

Rails starten

rails/src/Gemfile

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

Erstellen Sie auch ein Gemfile.lock.

touch rails/src/Gemfile.lock

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

Legen Sie das Kennwort und den Host in database.yml fest

rails/src/config/database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: root # <= .MYSQL in env gesetzt_ROOT_PASSWORD
  host: mysql # <= docker-compose.Der im yml-Dienst festgelegte Dienstname

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

Die Rails-Anwendung sollte jetzt betriebsbereit sein.

Bitte greifen Sie auf 23450 zu (Portnummer folgt Ihrer env-Datei) und überprüfen Sie den Start.

# Nuxt (Frontumgebungskonstruktion)
 Schließlich werden wir mit Nuxt einen Anwendungsserver erstellen.

 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:
    #Kürzung

  rails:
    #Kürzung

  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

Nuxt-Anwendungserstellung

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

Für Nuxt.js-Module empfehlen wir die Auswahl von Axios. Auch wenn ich es diesmal nicht eingeführt habe, können Sie bei der Installation von Vuetify im UI-Framework problemlos nette Komponenten verwenden. Ich denke also, dass es ein perfekter Rahmen für diejenigen ist, die nicht gut an der Rezeption sind. Sie können es später installieren. Fügen Sie es daher bei Bedarf hinzu.

Nuxt Server Einstellungen

js:nxut/src/nuxt.config.js

server: {
  port: 8080, //Standard: 3000
  host: '0.0.0.0' //Standard: localhost
},

Standardmäßig ist nuxt so eingestellt, dass der Server auf Port 3000, localhost, gestartet wird. Wenn Sie die Portnummer willkürlich geändert haben, fügen Sie die obige Servereinstellung am Ende zu nuxt.config.js hinzu.

Starten Sie den Nuxt-Server

$ docker-compose up -d nuxt

Das Erstellen der ersten Nuxt-Anwendung wird einige Zeit dauern. Ich denke, es wird höchstens 1 Minute dauern, also warten Sie bitte einen Moment und greifen Sie auf localhost zu: 8080. Wenn Sie die oberste Seite von nuxt sehen können, ist die Entwicklungsumgebung vollständig.

Apropos

Derzeit implementiere ich es mit Docker auf Vagrant. Dadurch wurden Container schneller aufgebaut und heiß nachgeladen. (Ich fühle mich wie es geworden ist.) Ich werde auch dafür ein Protokoll hinterlassen.