[RUBY] So verknüpfen Sie Rails6 Vue (aus dem Umgebungsbau)

Einführung

Wenn Sie mit Docker unter Rails, Vue, Posgre-Umgebung entwickeln möchten Es fiel mir schwer, die Umgebung für Rails und Vue zu erstellen. Speichern Sie sie daher als mein eigenes Memo.

Was Sie in diesem Artikel sehen können

・ Rails 6 und Vue und Postgres Docker können erstellt werden ・ Rails und Vue können verknüpft werden ・ Sie können die Instanz und die Datenbank mit Pry betreiben.

Umgebung

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

Github Link

Dies ist mein Github Docker-Start-Kit. Bitte benutzen Sie es, wenn Sie möchten. Whiro0501/Docker_Rails6_Vue

Erstellen Sie eine Docker-Umgebung auf Ihrem Mac

Terminal öffnen Erstellen Sie mit mkdir ein Verzeichnis mit einem beliebigen Namen Wechseln Sie in das von cd erstellte Verzeichnis Öffnen Sie VScode mit Code.

terminal

mkdir qiita
cd qiita
code .

VScode startet Weil ich im Terminal an VScode arbeiten werde Wenn das Terminal nicht läuft, öffnen Sie das Terminal mit ⬆︎ + Strg + @

Kopieren Sie die Dateien im Remote-Repository lokal, indem Sie den folgenden Befehl auf dem VScode-Terminal eingeben

VScode

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

CD in das Verzeichnis Docker_Rails6_Vue /

VScode

cd Docker_Rails6_Vue/

Führen Sie den folgenden Befehl aus, um das Docker-Image zu erstellen

VScode

docker-compose build

Holen Sie sich das erforderliche Knotenmodul, indem Sie die folgenden Schritte ausführen

VScode

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

Erstellen Sie eine Datenbank (Postgres), indem Sie Folgendes ausführen

VScode

docker-compose run web rake db:create

Öffnen Sie ein anderes Terminal Starten Sie die Rails-Anwendung wie folgt

VScode

#Wenn ein anderes Terminal umständlich ist, Docker-compose up -d ist in Ordnung
docker-compose up

Öffnen Sie noch ein Terminal Jedes Mal, wenn ich die Ansicht aktualisiere, wird sie kompiliert und benötigt Zeit. Gehen Sie wie folgt vor:

VScode

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

Greifen Sie mit einem Webbrowser auf Folgendes zu

Webbrowser

http://localhost:3000

Stellen Sie sicher, dass die Rails-Anwendung gestartet wird

Wie arbeiten Sie mit Vue und Rails?

Schienen und Vue sind zum Zeitpunkt des ersten Baus nicht miteinander verbunden, daher werden wir sie miteinander verbinden.

Erstellen Sie unten einen Home-Controller (jeder Controller-Name ist zulässig).

VScode

docker-compose exec web rails g controller home index

Erstellt von index.html.erb

rb:index.html.erb

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

Fügen Sie der folgenden Datei "root to: 'home # index'" hinzu

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

Greifen Sie mit einem Webbrowser auf Folgendes zu

Webbrowser

http://localhost:3000

Zunächst werden die in index.html.erb beschriebenen Inhalte angezeigt.

Nachdem die Grundlagen auf der Rails-Seite geschaffen wurden, besteht der nächste Schritt darin, die Verbindung mit Vue herzustellen. Grundeinstellung von 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>

Grundeinstellung von 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 ist eine einzelne Dateikomponente Als Objekt an hello_vue.js übergeben. Stellen Sie ein, dass es in index.html.erb angezeigt wird.

Stellen Sie index.html.erb wie folgt ein

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' %>

Greifen Sie mit einem Webbrowser auf Folgendes zu

Webbrowser

http://localhost:3000

Die Verknüpfung mit Vue ist abgeschlossen !!

Beschreibung der Github-Datei

Whiro0501/Docker_Rails6_Vue Zunächst erkläre ich aus dem Bundesstaat Github den obigen Link Um es kurz zu erklären, ist dies der Status nach dem Einstellen der folgenden beiden Daher ist es die Theorie, dass die Umgebung vorbereitet werden kann, in der Rails 6, Vue und Postgres verwendet werden können.

VScode

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

Darüber hinaus kann Postgres im obigen Zustand nicht gut mit Rails zusammenarbeiten. Stellen Sie daher Folgendes ein. Ich habe auch auf das offizielle Dokument verwiesen.

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

Ich habe in der offiziellen Dokumentation auf die Best Practices verwiesen. Weil Docker Ebenen für FROM, RUN und COPY erstellt Es wird gesagt, dass RUN und COPY in so wenigen Schichten wie möglich gespeichert werden können.

Dockerfile

FROM ruby:2.6

# `apt-get install yarn`Wird zu einem Fehler führen
#Installieren Sie die für Ihr Projekt benötigten Tools
# &&Erstellen Sie eine Ebene, indem Sie eine Verbindung mit dem Befehl herstellen und diesen ausführen
#apt-Holen Sie sich Update und apt-get install wird auf demselben RUN ausgeführt(Wenn Sie es teilen, können Sie nicht die neueste Version verwenden)
#RUN erstellt ein Image und wird dann ausgeführt(CMD wird ausgeführt, wenn der Container gestartet wird)
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

