本記事の目的・使用環境

本記事はDockerを使用し、Rails6,MySQL8.0、Vue3を連携した開発環境の構築方法を行います。また、連携を確認するために検索ボタンを押下後にユーザのIDと名前が表示される表が表示される簡易Webアプリを作成します。

使用する環境やモジュール等

VSCode
Rails6
MySQL8.0
Vue3
Vue Router
Bootstrap5
axios

また、本記事はMacで実施していきますが,Windowsを使用している方もDockerを使用するのにWSLをインストールすることになると思うのでコマンド等、大きく影響はないと思います。

事前に必要なもの

本記事では、VSCodeとDockerを事前にインストール必要があるのでインストールをしてください。
以下からそれぞれインストールを行ってください

構築手順

本記事は、以下の手順で作成を行なっていきます。

大まかな手順

手順1 : Dockerファイルや最低限のファイルを作成
手順2 : Rails環境のインストール・作成
手順3 : Vue環境のインストール・作成
手順4 : Vue Routerの追加
手順5 : BootStrap5の追加
手順6 : axiosの追加
手順7 : RailsとVueの連携の確認
手順8 : RailsとMySQLの連携の確認

使用するコマンドについて

構築時には何度も使用するコマンドもあるのでざっくりと使用するコマンドをまとめておきます。(コピペ用)

# Dockerコンテナの起動

docker-compose up -d

# Dockerコンテナの停止

docker-compose down

# 未使用リソースの削除(お掃除)

docker system prune -a

# コントローラの作成

docker-compose run back rails g controller コントローラー名 メソッド名1 メソッド名2 ...

# コントローラの削除

docker-compose run back rails d controller コントローラー名

# モデルの作成

docker-compose run back rails g model モデル名 カラム名1:カラムの型 カラム名2:カラムの型 ...

# モデルの削除

docker-compose run back rails d model モデル名

# DBの作成

docker-compose run back rails db:create

# マイグレーションファイルの実行

docker-compose run back rails db:migrate

# routeの確認

docker-compose run back rails routes

#データベースを全て削除し、マイグレーションファイルを古い順に全て実行

docker-compose run back rails db:migrate:reset

# seed.rbの実行

docker-compose run back rails db:seed

# Vueのコンテナに入る

docker exec -it front /bin/bash

# Vueの起動

npm run serve

手順1 : Dockerファイルや最低限のファイルを作成

手順1では以下のことを行います。

# 手順1で実施すること

(1) プロジェクトの雛形の作成
(2) Dockerfileの作成 (Rails用)
(3) Dockerfileの作成 (Vue用)
(4) docker-compose.ymlの作成
(5) Gemfileの作成

(1) プロジェクトの雛形の作成

以下のようなシェルスクリプトを作成したました。
実行すると最低限のファイルやフォルダが作成されますのでご利用ください。

./createProject.sh

 #!/bin/bash
echo -n "任意のプロジェクト名を入力:"

read PROJECTNAME

mkdir $PROJECTNAME

touch $PROJECTNAME/docker-compose.yml

touch $PROJECTNAME/README.md

mkdir $PROJECTNAME/front

touch $PROJECTNAME/front/Dockerfile

mkdir $PROJECTNAME/front/vue_project

touch $PROJECTNAME/front/vue_project/gitkeep

mkdir $PROJECTNAME/back

touch $PROJECTNAME/back/Dockerfile

mkdir $PROJECTNAME/back/rails_project

touch $PROJECTNAME/back/rails_project/Gemfile

touch $PROJECTNAME/back/rails_project/gitkeep

cd $PROJECTNAME

code .

任意のディレクトリに上記のシェルを作成し、ターミナル等で以下のコマンドを実行してください。
実行するとプロジェクト名を聞かれると思うので任意の名前を設定してください。本記事では、「TEST_DRMV」とします。
(※ DRMVはDocker、Rails、MySQL、Vueの頭文字です)

# 実行コマンド

