Docker + Rails6 + Vue の開発環境を建てる

# ほしいTodoアプリがない  
  
自分の欲しいTodo機能をもったアプリが無い。
[Todoist](https://todoist.com/?lang=ja)や、
[Trello](https://trello.com/)、
[Microsoft Todo](https://todo.microsoft.com/ja-jp/)に、
[sublimetext3のプラグインであるplaintasks](https://qiita.com/mirai_is_here/items/10221b1dc01b04fb351d)など、
世の中にはtodoを管理するアプリ・サービスが数あれど、
自分が欲しいtodo機能をもったアプリは存在してない。

ならば仕方ない。
「なければ作ればいいじゃない」だ。

ということで、Todoアプリを作ることにした。

## Docker + Rails6 + Vue の開発環境を建てる

ということで、今回は
- Docker
- Ruby 2.5.3
- Rails6
- MySQL
- Vue

の構成で開発することにした。

単にtodoアプリならば、
C# + ザマリンとかもありだし、
kotlinも面白そうだし、
DjangoやFlaskでもよかったのだが、
Railsの開発から離れて期間が経っているからリハビリしたいし、
vueに最近ハマってるから絡ませたいし、
という軽薄な理由からこの構成にした。

また、どうせ開発するなら、
これまた開発から離れて久しいDockerをフル活用することにした。
リハビリ、リハビリ。


## 参考にさせて頂いたサイト

たくさん参考にさせて頂きました。

[DockerでRuby on Railsの開発をしよう](https://qiita.com/saitoeku3/items/b1aa2ae143624e551aea)

[gem mysql2がインストールできなかった時の対処](https://qiita.com/lemmy/items/373502e9087c14b61bb7)

[bootsnapについて調べてみた](https://qiita.com/Daniel_Nakano/items/aadeaa7ae4e227b73878)

[Rails6 Webpackerでエラーが出た](https://qiita.com/libertyu/items/1eb74adc817ab8971100)

[Rails5.2 + Docker環境にVue.js (Webpacker) を導入する
](https://remonote.jp/rails-docker-vuejs-construction)

[Docker × Ruby on Rails × MySQLの環境構築](https://qiita.com/tatsuo-iriyama/items/0bf3b08de03280314c91)

## 開発環境

- macOS Mojave
- Docker Desktop
- Visual Studio Code

上記の環境で行います。
Dockerのインストールだとかは終わっている前提。

## では環境構築をしていきます

任意の空ディレクトリを作成します。
今回はそのまんま"todo"というディレクトリを作成しました。
準備段階では、以下のようなディレクトリ構成になるかと思います。

```text
- todo
  - Dockerfile
  - docker-compose.yml
  - Gemfile
  - Gemfile.lock

```

### まずはDockerの準備です

#### 以下のようなDockerfileを作成します。

```dockerfile

FROM ruby:2.5.3
ENV LANG C.UTF-8

RUN apt-get update -qq && apt-get install -y \
    build-essential \
    && rm -rf /var/lib/apt/lists/*

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 gem install bundler

WORKDIR /tmp
ADD Gemfile Gemfile
ADD Gemfile.lock Gemfile.lock
RUN bundle install

ENV APP_HOME /myapp
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME
ADD . $APP_HOME
```

2つめ、3つめの[RUN]がなんとも余分に見えますが、
これ、後々につかうyarn,nodejsのバージョンが古いとエラーが出てしまうので、
その対策として最新バージョンを取得してくるようにしています。

#### 次にdocker-compose.ymlを準備します

```docker
version: '3'

services:
  web:
    build: .
    ports:
      - "3000:3000"
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/myapp
      - bundle:/usr/local/bundle
    depends_on:
      - db
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: password
      username: root
      password: password
    ports:
      - '3306:3306'
    volumes:
      - mysql_data:/var/lib/mysql
volumes:
  bundle:
  mysql_data:
```

特に特別なことは無いです。
素直に書いてます。
|x・).o(...というかほぼコピペで使わせて頂いてます...)

#### 続いてGemfile

```ruby
source 'https://rubygems.org'

gem 'rails', '~> 6.0'
```

今回は出たばかりのver6.0を利用します。

#### 最後にGemfile.lock

これは空ファイルだけ作っておけば大丈夫です。

### 準備が整いましたので、いざ実行しましょう

これで準備が整いました。
というわけで、いざ実行！

```sh
docker-compose run web bundle exec rails new . --force --database=mysql --skip-bundle
```
ちょっと時間が掛かりますので、
美味しいコーヒーでも入れてきましょう。

コーヒーが入る頃には、終わっているかと思います。
先程つくったtodoディレクトリにrails関連のディレクトリ&ファイルが出来ているはずです。

#### DataBaseの準備をします

出来上がったファイルの中から、config/database.ymlを見つけ出して、
以下のように編集します。

```yml
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
```

#### エラーになる原因を取り除く:bootsnap

さぁいざ、ビルド！
と、行きたいところですが、このままビルドすると恐らくエラーになります。
犯人は"bootsnap"です。
ザックリ調べて見た結果、どうやら開発効率を上げるためのgemの様子。
色々と解決策があるようですが、今回は特に利用する必要はないので、
gemfileから該当箇所を削除 or コメントアウトしておきます。

```ruby
# gem 'bootsnap', '>= 1.4.2', require: false
```
#### エラーになる原因を取り除く:webpacker

さぁ今度こそビルド！
と、行きたいところですが、このままビルドすると恐らくエラーになります。
犯人は"webpack"です。
Rails6では、webpackを入れないとエラーになるようです。
そこで、webpackをインストールします。

```sh
docker-compose run web rails webpacker:install
```

#### いざ実行！

さぁいざ、ビルド！

```sh
docker-compose build
```

そして実行!

```sh
docker-compose up -d
```

続けてdb作成！

```sh
docker-compose run web rake db:create db:migrate
```

これで"Hello World!"が表示される。。。はず！！

|x・)oO(いつもゴリゴリSQL書いてる身からすると、db:createとか優しさの塊みたいに見える)

ご意見・ご指摘など頂けると助かります。