Help us understand the problem. What is going on with this article?

【環境構築】Docker + Rails6 + Vue.js + Vuetifyの環境構築手順

はじめに

Docker + Rails6 + Vue.js + Vuetifyの開発環境構築手順をまとめました。

以下の記事を参考にさせて頂きました!ありがとうございます:bow_tone1:

※(2020/02/12)関連記事書きました!
【環境構築】Rails6 + Vue.jsで hello_vue.jsの名前をmain.jsに変更したいときの手順 - Qiita

環境

OS: macOS Catalina 10.15.1
zsh: 5.7.1
Ruby: 2.6.5
Rails: 6.0.2
Docker: 19.03.5
docker-compose: 1.24.1
Vue: 2.6.10
vue-router: 2.6.10
vuex: 3.1.2
vuetify: 2.1.0

1.準備

作成するアプリケーション名はhogeappとします。
まずは以下ファイルを作成して下さい。

Dockerfile

yarnが必要になるので、Dockerfileに反映しています。
※(2020/02/12)pryで日本語入力するためのENV LANG C.UTF-8を追記しました。

hogeapp/Dockerfile
FROM ruby:2.6.5

RUN apt-get update -qq && \
  apt-get install -y build-essential \
  libpq-dev \
  nodejs \
  vim

RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
  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 && apt-get install -y yarn

RUN mkdir /app_name
ENV APP_ROOT /app_name
ENV LANG C.UTF-8
WORKDIR $APP_ROOT

COPY ./Gemfile $APP_ROOT/Gemfile
COPY ./Gemfile.lock $APP_ROOT/Gemfile.lock
RUN bundle install

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT [ "entrypoint.sh" ]
ADD . $APP_ROOT

docker-compose.yml

hogeapp/docker-compose.yml
version: "3"
services:
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: root
    volumes:
      - db-data:/var/lib/mysql
    ports:
      - "3306:3306"
  web:
    build: .
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/app_name
    ports:
      - "3000:3000"
    links:
      - db
    tty: true
    stdin_open: true
    depends_on:
      - db
  data:
    image: busybox
    volumes:
      - db-data:/var/lib/mysql
    tty: true
volumes:
  db-data:
    driver: local

Gemfile

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

gem 'rails', '~> 6.0.2', '>= 6.0.2.1'

Gemfile.lock

中身は空で作成します。

hogeapp/Gemfile.lock

entrypoint.sh

hogeapp/entrypoint.sh
#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /app_name/tmp/pids/server.pid

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"

これで必要なファイルが揃ったので、次はRailsアプリの作成です。

2.Railsアプリの作成

rails new

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

database.ymlの変更

config/database.yml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password #ここを変更
  host: db #ここを変更

docker-compose build

ビルドします。

$ docker-compose build

コンテナが立ち上がるか確認

docker-compose up -dだとログが見えないので、無事に環境構築が完了するまでは-dなしが良いと思います。

$ docker-compose up

※このエラーが出たら

Error response from daemon: OCI runtime create failed: container_linux.go:346: starting container process caused "exec: \"rails\": executable file not found in $PATH": unknown

$ docker-compose build

※何らかのgemが不足しているようなエラーが出たら

自分は以下のようなエラーが発生しました。

Could not find public_suffix-4.0.1 in any of the sources

$ docker-compose run web bundle install

一度bundle installを試してみて下さい。

db:create

無事にコンテナが立ち上がったら、DBを作成しましょう。

$ docker-compose exec web rails db:create

Yay! You’re on Rails!

localhost:3000にアクセスして確認してみましょう。

image.png

これでRailsはOKなので、次はVue.jsです!

3.Vue.jsの導入

webpackerのインストール

$ docker-compose exec web rails webpacker:install

Vue.jsのインストール

$ docker-compose exec web rails webpacker:install:vue

Vue.jsとの連携を確認

Railsでコントローラーを作ってみて、Vue.jsと連携出来るかを確認してみます。

$ docker-compose exec web rails g controller home index
app/views/home/index.html.erb
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>

このように変更し、hello_vue.jsを読み込みます。

