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

# はじめに
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を記述します。

```ruby: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です。

```ruby: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です。

```ruby: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です。

```ruby: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`にアクセスします。
以下のページが表示されれば成功です。

<img width="1439" alt="スクリーンショット 2020-07-05 2.21.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576866/53c84cdc-815a-0f2a-adc2-9f11b4e63c5e.png">

# 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に貼り付けて、確認するのが良いかと思います。

```ruby: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が反映され、開発者ツールを開いた際にエラーが出ていなければ成功です。
<img width="1391" alt="スクリーンショット_2020-07-05_3_37_52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576866/270f5bfc-0813-484b-36e5-1b23b5f58bb3.png">




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

```
yarn add jquery bootstrap popper.js
```

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

# 参考
- [DockerでRuby on Railsの環境構築を行うためのステップ【Rails 6対応】](https://qiita.com/kodai_0122/items/795438d738386c2c1966)
- [Rails 6にjQueryとBootstrapを入れる](https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a)
- [初めてのRuby on rails Bootstrap導入編 [Memo for neko]](https://qiita.com/Matteneko3/items/4dae9e55054e4a4affb4)