Rails 5 x MySQL x Vue.js の環境を Docker で爆速で構築する
今日の目標
Rails アプリケーションをDocker-composeで構築し、さらにVue.jsの導入もやっちゃうぞ
Vue.js導入の際の予想されるエラーに関しての対処も文中に記述しております。
環境
Ruby 2.5.1
Rails 5.2.4
MySQL 5.7
Railsのプロジェクトを作成するディレクトリを事前に作成しておく
$ mkdir todo-target
作成したディレクトリに移動
$ cd todo-target
Docker用のファイルを作成する
Docker構築では 基本的に以下の4ファイルを作成していく
Dockerfile
docker-compose.yml
Gemfile
Gemfile.lock
Dockerfileを作成
$ touch Dockerfile
作成したDockerfileを以下のように編集する
FROM ruby:2.5.1
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - && apt-get update && \
apt-get install -y nodejs --no-install-recommends && rm -rf /var/lib/apt/lists/*
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev
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 curl -sL https://deb.nodesource.com/setup_8.x | bash - && \
apt-get install nodejs
RUN yarn add node-sass
RUN mkdir /app
WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
COPY . /app
Dockerfileに書かれる内容は
ベースとなるイメージを指定する
FROM ruby:2.5.1
コンテナ上のワーキングディレクトリを指定する
WORKDIR /app
ディレクトリやファイルをコピーする
左側がホストのディレクトリ、右側がコンテナ上のディレクトリ
COPY Gemfile /app/Gemfile
"docker build"時に実行される処理
RUN curl -sL https:....
とまぁこんな感じ。あとは場数を踏んで慣れるしかありません。
続いてdocker-compose.ymlを作成
$ touch docker-compose.yml
作成したdocker-compose.ymlを以下のように編集
version: '3'
services:
web:
build: .
command: bundle exec rails s -p 3000 -b '0.0.0.0'
volumes:
- .:/app
ports:
- 3000:3000
depends_on:
- db
tty: true
stdin_open: true
db:
image: mysql:5.7
volumes:
- db-volume:/var/lib/mysql
environment:
MYSQL_ROOT_PASSWORD: password
volumes:
db-volume:
docker-compose.ymlはインデント注意。
services:
とvolumes:
が同じ階層 web:
とdb:
が同じ階層
docker-compose.yml ファイルは上記のようにyaml でDocker コンテナに関する起動オプション(build オプションも含まれることもある)を記述したファイルになります。
このファイルに記載されている内容は基本的にdocker build, docker run コマンド指定することができるオプションになりますが、Docker compose のyaml ファイルとして記述することで複数のコンテナーから成るサービスを俯瞰的に見ることができるようになり、保守性のコストを軽くすることができます。
Gemfileを作成
$ touch Gemfile
作成したGemfileを編集
source 'https://rubygems.org'
gem 'rails', '5.2.1'
空のGemfile.lock
を作成
$ touch Gemfile.lock
Gemfile.lock
はbuildした後に自動的に記述されるので空にしておく。(ファイルは必要)
Rails プロジェクトの作成
次にRailsのプロジェクトを作成するため次のコマンドを実行
$ docker-compose run web rails new . --force --database=mysql
(rails newの . は現在いるディレクトリにそのままプロジェクトを作成するというもの)
$ docker-compose run web rails new . --force --database=mysql
プロジェクトの作成が終わったらdocker-compose ps
でコンテナが作成されているか確認
$ docker-compose ps
database.ymlの編集
次にRailsプロジェクトのdatabase.ymlを編集します。
default: &default
adapter: mysql2
encoding: utf8
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
username: root
password: password
host: db
ここでのポイントはpasswordとhostの部分をdocker-compose.yml
の記述と合わせることです。
それではデータベースを立ち上げて
$ docker-compose run web rails db:create
コンテナを立ち上げ、localhost:3000に接続してみましょう
$ docker-compose up
localhost:3000
Railsが歓迎してくれてますね!
ここまででDocker-composewo使ったRailsの基本的な構築は完了です。 このままアプリ制作に入ってもよいのですが 今回は フロントエンドに Vue.jsを導入してみたいと思います。
Vue.jsの導入
vue.jsをRailsで使用できるようにするためにまずはWebpackerを導入していきます。
Gemfileに以下を追記していきます。
gem 'webpacker'
記述したのち
$ docker-compose run web rails webpacker:install
コンテナ内でwebpackerのinstallをします。
インストールが完了したらいろいろRailsのプロジェクトにファイルが追加されると思います。
この段階でもし
Could not find gem ◯◯ in any of the gem sources listed in your Gemfile.
Run bundle install to install missing gems.
といったエラーが出る場合
$ docker-compose run web bundle install
でコンテナ内でbundle install するようにしてください
↑のようなエラー
Your Yarn packages are out of date!
Please run yarn install --check-files to update.
が出る場合
ログ通りに
$ yarn install --check-files
を実行するとサーバーは起動できるものの
ブラウザでアプリを開いた時にcssライブラリたちが効いていない事象に陥るかもしれません。
そんな時は
$ yarn upgrade
とすることで一発で解消出来ます。
下準備が出来ましたので Vueをインストールしていきたいと思います。
Vueのインストール
$ docker-compose run web rails webpacker:install:vue
これでVue.jsの導入が完了しました。
Vue.jsファイルのビルド
次にVue.js関連のコンポーネントをJavascriptにコンパイルするため
$ docker-compose run web bin/webpack
を実行します。 これで
仮置きのビューを作成して確認してみましょう
ルーティング、コントローラ、ビューの作成
$ rails g controller Page home
ルーティングは以下
Rails.application.routes.draw do
root to: 'page#home'
end
作成されたビューに<%=javascript_pack_tag 'hello_vue'%>
と記述し
問題なく表示されていれば成功です!
<%=javascript_pack_tag 'hello_vue'%>
ここまでで Rails x MySQL x Vue.js の docker-compose による環境構築は完了です。
お疲れ様でした!
ひがきけいた
Github
Twitter
ポートフォリオサイト
https://myprofile-7377b.web.app/
Author And Source
この問題について(Rails 5 x MySQL x Vue.js の環境を Docker で爆速で構築する), 我々は、より多くの情報をここで見つけました https://qiita.com/keitah/items/5a2aceffc6caa41e2435著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .