Build environment with vue.js + rails + docker

Directory structure

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

File contents


FROM ruby:2.6.5

RUN apt-get update -qq && \
    apt-get install -y build-essential \
#Yarn installation
RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
    curl -sS | apt-key add - && \
    echo "deb stable main" | tee /etc/apt/sources.list.d/yarn.list && \
    apt-get update && apt-get install -y yarn

#Install Nodejs by specifying the version
RUN apt-get install -y nodejs

RUN mkdir /app

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

# RUN gem install bundler -v 1.3.0 (If you want to add from the middle, you also need to specify bundler)
RUN bundle install

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

source ''
gem 'rails', ''

Once you have done this, start the image and container with docker-compose up.

$ docker-compose up

↓ Check if the container can be started

$ docker ps

Enter the started web container

$ docker exec -it web container ID/bin/bash

Install vue.js

$rails new app name--webpack=vue
$ rails s -b

Change database from sqlite to mysql


# 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 name

  <<: *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.
  <<: *default
  database: rails_test

  <<: *default
  database: rails_production

↓ gem'sqlite3' → change to gem'mysql2'


source ''
git_source(:github) { |repo| "{repo}.git" }

ruby '2.6.5'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3', '>='
# 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:
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more:
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more:
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]

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:
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'

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'

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

Install mysql

$ bundle install

$ apt-get install mariadb-client

↓ Check if you can access mysql with the settings in database.yml.

$ mysql -u root -ppassword -h db
MySQL [(none)]>

*If access is successful

↓ Log out once and create a database

$ rake db:create

↓ If you can make it, access mysql again and check if the DB is created

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

View vue.js

First of all, we will create a controller and view to display vue.js in the state of being in the web container.

$ rails g controller home index
※ app/views/home/index.html.erb

<%= javascript_pack_tag 'hello_vue' %> 

スクリーンショット 2021-01-10 23.01.44.png

If you can reach this point for the time being, the whole process is complete.

Recommended Posts

Build environment with vue.js + rails + docker
Build Rails environment with Docker Compose
How to build Rails 6 environment with Docker
[Docker] Rails 5.2 environment construction with docker
Build docker environment with WSL
[Rails] How to build an environment with Docker
Rails + MySQL environment construction with Docker
Build Couchbase local environment with Docker
Build a Node.js environment with Docker
Build PlantUML environment with VSCode + Docker
Easily build a Vue.js environment with Docker + Vue CLI
[Environment construction with Docker] Rails 6 & MySQL 8
Build Rails (API) x MySQL x Nuxt.js environment with Docker
Build docker + laravel environment with laradock
How to build Rails, Postgres, ElasticSearch development environment with Docker
Rails environment construction with Docker (personal apocalypse)
Building Rails 6 and PostgreSQL environment with Docker
Build a PureScript development environment with Docker
Create Rails 6 + MySQL environment with Docker compose
Build a Wordpress development environment with Docker
[Docker] Build Jupyter Lab execution environment with Docker
Build an environment with Docker on AWS
Build TensorFlow operation check environment with Docker
Rails deploy with Docker
How to build Rails + Vue + MySQL environment with Docker [2020/09 latest version]
Build a development environment for Docker + Rails6 + Postgresql
Build a Laravel / Docker environment with VSCode devcontainer
Build a WordPress development environment quickly with Docker
Build mecab (NEologd dictionary) environment with Docker (ubuntu)
[First team development ②] Build an environment with Docker
Build debug environment on container --Build local development environment for Rails tutorial with Docker-
How to build a Ruby on Rails development environment with Docker (Rails 6.x)
Build a local development environment for Rails tutorials with Docker (Rails 6 + PostgreSQL + Webpack)
How to build a Ruby on Rails development environment with Docker (Rails 5.x)
Template: Build a Ruby / Rails development environment with a Docker container (Ubuntu version)
Template: Build a Ruby / Rails development environment with a Docker container (Mac version)
Run Rails whenever with docker
React environment construction with Docker
Build DynamoDB local with Docker
[Docker] Use whenever with Docker + Rails
How to build docker environment with Gradle for intelliJ
Build an environment of Ruby2.7.x + Rails6.0.x + MySQL8.0.x with Docker
Build Docker + Laravel PHP + Vue.js development environment in 5 minutes
[Note] Build a Python3 environment with Docker in EC2
Build Java development environment with WSL2 Docker VS Code
Build WordPress environment with Docker (Local) and AWS (Production)
Node.js environment construction with Docker Compose
I made a development environment with rails6 + docker + postgreSQL + Materialize.
Build a Tomcat 8.5 environment with Pleiades 4.8
Environment construction with Docker for beginners
[Rails] [Docker] Copy and paste is OK! How to build a Rails development environment with Docker
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ Express ~
Docker + rails + Vue.js localhost connection refused
Create SolrCloud verification environment with Docker
Rails on Docker environment construction procedure
Create Laravel environment with Docker (docker-compose)
Build jooby development environment with Eclipse
Rails application development environment construction with Docker [Docker, Rails, Puma, Nginx, MySQL]
Build a Node-RED environment with Docker to move and understand
Create Rails5 and postgresql environment with Docker and make pgadmin available
Build Unity development environment on docker