※Vue.jsのインストール時にhello_vue.jsはデフォルトで作成されています。

※ここのhello_vue.jsの名前を変えたい方向けに、別記事書きました!以下ご参照下さい。
【環境構築】Rails6 + Vue.jsで hello_vue.jsの名前をmain.jsに変更したいときの手順 - Qiita

Railsのルーティングを設定

config/routes.rb
root to: 'home#index'

ブラウザで確認

localhost:3000にアクセスし、下記画面が出力されているか確認してみて下さい。

image.png

これでVue.jsの導入はOKですが、他の単一ファイルコンポーネントも作成し、読み込めるかどうかを確認しておきます。

4.他の単一ファイルコンポーネントが読み込めるかどうか確認する

Top.vueの作成

app/javascript/components/ディレクトリを作成し、その中にTop.vueを作成します。

Top.vueの中身は以下のようにしました。

app/javascript/components/Top.vue
<template>
  <section id="top">
    <h1>This is Top.vue!</h1>
  </section>
</template>

<script>
  export default {
    name: 'Top'
  }
</script>

<style>
  h1 {
    text-align: center;
  }
</style>

app.vueを変更

app/javascript/app.vue
<template>
  <div id="app">
    <p>{{ message }}</p>
    <Top/> //追記
  </div>
</template>

<script>
import Top from "./components/Top"; //追記

export default {
  data: function () {
    return {
      message: "Hello Vue!"
    }
  },
  components: {
    Top, //追記
  }
}
</script>
...以下略

ブラウザで確認

再度読み込みすると、以下のような画面になっているはずです。

image.png

これできちんと単一ファイルコンポーネントが読み込まれていることが確認できたので、Vue.jsはOKです。

次はラスト!Vuetifyの導入です。

5.Vuetifyの導入

Vuetifyのインストール

$ docker-compose exec web yarn add vuetify

hello_vue.jsに追記

hello_vue.js
import Vue from 'vue'
import Vuetify from 'vuetify' //追加
import "vuetify/dist/vuetify.min.css" //追加
import App from '../app.vue'

Vue.use(Vuetify) //追加

const vuetify = new Vuetify(); //追加

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

  console.log(app)
})

application.html.erbの変更

application.html.erbでVuetify用にフォントとアイコンの読み込みと不要な箇所の削除を行います。

app/views/layouts/application.html.erb
  <head>
...略
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
...略
  </head>

下記タグは不要なので削除しておきます。

app/views/layouts/application.html.erb
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

これで準備が整ったので、あとはVuetifyのコンポーネントが反映されるかどうか、作成して確認してみましょう。

Header.vueの作成

新規にHeader.vueを作成し、<v-app-bar>を組み込んでみます。

app/javascript/components/Header.vue
<template>
  <header id="header">
    <v-app-bar>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toolbar-title>This is Header.vue</v-toolbar-title>
    </v-app-bar>
  </header>
</template>

<script>
  export default {
    name: 'Header',
  }
</script>

app.vueを変更

Header.vueを読み込みつつ、全体をまとめている<div><v-app>タグに変更しておきます。

app/javascript/app.vue
<template>
  <v-app id="app"> //divから変更
    <Header/> //追記
    <h1>This is app.vue</h1> //一応追記。どっちでもいいです
    <p>{{ message }}</p>
    <Top/>
  </v-app>
</template>

<script>
import Header from "./components/Header"; //追記
import Top from "./components/Top";

export default {
  data: function () {
    return {
      message: "Hello Vue!"
    }
  },
  components: {
    Header, //追記
    Top,
  }
}
</script>

これで再度localhost:3000にアクセスし、問題ないかを確認してみます。

image.png

無事に画像のようなヘッダーが表示されていれば完了です!

以上です!お疲れ様でした!:clap:

(2020/02/12)関連記事書きました!

【環境構築】Rails6 + Vue.jsで hello_vue.jsの名前をmain.jsに変更したいときの手順 - Qiita

おわりに

最後まで読んで頂きありがとうございました:bow_tone1:

どなたかのお役に立てれば幸いです:relaxed:

参考にさせて頂いたサイト(いつもありがとうございます)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした