[RUBY] Comment lier Rails6 Vue (à partir de la construction de l'environnement)

introduction

Lorsque vous souhaitez développer sous l'environnement Rails, Vue, Posgre à l'aide de Docker J'ai eu du mal à créer l'environnement pour Rails et Vue, alors enregistrez-le comme mon propre mémo.

Ce que vous pouvez voir dans cet article

・ Rails 6 et l'environnement Docker Vue et Postgres peuvent être construits ・ Rails et Vue peuvent être liés ・ Vous pouvez utiliser l'instance et la base de données avec Pry.

environnement

MacOS Mojave Ruby 2.6.4 Rails 6.0.3.3 Vue 2.6.12 Webpack 4.44.2 yarn 1.22.5 Docker 2.3.0.5 VScode

Lien Github

Ceci est mon kit de démarrage Github Docker. Veuillez l'utiliser si vous le souhaitez. Whiro0501/Docker_Rails6_Vue

Créez un environnement Docker sur votre Mac

Terminal ouvert Créez un répertoire avec n'importe quel nom avec mkdir Passez au répertoire créé par cd Ouvrez VScode avec du code.

terminal

mkdir qiita
cd qiita
code .

VScode démarre Parce que je vais travailler dans le terminal sur VScode Si le terminal ne fonctionne pas, ouvrez le terminal avec ⬆︎ + Control + @

Copiez les fichiers dans le référentiel distant localement en entrant la commande suivante sur le terminal VScode

VScode

git clone https://github.com/Whiro0501/Docker_Rails6_Vue.git

cd vers le répertoire Docker_Rails6_Vue /

VScode

cd Docker_Rails6_Vue/

Exécutez la commande suivante pour créer l'image Docker

VScode

docker-compose build

Obtenez le module de nœud requis en procédant comme suit

VScode

docker-compose run web yarn install --check-files

Créez un DB (Postgres) en exécutant ce qui suit

VScode

docker-compose run web rake db:create

Ouvrez un autre terminal Lancez l'application Rails en procédant comme suit

VScode

#Si un autre terminal est gênant, docker-compose up -d va bien
docker-compose up

Ouvrez encore un autre terminal Chaque fois que je mets à jour la vue, elle se compile et cela prend du temps, alors procédez comme suit:

VScode

docker-compose exec web ./bin/webpack-dev-server

Accédez aux éléments suivants avec un navigateur Web

Navigateur Web

http://localhost:3000

Assurez-vous que l'application Rails démarre

Comment travaillez-vous avec Vue et Rails?

Les rails et Vue ne sont pas liés au moment de la construction initiale, nous allons donc les lier.

Créez un contrôleur domestique ci-dessous (tout nom de contrôleur est acceptable).

VScode

docker-compose exec web rails g controller home index

Créée par index.html.erb

rb:index.html.erb

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

Ajoutez "root to: 'home # index'" au fichier suivant

routes.rb

Rails.application.routes.draw do
  root to:  'home#index'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

Accédez aux éléments suivants avec un navigateur Web

Navigateur Web

http://localhost:3000

Tout d'abord, le contenu décrit dans index.html.erb est affiché.

Maintenant que le travail de fond a été créé côté Rails, l'étape suivante consiste à établir le lien avec Vue. Réglage initial de app.vue

app.vue

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: "Hello Vue!"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

Paramétrage initial de hello_vue.js

hello_vue.js

import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)

  console.log(app)
})

app.vue est un composant de fichier unique Passé comme objet à hello_vue.js. Définissez-le pour qu'il s'affiche dans index.html.erb.

Définissez index.html.erb comme suit

erb:index.html.erb

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

<%= javascript_pack_tag 'hello_vue.js' %>
<%= stylesheet_pack_tag 'hello_vue.js' %>

Accédez aux éléments suivants avec un navigateur Web

Navigateur Web

http://localhost:3000

La liaison avec Vue est terminée !!

Description du fichier Github

Whiro0501/Docker_Rails6_Vue Tout d'abord, je vais expliquer à partir de l'état de Github du lien ci-dessus Pour expliquer brièvement, ce sera l'état après avoir réglé les deux suivants Par conséquent, c'est la théorie selon laquelle l'environnement dans lequel Rails 6, Vue et Postgres peuvent être utilisés peut être préparé.

VScode

docker-compose run web rails new . --force --database=postgresql --webpack=vue

De plus, dans l'état ci-dessus, Postgres ne peut pas fonctionner correctement avec Rails, définissez-le comme suit. J'ai également évoqué le document officiel.

