[RUBY] So erstellen Sie eine Rails + Vue + MySQL-Umgebung mit Docker [neueste Version 2020/09]

Einführung

Die Kombination von Vue auf der Vorderseite und Rails auf dem API-Server ist eine der Hauptkonfigurationen in Japan. Dieses Mal erstellen wir diese Konfiguration mit Docker.

Wenn Sie diesen Artikel lesen, können Sie die folgenden Konfigurationen für Docker erstellen! API: ** Rails 6 Serie ** Vorderseite: ** Vue (TypeScript) 2-Serie ** DB： MySQL 5.7

Ablauf der Umweltkonstruktion

1. Rails, Vue Dockerfile-Erstellung
2. Erstellen Sie die Datei docker-compose.yml
3. Rails, Vue-Projekterstellung

Die endgültige Verzeichnisstruktur lautet wie folgt.

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

Beginnen wir mit dem Aufbau der Umwelt!

1. Verzeichnis erstellen

Erstellen Sie das Projektverzeichnis sowie die API und die Frontverzeichnisse darunter

$ mkdir project_name
$ cd project_name
$ mkdir api front

Nachfolgende Befehle werden unter der Annahme beschrieben, dass das aktuelle Verzeichnis das Projektverzeichnis ist.

2. Erstellen Sie eine Docker-Datei

Erstellen Sie Docker-Dateien für Rails bzw. Vue. 2-1. Rails Angegebene Version

• 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 / * löscht den Cache von apt. Dies dient dazu, die Größe der Docker-Bilddatei zu verringern.

Für diese Docker-Datei ist eine Gem-Datei erforderlich, die Rails enthält. Erstellen Sie daher die folgende Datei in "api /".

api/Gemfile

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

Außerdem wird ein leeres Gemfile.lock erstellt.

$ touch api/Gemfile.lock

Verzeichnisstruktur an dieser Stelle

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

2-2. Vue Angegebene Version

• node 12.18.3 --Vue 2-Serie <- Dies wird beim Erstellen eines Vue-Projekts in dem später beschriebenen Container angegeben.

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

Verzeichnisstruktur an dieser Stelle

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

3. Erstellen Sie docker-compose.yml

Erstellen Sie die folgende docker-compose.yaml in Ihrem Projektverzeichnis

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:

Geben Sie den Host mit -b an, wenn Sie den Rails-Entwicklungsserver starten. Wenn nicht angegeben, kann vom Host aus nicht auf den Container zugegriffen werden. Durch Angabe von "0.0.0.0" können Sie alle Schnittstellen des Containers abhören, sodass Sie von der Hostseite aus auf den Container zugreifen können.

MySQL- und Bundle-Daten werden auf dem Volume bereitgestellt und bleiben erhalten. Dadurch werden die Daten nicht gelöscht, wenn Sie den Container löschen. Selbst wenn Sie das Bundle nicht bereitstellen, können Sie das Image jedes Mal erstellen, wenn Sie einen Edelstein hinzufügen. Dies dauert jedoch einige Zeit. Durch das Mounten des Bundles scheint das Hinzufügen eines Gems mit "Docker-Compose Run API Bundle Install" durchgeführt zu werden.

Verzeichnisstruktur an dieser Stelle

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

4. Erstellen Sie ein Projekt

4-1. Rails ** Erstellen eines Rails-Projekts ** Erstellen Sie ein Rails-Projekt mit "Rails New"

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

Über das Argument "Rails New" --force: Gemfile zwangsweise überschreiben und aktualisieren --database: Machen Sie die Datenbank verwendet MySQL --api: Erstellt ein Projekt im API-Modus. Im API-Modus werden UI-bezogene Dateien weggelassen. --skip-bundle: Bundle install weglassen`. Dies ist eine "Bundle-Installation" beim nächsten Docker-Image-Build.

** Docker-Image aktualisieren ** Nachdem die Gem-Datei aktualisiert wurde, erstellen und aktualisieren Sie das Docker-Image.

$ docker-compose build

** DB-Konfigurationsdatei ändern **

Ändern Sie die Rails DB-Konfigurationsdatei "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 ist das von der Umgebungsvariablen MYSQL_ROOT_PASSWORD in docker-compose.yaml angegebene --host ist der Name des DB-Dienstes Es entspricht.

** DB erstellen **

$ docker-compose run web rails db:create 

Damit ist der Aufbau der Rails-Umgebung abgeschlossen!

4-2. Vue ** Erstellen Sie ein Vue-Projekt mit vue-cli ** Gehen Sie in den Container und erstellen Sie mit vue-cli interaktiv ein Vue-Projekt.

Die folgenden Einstellungselemente gelten für vue-cli v4.5.6. Die Einstellungen sind nur ein Beispiel. Sie können sie also gerne verwenden.

Führen Sie die Shell im Vue-Container aus

$ docker-compose run front sh

Unten setzen wir es interaktiv in den vorderen Container.

$ vue create .
#Aktuelles Verzeichnis(/app)Bestätigung, ob erstellt werden soll
? Generate project in current directory? (Y/n) Yes

#Gibt an, ob Voreinstellungen verwendet werden sollen
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features #Wählen Sie diese Option, um TypeScript zu installieren

#Wählen Sie Bibliotheken aus, die in Ihrem Projekt installiert werden sollen
? Check the features needed for your project:
 ◉ Choose Vue version #
 ◉ Babel
❯◉ TypeScript #Wählen Sie diese Option, wenn Sie TypeScript installieren möchten
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

#Auswahl der Vue-Version
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 2.x
  3.x (Preview)

#Gibt an, ob der Klassenstil verwendet werden soll. Nein, weil ich den Objektstil verwende
? Use class-style component syntax? (Y/n) No

#Gibt an, ob babel mit TypeScript verwendet werden soll
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Yes

#Verwendung für die Einstellungen für Flusen und Formatierer
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
❯ ESLint + Prettier
  TSLint (deprecated)

#Fusselausführungszeitpunkt
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save #Führen Sie Lint beim Speichern aus
 ◯ Lint and fix on commit (requires Git)

# Babel,Wo man Einstellungen wie ESLint schreibt
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files #Machen Sie jede Einstellungsdatei
  In package.json

#Möchten Sie den diesmal eingestellten Inhalt als Voreinstellung speichern? Grundsätzlich wird danach kein Projekt erstellt.
? Save this as a preset for future projects? No

#Was für den Paketmanager zu verwenden
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
  Use NPM

Drücken Sie nach Abschluss der Installation Strg + D, um den Container anzuhalten.

5. Funktionsprüfung

Starten Sie den Container

$ docker-compose up -d

-d: Führen Sie den Prozess im Hintergrund aus

5-1. Rails Greifen Sie auf localhost: 3000 zu und bestätigen Sie, dass die folgende Seite angezeigt wird

5-2. Vue Greifen Sie auf localhost: 8080 zu und bestätigen Sie, dass die folgende Seite angezeigt wird

abschließend

Danke für deine harte Arbeit. Dieses Mal schrieb ich darüber, wie man mit Docker eine Umgebung für Ruby on Rails + Vue + MySQL erstellt.

Vue und Rails sind nicht so teuer zu lernen, so dass selbst Anfänger sie empfehlen können. Bitte versuche!