【保存版】Docker上に構築したRails6でVue.jsを表示する方法（エラー対処法＆Vuetifyの使い方）

$ mkdir rails-vue
$ cd rails-ve

$ vim Dockerfile

FROM ruby:2.7.4

#apt-keyとdevconfのエラー対策
ENV APT_KEY_DONT_WARN_ON_DANGEROUS_USAGE=DontWarn
ENV DEBCONF_NOWARNINGS=yes

# node.jsと必要なライブラリのインストトール
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client \
            curl apt-transport-https wget

# yarnのインストール
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 && apt-get install -y yarn

#aptキャッシュの削除
RUN rm -rf /var/lib/apt/lists/*

# ディレクトリ・ファイルの作成
RUN mkdir /rails-vue
WORKDIR /rails-vue
COPY Gemfile /rails-vue/Gemfile
COPY Gemfile.lock /rails-vue/Gemfile.lock

# gem(Rails6)のインストール
RUN bundle install
COPY . /rails-vue

RUN yarn install --check-files
RUN bundle exec rails webpacker:compile

# コンテナ起動時に毎回実行するスクリプトを追加
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# rails起動コマンド
CMD ["rails", "server", "-b", "0.0.0.0"]

$ vim Gemfile

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

touch Gemfile.lock

vim entrypoint.sh

#!/bin/bash
set -e

# 初期に作成されるPIDを削除する
rm -f /rails-vue/tmp/pids/server.pid

# DockerfileのCMDにセットしたすべての引数を実行する
exec "$@"

$ vim docker-compose.yml 

version: '3'
services:
  db:
    image: postgres
    container_name: rails-vue-db
    volumes:
      - ./tmp/db:/var/lib/postgresql/data
    environment:
      POSTGRES_HOST_AUTH_METHOD: 'trust'

  web:
    build: .
    container_name: rails-vue-web
    command: bash -c "rm -f tmp/pids/server.pid && rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/rails-vue
    ports:
      - "3000:3000"
    depends_on:
      - db

$ docker-compose run web rails new . --force --no-deps --database=postgresql

$ docker-compose build

default: &default
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  #####追記#####
  host: db
  username: postgres
  passowrd:
  #############

development:
  <<: *default
  database: myapp_development

test:
  <<: *default
  database: myapp_test

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

$ docker-compose run web rails db:create

$ docker-compose run web rails db:create
Starting rails-vue_db_1 ... done
Creating rails-vue_web_run ... done
Created database 'rails_vue_development'
Created database 'rails_vue_test'

$ docker-compose up

rails g <コントローラ名> <アクション名>

$ docker-compose run web rails g controller home index
Creating rails-vue_web_run ... done
Running via Spring preloader in process 22
      create  app/controllers/home_controller.rb
       route  get 'home/index'
      invoke  erb
      create    app/views/home
      create    app/views/home/index.html.erb
      invoke  test_unit
      create    test/controllers/home_controller_test.rb
      invoke  helper
      create    app/helpers/home_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/home.scss

rails webpacker:install:vue

$ docker-compose run web rails webpacker:install:vue
省略
Webpacker now supports Vue.js 🎉

        modified:   config/webpack/environment.js
        modified:   config/webpacker.yml
        modified:   package.json
        modified:   yarn.lock

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        app/javascript/app.vue
        app/javascript/packs/hello_vue.js
        config/webpack/loaders/

"dependencies": {
　　(省略)
    "vue-loader": "15.9.2",
　　(省略)
  },

# yarn install

# docker-compose run <Railsのサービス名> yarn install

$ docker exec -it rails-vue-web bash
root@59229383d91c:/rails-vue# yarn install
yarn install v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > vue-loader@15.9.2" has unmet peer dependency "css-loader@*".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 21.29s.

    plugins: [
     (省略),
     ["@babel/plugin-proposal-private-methods", { "loose": true }]
    ].filter(Boolean)

module.exports = function(api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.'
    )
  }

  return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]
    ].filter(Boolean),
    plugins: [
      'babel-plugin-macros',
      '@babel/plugin-syntax-dynamic-import',
      isTestEnv && 'babel-plugin-dynamic-import-node',
      '@babel/plugin-transform-destructuring',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true
        }
      ],
      [
        '@babel/plugin-proposal-object-rest-spread',
        {
          useBuiltIns: true
        }
      ],
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false
        }
      ],
      [
        '@babel/plugin-transform-regenerator',
        {
          async: false
        }
      ],
      ["@babel/plugin-proposal-private-methods", { "loose": true }]
    ].filter(Boolean)
  }
}

$ mv app/javascript/packs/hello_vue.js app/javascript/packs/main.js

<%= javascript_pack_tag 'main' %>
<%= stylesheet_pack_tag 'main' %>

{
  "application.js": "/packs/js/application-e421b4aa3f716bebdab1.js",
  "application.js.map": "/packs/js/application-e421b4aa3f716bebdab1.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-e421b4aa3f716bebdab1.js"
      ],
      "js.map": [
        "/packs/js/application-e421b4aa3f716bebdab1.js.map"
      ]
    },
    "main": {
      "js": [
        "/packs/js/main-f10dedba5d1ccdc85afe.js"
      ],
      "js.map": [
        "/packs/js/main-f10dedba5d1ccdc85afe.js.map"
      ]
    }
  },
  "main.js": "/packs/js/main-f10dedba5d1ccdc85afe.js",
  "main.js.map": "/packs/js/main-f10dedba5d1ccdc85afe.js.map",
}

{
  "application.js": "/packs/js/application-e421b4aa3f716bebdab1.js",
  "application.js.map": "/packs/js/application-e421b4aa3f716bebdab1.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-e421b4aa3f716bebdab1.js"
      ],
      "js.map": [
        "/packs/js/application-e421b4aa3f716bebdab1.js.map"
      ]
    },
    "hello_vue": {
      "js": [
        "/packs/js/hello_vue-f10dedba5d1ccdc85afe.js"
      ],
      "js.map": [
        "/packs/js/hello_vue-f10dedba5d1ccdc85afe.js.map"
      ]
    }
  },
  "hello_vue.js": "/packs/js/hello_vue-f10dedba5d1ccdc85afe.js",
  "hello_vue.js.map": "/packs/js/hello_vue-f10dedba5d1ccdc85afe.js.map",
}

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

<template>
  <div id="app">
    <p>{{ message }}</p>
    <div class="picture-wrapper">
        <p>picture</p>
        <img src="../assets/images/mountain.jpg" alt="">
    </div>
  </div>
</template>

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

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
.picture-wrapper{
  margin: 0 auto;
  max-width: 60%;
}
.picture-wrapper img{
  width: 100%;
}
</style>

<template>
  <div class="picture-wrapper">
    <p>picture</p>
    <img src="../../assets/images/mountain.jpg" alt="">
  </div>
</template>

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

<style>
p{
  text-align: center;
}
.picture-wrapper{
  margin: 0 auto;
  max-width: 60%;
}
.picture-wrapper img{
  width: 100%;
}
</style>

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

<script>
import Mountain from "./components/Mountain"

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

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

p{
  color: red;
}

docker-compose run web yarn add vuetify

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

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

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

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

<!DOCTYPE html>
<html>
  <head>
    <title>RailsVue</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

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

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

<template>
  <v-app id="app">
    <p>{{ message }}</p>
    <Mountain/>

    <v-alert
      type="success"
      width="400px"
      color="green"
      class="mx-auto"
    >Alert created by Vuetify</v-alert>

  </v-app>
</template>

<script>
import Mountain from "./components/Mountain"

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

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

    <v-alert
      type="success"
      width="400px"
      color="green"
      class="mx-auto"
    >Alert created by Vuetify</v-alert>

<template>
  <v-card
    color="grey lighten-4"
    flat
    tile
  >
    <v-toolbar dense>
      <v-app-bar-nav-icon/>

      <v-toolbar-title>Rails-Vue-App</v-toolbar-title>

      <v-spacer/>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
  </v-card>
</template>

<script>
export default {

}
</script>

<style>

</style>

<template>
  <v-app id="app">
    <Header/>

    <p class="page-title">{{ message }}</p>
    <Mountain/>

    <v-alert
      type="success"
      width="400px"
      color="green"
      class="mx-auto"
    >Alert created by Vuetify</v-alert>

  </v-app>
</template>

<script>
import Mountain from "./components/Mountain"
import Header from "./components/Header"

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

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
.page-title{
  margin-top: 20px;
}
</style>