#Ein Verzeichnis erstellen
RUN mkdir /myapp

#Arbeitsverzeichnis angeben
#RUN ,  COPY,Sie müssen sich keine Sorgen um WORKDIR machen, da nur ADD-Anweisungen Ebenen erstellen.
#Absoluter Pass
WORKDIR /myapp

#Erstellen Sie Ebenen nur neu, wenn Gemfile aktualisiert wird
#Der Grund dafür, dass nicht das gesamte Projekt zuerst kopiert wird, besteht darin, die Ebenen zu trennen
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
#Installieren Sie Bibliotheksabhängigkeiten
RUN bundle install

#Kopieren Sie das gesamte Projekt(Gemfile/Gemfile.Sperre wird nicht kopiert)
COPY . /myapp

#Es wurde ein Skript hinzugefügt, das bei jedem Start des Containers ausgeführt wird
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]

#Angabe der öffentlichen Portnummer des Containers
EXPOSE 3000

#Wenn nicht angegeben, wird der Prozess standardmäßig ausgeführt, wenn der Container gestartet wird
#In eine Docker-Datei kann nur eine CMD-Anweisung geschrieben werden
#CMD kann als Standardargument für die Anweisung ENTRYPOINT verwendet werden
CMD ["rails", "server", "-b", "0.0.0.0"]

docker-compose docker-compose.yml verwies auch auf die offizielle Docker-Dokumentation.

docker-compose.yml

version: '3'
services:
    db:
        #Verwenden Sie Postgres für DB
        image: postgres
        #Gastgeber./tmp/mit db/var/lib/postgresql/Daten synchronisieren
        volumes:
            - ./tmp/db:/var/lib/postgresql/data
        #Umgebungsvariablen angeben
        environment:
            POSTGRES_PASSWORD: password
    web:
        build: .
        #Server beim Container-Start.Pid entfernen und Schienen verlegen s
        command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
        #Das aktuelle Verzeichnis des Hosts ist der Container/Mit myapp synchronisieren
        volumes:
            - .:/myapp
        #Port vorwärts zwischen Host und Container
        ports:
            - '3000:3000'
        #Abhängigkeiten zwischen Diensten
        depends_on:
            - db
        #Verwenden Sie Byebug in der Docker-Umgebung
        stdin_open: true
        tty: true

Gemfile Gemfile ist die Hauptdatei, die standardmäßig enthalten ist. Das hinzugefügte Paket ist kommentiert, sodass Sie es löschen können, wenn Sie es nicht benötigen.

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]
  #Einführung von Debug-Tools
  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'
  #Einführung von Werkzeugen zur automatischen Vervollständigung
  gem 'solargraph'
  #Einführung des statischen Code-Analyse-Tools
  gem 'rubocop'
  gem 'rubocop-rails'
  #Einführung des erb-Format-Tools
  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 Ich habe package.json hinzugefügt, weil ich vue-router und vuex verwenden möchte. Wenn Sie ein UI-Framework wie Vuetify verwenden möchten, fügen Sie es hinzu.

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

Debuggen mit Rails

Öffnen Sie ein Terminal auf VScode Führen Sie im Terminal Folgendes aus

VScode

docker-compose exec web rails console

Pry startet

VScode

[1] pry(main)> 

Post-Controller erstellen

docker-compose exec web rails g controller post index

Ändern Sie post_controller.rb

post_controller.rb

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

Erstellen Sie ein Modell für die Post

VScode

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

Reflektieren Sie das Modell in DB

VScode

docker-compose exec web rails db:migrate

Schreiben Sie index.html.erb wie folgt um

erb:index.html.erb

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

Ändern Sie die Routen.rb unten

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

Erstellen Sie mit pry eine Instanz des Post-Modells

VScode

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

#Ich habe noch keine Daten in Name oder Alter eingegeben
#Nicht einmal in der Datenbank gespeichert
Post.all
=>   Post Load (2.2ms)  SELECT "posts".* FROM "posts"
[]

#Speichern Sie die Instanz in der Datenbank
@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

#Nochmals posten.Wenn Sie alles tun und die Daten aus der Datenbank abrufen, wird die gespeicherte Instanz aufgerufen.
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>]

#@Versuchen Sie, Daten in die Post-Instanz einzufügen
@post.name = "Hiro"
=> "Hiro"

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

#Speichern Sie erneut
@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

#Daten werden gespeichert
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>]

Greifen Sie mit einem Webbrowser auf Folgendes zu

Webbrowser

http://localhost:3000

OK, wenn Sie die Daten wie folgt aus der Datenbank erhalten können

Versuchen Sie Binding.pry

Ändern Sie post_controller.rb

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

Greifen Sie mit einem Webbrowser auf Folgendes zu

Webbrowser

http://localhost:3000

Friert auf dem Bildschirm unten ein (korrektes Verhalten)

Kehre zum Hebel-Terminal zurück

pry(main)> 

Mit dem oben genannten ist die Umgebung zum Debuggen mit pry bereit.

Referenz

Ich habe auf die folgende Seite verwiesen. Docker Document Japaneseization Project Schnellstart: Verfassen und Schienen Best Practices für Dockerfile Grundlegender Mechanismus von Webpacker Erstellen wir mit Docker eine Entwicklungsumgebung für "Rails / PostgreSQL"!