sh createProject.sh
-n 任意のプロジェクト名を入力:
TEST_DRMV

実行後はVSCodeが起動し、以下のようなフォルダ構成でファイルやフォルダが作成されるはずです。
※ VSCodeは設定していないと「code .」で起動しない可能性があるので、その場合は設定を実施するか手動でプロジェクトを開いてください。

git使用される方はここでブランチを作成し、一旦pushしておきましょう。

(2) Dockerfileの作成 (Rails用)

空の「Dockerfile」にRails関連の設定を記述しましょう。(以下コピペでOKです)

./back/Dockerfile

FROM ruby:2.7

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 yarn \
&& rm -rf /var/lib/apt/lists/* 


WORKDIR /app

COPY ./rails_project /app

RUN bundle config --local set path 'vendor/bundle' \
&& bundle install

(3) Dockerfileの作成 (Vue用)

空の「Dockerfile」にVue関連の設定を記述しましょう。(以下コピペでOKです)

./front/Dockerfile

FROM node:14

WORKDIR /app

RUN npm install -g npm && \
    npm install -g @vue/cli

(4) docker-compose.ymlの作成

空の「docker-compose.yml」にMySQL,Vue,Rails関連の設定を記述しましょう。(以下コピペでOKです)
※dbがMySQL、backがRailsでfrontがVue関連の設定です。

./docker-compose.yml

version: '3.6'
services:
  db:
    image: mysql:8.0
    container_name: db
    command: --default-authentication-plugin=mysql_native_password
    environment:
      MYSQL_ROOT_USER: "root"
      MYSQL_ROOT_PASSWORD: "root"
      TZ: "Asia/Tokyo"
    ports:
      - 3306:3306
    volumes:
      - ./back/rails_project/db/mysql_data:/var/lib/mysql
  back:
    container_name: back
    build: ./back
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - ./back/rails_project:/app
    ports:
      - "3000:3000"
    depends_on:
      - db
  front:
    container_name: front
    build: ./front
    ports:
      - 8080:8080
    volumes:
      - ./front/vue_project:/app:cached
    stdin_open: true
    tty: true
volumes:
  mysql_data:
  bundle:

(5) Gemfileの作成

空の「Gemfile」にRailsプロジェクト作成のための記述を行いましょう。
※ 本記事では以下のバージョンのRailsを使用していきます。
■2022-03-15 ［VerUP］Ruby on Rails 6.1.4.7（リリース日：2022/03/08）

特にこだわり等なければ(コピペでOK)

./back/rails_project/Gemfile

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

これで手順1は完了です。
以下は手順1までのブランチです。

手順2 : Rails環境のインストール・作成

手順2では以下のことを行います。

# 手順2で実施すること

(1) Railsプロジェクトの作成
(2) Gemfile の修正・CORSの設定
(3) database.yml の修正
(4) Dockerイメージの作成
(5) DBの作成
(6) Railsの動作確認

(1) Railsプロジェクトの作成

docker-compose.ymlと同じ階層で以下のコマンドを実行してください。(少し時間がかかります)

# 実行コマンド

docker-compose run back rails new . --force --database=mysql --api

成功すると「rails_project」の直下に色々作られていると思います。また、Gemfileが更新されているはずです。

./back/Gemfile

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

ruby '2.7.6'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.4', '>= 6.1.4.7'
# Use mysql as the database for Active Record
gem 'mysql2', '~> 0.5'
# Use Puma as the app server
gem 'puma', '~> 5.0'
# 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.4', require: false

# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
# gem 'rack-cors'

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

group :development do
  gem 'listen', '~> 3.3'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

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

(2) Gemfile の修正・CORSの設定

「docker-compose.yml」のback(Rails)とfornt(Vue)のportsを見ると使用されるポート番号が異なる(Railsが3000でVueが8080)のでCORSの設定を行います。CORSについては以下を参照してください。

まずは、更新された「Gemfile」でCORSに関するものがコメントアウトしている箇所があるのでそのコメントアウトを解除してください。

./back/Gemfile(コメントアウト解除前)

... 一部抜粋
# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
# gem 'rack-cors'

./back/Gemfile(コメントアウト解除後)

... 一部抜粋
# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
gem 'rack-cors'

修正を行ったら以下のコマンドを実行してください。

# 実行コマンド

docker-compose run back bundle install

次に、「cors.rb」の修正を行います。

./back/rails_project/config/initializers/cors.rb (修正前)

... 一部抜粋
# Rails.application.config.middleware.insert_before 0, Rack::Cors do
#   allow do
#     origins 'example.com'
#
#     resource '*',
#       headers: :any,
#       methods: [:get, :post, :put, :patch, :delete, :options, :head]
#   end
# end

コメントを外してorigins ['http://localhost:8080']に変更(修正内容)

./back/rails_project/config/initializers/cors.rb (修正後)

... 一部抜粋
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:8080'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

(3) database.yml の修正

./back/rails_project/config/database.yml (修正前)

... 一部抜粋
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  host: localhost
... 一部抜粋

「password」、「host」を修正する。(docker-compose.ymlで指定したDBのサービス名とパスワードに変更する)

./back/rails_project/config/database.yml (修正後)

... 一部抜粋
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: root
  host: db
... 一部抜粋

(4) Dockerイメージの作成

以下のコマンド実行してdockerのイメージを作成しましょう。

# 実行コマンド

docker-compose build

もし以下のようなエラーメッセージが出力された場合は、再度ビルドを実施してください。

# エラーメッセージ

=> ERROR [3/3] RUN npm install -g npm &&     npm install -g @vue/cli                                                                                                                   432.4s
=> ERROR [3/3] RUN npm install -g npm &&     npm install -g @vue/cli                                                                                                                   432.4s
------                                                                                                                                                                                         
 > [3/3] RUN npm install -g npm &&     npm install -g @vue/cli:                                                                                                                                
#6 32.52 /usr/local/bin/npx -> /usr/local/lib/node_modules/npm/bin/npx-cli.js                                                                                                                  
#6 32.53 /usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js                                                                                                                  
#6 32.72 + npm@8.10.0                                                                                                                                                                          
#6 32.72 added 63 packages from 18 contributors, removed 299 packages and updated 138 packages in 28.164s                                                                                      
#6 361.1 npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
#6 361.5 npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
#6 361.7 npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
#6 368.2 npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
#6 385.6 npm WARN deprecated apollo-tracing@0.15.0: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details
#6 386.2 npm WARN deprecated graphql-extensions@0.15.0: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
#6 387.7 npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
#6 387.8 npm WARN deprecated apollo-cache-control@0.14.0: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details.
#6 390.4 npm WARN deprecated subscriptions-transport-ws@0.9.19: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
#6 401.1 npm WARN deprecated graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
#6 431.7 npm ERR! code ERR_SOCKET_TIMEOUT
#6 431.7 npm ERR! network Socket timeout
#6 431.7 npm ERR! network This is a problem related to network connectivity.
#6 431.7 npm ERR! network In most cases you are behind a proxy or have bad network settings.
#6 431.7 npm ERR! network 
#6 431.7 npm ERR! network If you are behind a proxy, please make sure that the
#6 431.7 npm ERR! network 'proxy' config is set properly.  See: 'npm help config'
#6 431.8 
#6 431.8 npm ERR! A complete log of this run can be found in:
#6 431.8 npm ERR!     /root/.npm/_logs/2022-05-16T14_46_49_260Z-debug-0.log
------
executor failed running [/bin/sh -c npm install -g npm &&     npm install -g @vue/cli]: exit code: 1
ERROR: Service 'front' failed to build : Build failed

(5) DBの作成

DBコマンドを作成するために、以下のコマンドを実行してください。

# 実行コマンド

docker-compose run back rails db:create

以下のようなメッセージが出力されれば成功です。

# 成功時のメッセージ

Creating test_drmv_back_run ... done
Running via Spring preloader in process 19
Created database 'app_development'
Created database 'app_test'

この時、「./back/rails_project/db」の直下に「mysql_data」があるか確認してください。ないとエラーになると思います。その場合は、イメージの作り直しなどを実施してください。

自分は、以下のコマンドで実行でうまくいきました。

# エラー時の実行コマンド

docker-compose down
docker-compose up -d

また、以下のようなエラーメッセージが出力された場合は、「./back/rails_project/config/database.yml 」の修正に誤りがあるかもしれません。

エラーメッセージ

Creating docker_rails_mysql_vue_back_run ... done
Running via Spring preloader in process 19
Can't connect to local MySQL server through socket '/run/mysqld/mysqld.sock' (2)
Couldn't create 'app_development' database. Please check your configuration.
rake aborted!
... 一部抜粋
Caused by:
Mysql2::Error::ConnectionError: Can't connect to local MySQL server through socket '/run/mysqld/mysqld.sock' (2)
/usr/local/bundle/gems/mysql2-0.5.4/lib/mysql2/client.rb:95:in `connect'
/usr/local/bundle/gems/mysql2-0.5.4/lib/mysql2/client.rb:95:in `initialize'
... 一部抜粋

(6) Railsの動作確認

Railsの動作確認を行うために、コンテナの起動を行いましょう。

# 実行コマンド

docker-compose up -d

成功したら、以下のURLにブラウザでアクセスしましょう。

以下のようにブラウザが表示されれば成功です。

これで手順2は完了です。
以下は手順2までのブランチです。

手順3 : Vue環境のインストール・作成

手順3では以下のことを行います。

# 手順3で実施すること

(1) Vue3プロジェクトのインストール
(2) 動作確認

(1) Vue3プロジェクトのインストール

まずは、vueのコンテナにアクセスしましょう。

# 実行コマンド

docker exec -it front /bin/bash

もし一度コンテナを停止している場合は、コンテナを起動をしてください。

# 実行コマンド

docker-compose up -d

vueコンテナに入れたら、Vue3をインストールしましょう。以下のコマンドを実行してください。

# 実行コマンド

vue create .

その後、プロジェクトのディレクトリや使用するVueのバージョン、使用するパッケージシステムなどを聞かれるので以下を選択してください。

# Vueプロジェクト作成の選択内容

# Yを入力してEnter
Vue CLI v5.0.4
? Generate project in current directory? (Y/n) Y

# Default ([Vue 3] babel, eslint) を選択してEnter
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
  Manually select features 

# ❯ Use NPM を選択してEnter
Vue CLI v5.0.4
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: 
  Use Yarn 
❯ Use NPM


Vue CLI v5.0.4
✨  Creating project in /app.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 844 packages, and audited 845 packages in 7m

86 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
🚀  Invoking generators...
📦  Installing additional dependencies...


added 95 packages, and audited 940 packages in 1m

96 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project app.
👉  Get started with the following commands:

 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
       You will need to perform the initial commit yourself.

以下のように「vue_project」の直下に色々ファイルが作られる。

(2) Vueの動作確認

Vueの動作確認を行うために、Vueの起動を行います。vueコンテナ内で以下のコマンドを実行しましょう。

# 実行コマンド

npm run serve

# 成功のメッセージ

DONE  Compiled successfully in 43165ms                                                                                                                        9:01:59 PM


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.28.0.4:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

もし、vueコンテナにアクセスしていない場合以下のコマンドでアクセスしましょう。

# 実行コマンド

docker exec -it front /bin/bash

成功したら、以下のURLにブラウザでアクセスしましょう。

以下のようにブラウザが表示されれば成功です。

これで手順3は完了です。ここまでで最低限の開発環境の構築は完了しています。
以下は手順3までのブランチです。

手順4 : Vue Routerの追加

手順4では以下のことを行います。

# 手順4で実施すること

(1) Vue Router　のプラグインを追加する
(2) vue.config.js の修正 (EsLintの対策)
(3) 動作確認用の画面を作成(Home.vue と Hello.vue)
(4) router.js 実装
(5) main.jsの修正
(6) App.vue の修正
(7) Vue Routerの動作確認

(1)Vue Routerのプラグインを追加する

Vue Router　のプラグインの追加を行います。vueコンテナ内で以下のコマンドを実行してください。

実行コマンド

npm install vue-router@4

以下のように表示されれば成功です。

成功メッセージ

added 2 packages, and audited 942 packages in 20s

97 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

(2) vue.config.js の修正 (EsLintの対策)

vue.config.js の修正を行います。

./front/vue_project/vue.config.js (修正前)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

「lintOnSave: false,」の追加

./front/vue_project/vue.config.js (修正後)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
})

(3) 動作確認用の画面を作成(Home.vue と Hello.vue)

動作確認用の画面コードを2つ作成します。まずは、以下のコマンドを実行してファイルを作成してください。

# 実行コマンド

mkdir ./src/pages
touch ./src/pages/Home.vue
mkdir ./src/pages/hello
touch ./src/pages/hello/Hello.vue

以下のように「Home.vue」と「Hello.vue」が追加されます。

「Home.vue」と「Hello.vue」にそれぞれ以下を実装してください。

./front/vue_project/src/pages/Home.vue

<template>
    <h1>Home</h1>
</template>

./front/vue_project/src/pages/hello/Hello.vue

<template>
    <h1>Hello</h1>
</template>

(4) router.js 実装

ルーティング設定用の「router.js」を作成します。

# 実行コマンド

mkdir ./src/router
touch ./src/router/router.js

作成したら、以下のように実装してください。

./front/vue_project/src/router/router.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../pages/Home.vue'
import Hello from '../pages/hello/Hello.vue'

const routes = [
    { 
        path: '/', 
        name: 'Home',
        component: Home
    },
    { 
        path: '/hello', 
        name: 'Hello',
        component: Hello
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

(5) main.jsの修正

main.jsの修正を行います。

./front/vue_project/src/main.js (修正前)

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

router.jsのimport分の追加、routerを使用するように修正

./front/vue_project/src/main.js (修正後)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router.js'

createApp(App).use(router).mount('#app')

(6) App.vue の修正

App.vueの修正を行います。

./front/vue_project/src/App.vue (修正前)

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

「router-view」のみ呼び出すように修正しますう。

./front/vue_project/src/App.vue (修正後)

<template>
  <router-view></router-view>
</template>

Vue Routerの動作確認

Vue Router追加の動作確認を行います。vueを起動するために以下のコマンドを実行しましょう。

# 実行コマンド

npm run serve

成功したら、以下2つのURLにブラウザでアクセスしましょう。

以下のように表示されれば成功です。

以下のように表示されれば成功です。

これで手順4は完了です。
以下は手順4までのブランチです。

手順5 : BootStrap5の追加

手順5では以下のことを行います。

# 手順5で実施すること

(1) BootStrap5のインストール
(2) vue.config.js の修正
(3) main.js の修正
(4) 動作確認用の画面を作成(Header.vue)
(5) App.vue の修正
(6) BootStrap5の動作確認

(1) BootStrap5のインストール

BootStrapの追加を行います。vueコンテナ内で以下のコマンドを実行してください。

# 実行コマンド

npm install vue bootstrap-vue bootstrap

以下のような警告メッセージが出ても動作に影響はないので気にしないでください。
(もしわかる方がいたらご教授ください)

# 警告メッセージ

npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1

added 17 packages, and audited 959 packages in 1m

101 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

(2) vue.config.js の修正

vue.config.js の修正を行います。

　./front/vue_project/vue.config.js (修正前)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
})

SourceMapの追加

　./front/vue_project/vue.config.js (修正後)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  configureWebpack: {
    devtool: 'source-map',
  },
})

(3) main.js の修正

main.jsの修正を行います。

./front/vue_project/src/main.js (修正前)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router.js'

createApp(App).use(router).mount('#app')

bootstrapのimportを追加

./front/vue_project/src/main.js (修正後)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router.js'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap.js"

createApp(App).use(router).mount('#app')

(4) 動作確認用の画面を作成(Header.vue)

「Home.vue」「Hello.vue」の共通のヘッダーである「Header.vue」を作成します。

# 実行コマンド

touch ./src/components/Header.vue

以下のように「Header.vue」が追加されます。

作成したら、以下のように実装してください。

./front/vue_project/src/components/Header.vue

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-link active" aria-current="page" href="/">Home</a>
            <a class="nav-link" href="/hello">hello</a>
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </div>
        </div>
    </div>
    </nav>
</template>

(5) App.vue の修正

App.vue の修正を行います。

./front/vue_project/src/App.vue (修正前)

<template>
  <router-view></router-view>
</template>

./front/vue_project/src/App.vue (修正後)

<template>
    <div id="app">
      <Header/>
      <router-view name="Header"></router-view>
      <router-view></router-view>
    </div>
</template>

<script>
  import Header from './components/Header'
  export default {
    name: 'App',
    components: {
      Header
    }
  }
</script>

(6) BootStrap5の動作確認

BootStrap5追加の動作確認を行います。vueを起動するために以下のコマンドを実行しましょう。

実行コマンド

npm run serve

もしかしたら、以下のような警告メッセージが出る場合がございます。

# 警告メッセージ

 WARNING  Compiled with 1 warning                                                                                                                              5:24:06 PM

 warning  in ./node_modules/bootstrap/dist/css/bootstrap.min.css

Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(6:29521) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.29.0.2:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

その場合は、次のコマンドを起動コマンドの前に実行してください。

実行コマンド

npm install autoprefixer@10.4.5 --save-exact
npm run serve

これで以下のようなメッセージが表示されたら成功です。

成功時のメッセージ

 DONE  Compiled successfully in 26382ms                                                                                                                        5:29:53 PM


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.29.0.2:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

成功したら、以下のURLにブラウザでアクセスしましょう。

ヘッダーのナビゲーションリンクのhelloをクリックしましょう。

これで手順5は完了です。
以下は手順5までのブランチです。

手順6 : axiosの追加

手順6では以下のことを行います。

# 手順5で実施すること

(1) axiosのモジュールを追加する
(2) 動作確認用の画面を作成(Search.vue)
(3) router.js の修正
(4) Header.vue の修正
(5) axiosの動作確認

(1) axiosのモジュールを追加する

axiosのモジュールを追加を行います。vueコンテナ内で以下のコマンドを実行してください。

# 実行コマンド

npm install axios

以下のように表示されれば成功です。

# 成功時のメッセージ

added 5 packages, and audited 964 packages in 13s

101 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

(2) 動作確認用の画面を作成(Search.vue)

検索ボタンを押下したらユーザIDとユーザ名が表示される新規の画面を作成します。まずは以下のコマンドを実行してください。

# 実行コマンド

mkdir ./src/pages/search
touch ./src/pages/search/Search.vue

以下のように「Search.vue」が追加されます。

作成したら、以下のように実装してください。

./front/vue_project/src/pages/search/Search.vue

<template>
    <div>
        <button @click="search" type="button" class="btn btn-primary">検索</button>
        <table class="table">
            <thead>
                <tr>
                <th scope="col">ID</th>
                <th scope="col">ユーザ名</th>
                </tr>
            </thead>
            <tbody>   
                <tr  v-for="item in items" :key="item.message">
                    <th scope="row">{{item.id}}</th>
                    <td>{{item.name}}</td>
                </tr>   
            </tbody>
        </table>
    </div>
</template>
<script>
    import axios from 'axios';
    export default {
        data(){
            return{
                items: []
            }
        },
        methods: {
            search (){
                axios
                .get('http://localhost:3000/crud/search')
                .then(
                    response => {
                        for (let i=0; i<response.data.length; i++) {
                            this.items.push(response.data[i]);
                        }
                        console.log(this.items);
                    } 
                ).catch(
                    error => {
                        let errorData1 = {id: 11, name: "Error Tarou"};
                        let errorData2 = {id: 12, name: "Error Jirou"};
                        this.items.push(errorData1);
                        this.items.push(errorData2);
                    }
                );
            }
        }
    }
</script>

(3) router.js の修正

router.js の修正を行います。

./front/vue_project/src/router/router.js (修正前)

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../pages/Home.vue'
import Hello from '../pages/hello/Hello.vue'

const routes = [
    { 
        path: '/', 
        name: 'Home',
        component: Home
    },
    { 
        path: '/hello', 
        name: 'Hello',
        component: Hello
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

ルーティングに「Search.vue」を追加

./front/vue_project/src/router/router.js (修正後)

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../pages/Home.vue'
import Hello from '../pages/hello/Hello.vue'
import Search from '../pages/search/Search.vue'

const routes = [
    { 
        path: '/', 
        name: 'Home',
        component: Home
    },
    { 
        path: '/hello', 
        name: 'Hello',
        component: Hello
    },
    {
        path: '/search', 
        name: 'Search',
        component: Search
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

(4) Header.vue の修正

Header.vue の修正を行います。

./front/vue_project/src/components/Header.vue (修正前)

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-link active" aria-current="page" href="/">Home</a>
            <a class="nav-link" href="/hello">hello</a>
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </div>
        </div>
    </div>
    </nav>
</template>

Search画面へのリンクを追加

./front/vue_project/src/components/Header.vue (修正後)

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-link active" aria-current="page" href="/">Home</a>
            <a class="nav-link" href="/hello">hello</a>
            <a class="nav-link" href="/search">search</a>
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </div>
        </div>
    </div>
    </nav>
</template>

(5) axiosの動作確認

axios追加の動作確認を行います。vueを起動するために以下のコマンドを実行しましょう。

実行コマンド

npm run serve

成功したら、以下のURLにブラウザでアクセスしましょう。

ヘッダーのナビゲーションリンクのsearchをクリックしましょう。

検索ボタンを押下しましょう。

今回はまだ、Railsと連携をしていないのでcatchで作成したエラーデータが表示されるはずです。

これで手順6は完了です。
以下は手順6までのブランチです。

手順7 : RailsとVueの連携の確認

手順7では以下のことを行います。

# 手順7で実施すること

(1) Controllerの作成
(2) RailsとVueの連携の動作確認

(1) Controllerの作成

vueのコンテナに入っている場合は、抜けてください。

# 実行コマンド

exit

手順6で作成したSearch.vueと連携するためのコントローラを作成します。まずは以下のコマンドを実行してください。

# 実行コマンド

docker-compose run back rails g controller crud search

以下のようなメッセージが表示されれば成功です。

# 成功時のメッセージ

Creating test_drmv_back_run ... done
Running via Spring preloader in process 19
      create  app/controllers/crud_controller.rb
       route  get 'crud/search'
      invoke  test_unit
      create    test/controllers/crud_controller_test.rb

以下のように「crud_controller.rb」が追加されます。

作成されたら以下のように修正してください。

./back/rails_project/app/controllers/crud_controller.rb (修正前)

class CrudController < ApplicationController
  def search
  end
end

ユーザを追加し、画面に返す機能を追加。

./back/rails_project/app/controllers/crud_controller.rb (修正後)

class CrudController < ApplicationController
  def search
    user = [{id: 1, name: "Tarou"}, {id: 2, name: "Jirou"}]
    render json: user
  end
end

(2) RailsとVueの連携の動作確認

RailsとVueの連携の動作確認を行います。vueを起動するために以下のコマンドを実行しましょう。

実行コマンド

docker exec -it front /bin/bash
npm run serve

成功したら、以下のURLにブラウザでアクセスしましょう。

検索ボタンを押下してください。

crud_controller.rb で作成したデータが表示されたら成功です。

これで手順7は完了です。
以下は手順7までのブランチです。

手順8 : RailsとMySQLの連携の確認(最後の手順)

ここまでお疲れ様です。手順8が最後の手順となります。手順8では以下のことを行います。

# 手順8で実施すること

(1) Modelの作成
(2) マイグレーションファイルの実行
(3) コントローラの修正
(4) DBにデータを投入
(5) RailsとMySQLの連携の動作確認

(1) Modelの作成

vueのコンテナに入っている場合は、抜けてください。

# 実行コマンド

exit

ユーザIDとユーザ名をもつモデルを作成します。以下のコマンドを実行してください。

# 実行コマンド

docker-compose run back rails g model Users name:string

以下のようなメッセージが表示されれば成功です。

# 成功時のメッセージ

Creating test_drmv_back_run ... done
Running via Spring preloader in process 19
      invoke  active_record
      create    db/migrate/20220521192440_create_users.rb
      create    app/models/user.rb
      invoke    test_unit
      create      test/models/user_test.rb
      create      test/fixtures/users.yml

以下のように「user.rb」と「???_create_user.rb」が追加されます。

(2) マイグレーションファイルの実行

マイグレーションファイルの実行を行います。以下のコマンドを実行してください。

# 実行コマンド

docker-compose run back rails db:migrate

以下のようなメッセージが表示されれば成功です。

# 成功時のメッセージ

Creating test_drmv_back_run ... done
Running via Spring preloader in process 19
== 20220521192440 CreateUsers: migrating ======================================
-- create_table(:users)
   -> 0.4323s
== 20220521192440 CreateUsers: migrated (0.4328s) =============================

(3) コントローラの修正

コントローラの修正を行います。

./back/rails_project/app/controllers/crud_controller.rb (修正前)

class CrudController < ApplicationController
  def search
    user = [{id: 1, name: "Tarou"}, {id: 2, name: "Jirou"}]
    render json: user
  end
end

DBからデータを取得

./back/rails_project/app/controllers/crud_controller.rb (修正後)

class CrudController < ApplicationController
  def search
    user = User.all
    render json: user
  end
end

(4) DBにデータを投入

作成したテーブルにデータを投入します。まずは、seeds.rb を修正します。

./back/rails_project/db/seeds.rb (修正前)

# This file should contain all the record creation needed to seed the database with its default values.
# The data can then be loaded with the bin/rails db:seed command (or created alongside the database with db:setup).
#
# Examples:
#
#   movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }])
#   Character.create(name: 'Luke', movie: movies.first)

3件分データを追加

./back/rails_project/db/seeds.rb (修正後)

User.create(
    name: "Tarou"
)

User.create(
    name: "Jirou"
)

User.create(
    name: "Saburou"
)

作成したら以下のコマンドを実行してください。

# 実行コマンド

docker-compose run back rails db:seed

以下のようなメッセージが表示されれば成功です。

成功時のメッセージ

Creating test_drmv_back_run ... done
Running via Spring preloader in process 19

(5) RailsとMySQLの連携の動作確認

RailsとMySQLの連携の動作確認を行います。vueを起動するために以下のコマンドを実行しましょう。

実行コマンド

docker exec -it front /bin/bash
npm run serve

成功したら、以下のURLにブラウザでアクセスしましょう。

検索ボタンを押下してください。

seed.rbで作成した3件分のデータが表示されたら成功です。

これで手順7は完了です。
以下は手順7までのブランチです。

最後に

これで本記事の目的であるDockerを使用した、Rails6・MySQL8.0・Vue3の連携は完了です。
お疲れ様です。