vue.js + rails + dockerで環境構築する

ディレクトリ構成

root
　├ Dockerfile
　├ docker-compose.yml
　├ Gemfile
　└ Gemfile.lock

ファイル内容

※Dockerfile

FROM ruby:2.6.5

RUN apt-get update -qq && \
    apt-get install -y build-essential \
                      libpq-dev
#yarnのインストール
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

#Nodejsをバージョン指定してインストール
RUN apt-get install -y nodejs

RUN mkdir /app
ENV APT_KEY_DONT_WARN_ON_DANGEROUS_USAGE=DontWarn
ENV APP_ROOT /app
WORKDIR $APP_ROOT

ADD ./Gemfile $APP_ROOT/Gemfile
ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock

# RUN gem install bundler -v 1.3.0 (途中から追加する場合はbundlerの指定も必要)
RUN bundle install
ADD . $APP_ROOT

※docker-compose.yml

version: '3'
services:
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: root
    ports:
      - "4306:3306"
    volumes:
      - mysql_data:/var/lib/mysql
  web:
    build: .
    volumes:
      - .:/app
      - gem_data:/usr/local/bundle
    ports:
      - "3000:3000"
    depends_on:
      - db
    tty: true
    stdin_open: true
volumes:
  mysql_data:
  gem_data:

※Gemfile

source 'https://rubygems.org'
gem 'rails', '6.0.3.4'

※Gemfile.lockはファイルだけ作成しておけば良い。
※Rails 6.0から、Rubyのバージョンは2.5以上が必須
※バージョンが古いと何故か後でvue.jsをインストールする時にwebpackerが読み込まれない事があったのでバージョンを最新にしました。（あくまで自分の環境ですが）

ここまで出来たら一旦docker-compose upでイメージとコンテナを起動させます。

$ docker-compose up

↓コンテナが起動出来ているか確認

$ docker ps

起動したwebコンテナに入る

$ docker exec -it webのコンテナID　/bin/bash

vue.jsをインストール

$ rails new アプリ名 --webpack=vue

※一旦サーバー起動してrailsの初期画面が表示されているか確認しときます。vue.jsの表示設定はまだしてません。

$ rails s -b 0.0.0.0

データベースをsqliteからmysqlへ変更する

※app/config/database.yml

# SQLite. Versions 3.8.0 and up are supported.
#   gem install sqlite3
#
#   Ensure the SQLite 3 gem is defined in your Gemfile
#   gem 'sqlite3'
#
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password # docker-compose.ymlのMYSQL_ROOT_PASSWORD
  host: db # docker-compose.ymlのservice名

development:
  <<: *default
  database: rails_development

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: rails_test

production:
  <<: *default
  database: rails_production

↓gem 'sqlite3'　→　gem 'mysql2'　に変更する

※Gemfile

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

ruby '2.6.5'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3', '>= 6.0.3.4'
# Use sqlite3 as the database for Active Record
gem 'mysql2'
# 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]
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'
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]

mysqlをインストール

$ bundle install

$ apt-get install mariadb-client

↓database.ymlの設定した内容でmysqlにアクセスできるか確認しときます。

$ mysql -u root -ppassword -h db

※上の-ppasswordは -p passwordと記載するとエラーになるので注意。無事アクセスできると下のようになります。

MySQL [(none)]>

*アクセス成功した場合

↓一度ログアウトしてdatabaseを作ります

$ rake db:create

↓作れたら再度mysqlにアクセスしてDBが出来ているか確認

MySQL [(none)]> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| rails_development  |
| rails_test         |
| sys                |
+--------------------+
6 rows in set (0.011 sec)

vue.jsを表示する

まずはwebコンテナに入った状態でvue.jsを表示するためのcontrollerとviewを作っていきます。

$ rails g controller home index

※ app/views/home/index.html.erb

<%= javascript_pack_tag 'hello_vue' %> 

とりあえずここまでいけたら一通り完了です。
※表示されなかった場合などは一旦rails sを再起動したりすると直るかもしれません。