database.yml:database.yml

default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgres
  password: password
  pool: 5

development:
  <<: *default
  database: myapp_development


test:
  <<: *default
  database: myapp_test


production:
  <<: *default
  database: myapp_production
  username: myapp
  password: <%= ENV['MYAPP_DATABASE_PASSWORD'] %>

Dockerfile

J'ai évoqué les meilleures pratiques dans la documentation officielle. Parce que Docker crée des couches pour chaque FROM, RUN et COPY On dit que RUN et COPY peuvent être stockés dans le moins de couches possible.

Dockerfile

FROM ruby:2.6

# `apt-get install yarn`Entraînera une erreur
#Installez les outils nécessaires à votre projet
# &&Créez une couche en vous connectant et en exécutant la commande
#apt-obtenir la mise à jour et apt-obtenir l'installation se fait sur le même RUN(Si vous le divisez, vous ne pouvez pas utiliser la dernière version)
#RUN crée l'image puis s'exécute(CMD est exécuté au démarrage du conteneur)
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
    echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
    apt-get update -qq && apt-get install -y nodejs postgresql-client vim && \
    apt-get install -y yarn

#Créer un annuaire
RUN mkdir /myapp

#Spécifier un répertoire de travail
#RUN ,  COPY,Vous n'avez pas à vous soucier de WORKDIR car seules les instructions ADD créent des calques.
#Pass absolu
WORKDIR /myapp

#Reconstruire les couches uniquement lorsque Gemfile est mis à jour
#La raison pour laquelle vous ne copiez pas tout le projet en premier est de séparer les calques
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
#Installer les dépendances de la bibliothèque
RUN bundle install

#Copiez l'intégralité du projet(Gemfile/Gemfile.le verrou n'est pas copié)
COPY . /myapp

#Ajout d'un script qui est exécuté à chaque démarrage du conteneur
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]

#Spécification du numéro de port public du conteneur
EXPOSE 3000

#S'il n'est pas spécifié, le processus à exécuter par défaut au démarrage du conteneur
#Une seule instruction CMD peut être écrite dans un Dockerfile
#CMD peut être utilisé comme argument par défaut pour l'instruction ENTRYPOINT
CMD ["rails", "server", "-b", "0.0.0.0"]

docker-compose docker-compose.yml faisait également référence à la documentation officielle de Docker.

docker-compose.yml

version: '3'
services:
    db:
        #Utiliser postgres pour DB
        image: postgres
        #l'hôte./tmp/avec db/var/lib/postgresql/Synchroniser les données
        volumes:
            - ./tmp/db:/var/lib/postgresql/data
        #Spécification des variables d'environnement
        environment:
            POSTGRES_PASSWORD: password
    web:
        build: .
        #Serveur au démarrage du conteneur.Retirer les rails pid et exécuter les s
        command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
        #Le répertoire actuel de l'hôte est le conteneur/Synchroniser avec myapp
        volumes:
            - .:/myapp
        #Transfert de port entre l'hôte et le conteneur
        ports:
            - '3000:3000'
        #Dépendances entre services
        depends_on:
            - db
        #Utiliser Byebug dans l'environnement Docker
        stdin_open: true
        tty: true

Gemfile Quant à Gemfile, celui qui est inclus par défaut est le principal. Le package ajouté est commenté, vous pouvez donc le supprimer si vous n'en avez pas besoin.

Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }


ruby '2.6.6'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3', '>= 6.0.3.3'
# Use postgresql as the database for Active Record
gem 'pg', '>= 0.18', '< 2.0'
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  #Introduction d'outils de débogage
  gem 'pry-rails'
  gem 'pry-byebug'
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '~> 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
  #Introduction d'outils de complétion automatique
  gem 'solargraph'
  #Introduction de l'outil d'analyse de code statique
  gem 'rubocop'
  gem 'rubocop-rails'
  #Introduction de l'outil de format erb
  gem 'htmlbeautifier'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

package.json J'ai ajouté package.json car je veux utiliser vue-router et vuex. Si vous souhaitez utiliser un framework d'interface utilisateur tel que Vuetify, ajoutez-le.

package.json:package.json

