【Rails】Rails6 + Docker 環境構築 + Bootstrap4の導入

18165 ワード
Bootstrap webpack Rails6 bootstrap4 Docker Bootstrap テキストリンク

はじめに

DockerでRailsの環境を構築することが多いので手順を備忘録として書きます。
本記事ではDocker上にRail6の環境を構築することに加えてBootstrap4を導入するところまでの手順を記述しています。
コマンドの解説などはほとんど書いていませんので、参考に貼っている記事を参照されてください🙇‍♂️

自分の環境

  • Docker for mac
  • macOS Catalina ver 10.15.4

各種ファイルの作成

まず、ターミナル上で開発を行うディレクトリ内にプロジェクト用のディレクトリを作成します。
今回はプロジェクト名をmy_appとするのでディレクトリ名はmy_appにしておきます。

# 作業スペースに移動
cd work
# プロジェクト用のディレクトリを作成
mkdir my_app

次にDocker用のファイルやGemfileを作成します。

作成するファイル
- Dockerfile
- docker-compose.yml
- entrypoint.sh
- Gemfile
- Gemfile.lock

cd my_app
touch Dockerfile
touch docker-compose.yml
touch entrypoint.sh
touch Gemfile
touch Gemfile.lock

次にDockerfileを記述します。

Dockerfile
FROM ruby:2.7.1
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client

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_7.x | bash - && \
apt-get install nodejs
RUN mkdir /my_app
WORKDIR /my_app
COPY Gemfile /my_app/Gemfile
COPY Gemfile.lock /my_app/Gemfile.lock
RUN bundle install
COPY . /my_app

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]

次にdocker-compose.ymlです。

docker-compose.yml
version: '3'
services:
  db:
    image: postgres
    environment:
      POSTGRES_PASSWORD: postgres
  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/my_app
    ports:
      - "3000:3000"
    depends_on:
      - db
    stdin_open: true
    tty: true

次にentrypoint.shです。

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

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

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

次にGemfileです。

Gemfile
source 'https://rubygems.org'
gem 'rails', '6.0.3'

Gemfile.lockについては空のままで大丈夫です。

Dockerコマンドを叩く（プロジェクトの構築）

ターミナル上コマンドを叩いてでプロジェクトの構築を行います。

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

少し時間がかかりますが、以下のように出力が出れば成功です。

Webpacker successfully installed 🎉 🍰

次に以下のコマンドを叩いてgemなどを入れます。

docker-compose build

次のように出れば成功です。

Successfully tagged my_app_web:latest

次にデータベースの設定をします。
作成されたRailsプロジェクトの/config/database.ymlを以下のように編集します。

database.yml
default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgres
  password: postgres
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: 5

development:
  <<: *default
  database: my_app_development

以下のコマンドを叩いてbashに入ります。

docker-compose run --rm web bash

bashに入れましたら、次のコマンドを叩いてdbを作成します。

rails db:create

ここでgemがないというようなエラーが出る場合は一度bashを抜けて再度docker-compose buildします。その後、同様の手順を行ってください。

dbの作成が成功しましたら、exitでbashを抜けるか、新規ウィンドウを開いて、作業ディレクトリに移動し以下のコマンドを叩きます。

docker-compose up

色々と文字が出て最後が以下の出力が出るはずです。

 Use Ctrl-C to stop

ブラウザからlocalhost:3000にアクセスします。
以下のページが表示されれば成功です。

bootstrapの導入

続いてbootstrapの導入です。
まず、/app/javascript/packs/application.jsに以下を追記します。

application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

//以下の2行
import 'bootstrap';
import '../stylesheets/application.scss';

続いて/app/javascript以下にstylesheetsディレクトリを作成し、さらにその中にapplication.scssを作成します。
パスは/app/javascript/stylesheets/application.scssとなります。

次に今作成したapplication.scssに以下を書きます。

application.scss
@import '~bootstrap/scss/bootstrap';

続いて再度Dockerのbashに入ります。

docker-compose run --rm web bash

bashに入りましたら、以下のコマンドを叩きます。

yarn add jquery bootstrap popper.js

処理が完了しましたら、exitでbashを抜けて、先ほど立ち上げたサーバーをC-cで停止します。
サーバーが止まりましたら、一度docker-compose downします。

docker-compose down

続いてDockerのbashに入ります。

docker-compose run --rm web bash

bashに入りましたら、次のコマンドを実行します。

yarn install --check-files

ここまでできましたら、作業完了です。

確認

bootstrapが入っているか確認する際には、以下のテストコードをどこかしらのviewに貼り付けて、確認するのが良いかと思います。

test_view.html.erb
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

bootstrapが反映され、開発者ツールを開いた際にエラーが出ていなければ成功です。

ここで、application.js:1 Uncaught Error: Cannot find module 'bootstrap'
とエラーがでた場合は再度、以下のコマンドを叩いて、再度確認してみてください。

yarn add jquery bootstrap popper.js

最後に

Railsを使うことが多いので、備忘録として残しました。
自分もDockerファイルなどの書き方について、よくわかっていない部分が多く、他の方の記事を大いに参考にしながら環境を作りました。ありがとうございます🙇‍♂️
Rails6では環境を作る際にwebpack,yarn関係でつまづくことが多いと思います。
至らない点など多いと思われますが、参考にしていただければ幸いです。

参考