{
	"name": "myapp",
	"private": true,
	"dependencies": {
		"@rails/actioncable": "^6.0.0",
		"@rails/activestorage": "^6.0.0",
		"@rails/ujs": "^6.0.0",
		"@rails/webpacker": "4.3.0",
		"turbolinks": "^5.2.0",
		"vue": "^2.6.12",
		"vue-loader": "^15.9.3",
		"vue-template-compiler": "^2.6.12",
		"vue-router": "^3.0.1",
		"vuex": "^3.0.1"
	},
	"version": "0.1.0",
	"devDependencies": {
		"webpack-dev-server": "^3.11.0"
	}
}

Déboguer avec des rails

Ouvrez un terminal sur VScode Exécutez ce qui suit dans le terminal

VScode

docker-compose exec web rails console

pry commence

VScode

[1] pry(main)> 

Créer un post-contrôleur

docker-compose exec web rails g controller post index

Modifier post_controller.rb

post_controller.rb

class PostController < ApplicationController
  def index
    @post = Post.all
  end
end

Créer un modèle pour la publication

VScode

docker-compose exec web rails g model post name:string age:integer

Refléter le modèle dans DB

VScode

docker-compose exec web rails db:migrate

Réécrivez index.html.erb comme ci-dessous

erb:index.html.erb

<%= @post.name %>
<%= @post.age %>

Modifiez routes.rb ci-dessous

routes.rb

Rails.application.routes.draw do
  root to:  'post#index'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

Créer une instance du modèle Post avec pry

VScode

@post = Post.new
=> #<Post:0x00005589bc4beb78 id: nil, name: nil, age: nil, created_at: nil, updated_at: nil>

#Je n'ai pas encore mis de données sur le nom ou l'âge
#Pas même enregistré dans DB
Post.all
=>   Post Load (2.2ms)  SELECT "posts".* FROM "posts"
[]

#Enregistrer l'instance dans DB
@post.save
   (0.7ms)  BEGIN
  Post Create (5.9ms)  INSERT INTO "posts" ("created_at", "updated_at") VALUES ($1, $2) RETURNING "id"  [["created_at", "2020-09-23 13:06:47.962085"], ["updated_at", "2020-09-23 13:06:47.962085"]]
   (3.1ms)  COMMIT
=> true

#Publier à nouveau.Si vous faites tout et récupérez les données du DB, l'instance sauvegardée sera appelée.
Post.all
=>   Post Load (2.2ms)  SELECT "posts".* FROM "posts"
[#<Post:0x00005589bceec5f0
  id: 1,
  name: nil,
  age: nil,
  created_at: Wed, 23 Sep 2020 13:06:47 UTC +00:00,
  updated_at: Wed, 23 Sep 2020 13:06:47 UTC +00:00>]

#@Essayez de mettre des données dans l'instance de publication
@post.name = "Hiro"
=> "Hiro"

@post.age = "29"
=> "29"

#Enregistrer à nouveau
@post.save
Post Update (4.0ms)  UPDATE "posts" SET "name" = $1, "updated_at" = $2 WHERE "posts"."id" = $3  [["name", "Hiro"], ["updated_at", "2020-09-23 13:10:26.486888"], ["id", 1]]
Post Update (2.0ms)  UPDATE "posts" SET "age" = $1, "updated_at" = $2 WHERE "posts"."id" = $3  [["age", 29], ["updated_at", "2020-09-23 13:10:56.785029"], ["id", 1]]
   (1.0ms)  COMMIT
=> true

#Les données sont stockées
Post.all
=>   Post Load (1.4ms)  SELECT "posts".* FROM "posts"
[#<Post:0x00007f1ddc7a77a8
  id: 1,
  name: "Hiro",
  age: 29,
  created_at: Wed, 23 Sep 2020 13:06:47 UTC +00:00,
  updated_at: Wed, 23 Sep 2020 13:10:56 UTC +00:00>]

Accédez aux éléments suivants avec un navigateur Web

Navigateur Web

http://localhost:3000

OK si vous pouvez obtenir les données de DB comme ci-dessous

Essayez Binding.pry

Modifier post_controller.rb

class PostController < ApplicationController
  def index
    binding.pry
    ＠post = Post.all
  end
end

Accédez aux éléments suivants avec un navigateur Web

Navigateur Web

http://localhost:3000

Se fige sur l'écran ci-dessous (comportement correct)

Retour au terminal de levier

pry(main)> 

Avec ce qui précède, l'environnement de débogage avec pry est prêt.

référence

Je me suis référé au site suivant. Projet de japonaisisation de documents Docker Démarrage rapide: Compose et Rails Meilleures pratiques Dockerfile Mécanisme de base de Webpacker Créons un environnement de développement pour "Rails / PostgreSQL" en utilisant Docker!