すぐにDockerで動かせるVue.js+Rails+Postgresのサンプル開発環境を作ったよ

知り合いと飲んだ勢いで、簡単なwebアプリを作ることになったので、
簡単にDockerで動くように、開発環境をいじってきましたが、
形になったので、投稿します。

(今まで投稿してきた、記事のまとめみたいな感じです)

## 開発環境構築

（`Docker`が入ってなかったらインストールしてね)

https://github.com/tubutubumustard/vuejs_rails_postgres_docker.git

1． クローンする
2. `docker-compose up`する

以上、終わり。（たぶん、動くはず...）

続きは、この開発環境についての簡単な説明を書くので、よかったら、読んでね。

## docker-compose.yml

```docker-compose.yml
version: '3'
services:
  db:
    image: postgres:12
    volumes:
      - ./db:/var/lib/postgresql/data
    ports:
      - "50000:5432"
    environment:
      POSTGRES_DB: myapp_development
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
  db_test:
    image: postgres:12
    volumes:
      - ./db_test:/var/lib/postgresql/data
    ports:
      - "50001:5432"
    environment:
      POSTGRES_DB: myapp_test
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
  api:
    build: ./rails
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - ./rails:/myapp
    ports:
      - "50003:3000"
    depends_on:
      - db
      - db_test
  view:
    build: ./vuejs
    command: yarn run serve
    volumes:
      - ./vuejs:/myapp
      - /myapp/node_modules # コンテナ内のnode_nodulesがマウントで削除されないようにする
    ports:
      - "50004:8080"
```

サービスは４つで、
それぞれ、別のコンテナで動くようになっています。

- db
  - 開発時に使用するデータベース
- db_text
  - テスト時に使用するデータベース
- api
  - RailsのAPIサーバー
- view
  - フロントエンドのVue.js

## データベース

docker-compose.ymlのみで、
データベースのコンテナが作成されるようにしました。

```yaml
db:
    image: postgres:12
    volumes:
      - ./db:/var/lib/postgresql/data
    ports:
      - "50000:5432"
    environment:
      POSTGRES_DB: myapp_development
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
  db_test:
    image: postgres:12
    volumes:
      - ./db_test:/var/lib/postgresql/data
    ports:
      - "50001:5432"
    environment:
      POSTGRES_DB: myapp_test
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
```

データベースの保存先は、ホストのプロジェクト直下に`db`、`db_test`ディレクトリとして、マウントされます。

```:directory
/project_directory
  |_ db      <- ここにデータベースのディレクリが作成される
  |_ db_test <- ここにデータベースのディレクリが作成される
  |_ rails
  |_ vuejs
  |_ .gitignore
  |_ docker-compose.yml
  |_ README.md
```

## APIサーバー

RailsのAPIサーバーのディレクトリは、
`rails`ディレクトリになります。

```:directory
/project_directory
  |_ db
  |_ db_test
  |_ rails <- これ
  |_ vuejs
  |_ .gitignore
  |_ docker-compose.yml
  |_ README.md
```

`rails`ディレクトリの構成は、
`APIモード`で作成されたプロジェクトになっています。

```:directory
/rails
  |_app
  |_ bin
  |_ config
  |_ db
  |_ lib
  |_ log
  |_ public
  |_ storage
  |_ test
  |_ tmp
  |_ vendor
  |_ .gitignore
  |_ .ruby-version
  |_ config.ru
  |_ Dockerfile
  |_ Gemfile
  |_ Gemfile.lock
  |_ Rakefile
  |_ README.md
```

ここの`Dockerfile`は、
`ruby`のバージョンの指定と、
`nodejs`と`postgresql-client`のインストール、
`Gem`のインストールをしています。

```Docker:rails/Dockerfile
FROM ruby:2.6.3

RUN apt-get update -qq && apt-get install -y nodejs postgresql-client

WORKDIR /myapp

COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock

RUN bundle install
```

`database.yml`で、データベースに接続できるように設定しています。

```database.yml
default: &default
  adapter: postgresql
  encoding: unicode
  pool: 5

development:
  <<: *default
  host: db
  database: myapp_development
  username: postgres
  password: postgres

test:
  <<: *default
  host: db_test
  database: myapp_test
  username: postgres
  password: postgres
```

`docker-compose.yml`の`api`サービスでは、
サービス実行（コンテナ起動時）に`server.pid`ファイルを削除して、
再起動した時のエラーが出ないようになっています。

```yaml
api:
    build: ./rails
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - ./rails:/myapp
    ports:
      - "50003:3000"
    depends_on:
      - db
      - db_test
```

## フロントエンド

フロンドエンドの`Vue.js`のディレクトリ構成は、
`VUE CLI`のデフォルト設定で作成して、
`yarn`で管理するプロジェクトになっています。

```:directory
vuejs
  |_ public
  |_ src
  |_ .gitignore
  |_ babel.config.js
  |_ Dockerfile
  |_ package.json
  |_ README.md
  |_ yarn.lock
```

ここの`Dockerfile`は、
`node`のバージョンを指定して、
`node_modules`をインストールしています。

```Docker:vuejs/Dockerfile
FROM node:12.7.0-alpine

WORKDIR /myapp

COPY package.json ./
COPY yarn.lock ./

RUN yarn install
```

`docker-compose.yml`の`view`サービスでは、
開発環境なので、サービスの起動コマンドを、
`yarn run serve`にして、ホットリロードができるようになっています。

ホストの`vuejs`ディレクトリをマウントする時に、
コンテナの`node_modules`をマウントで削除されないようにしています。

(サービス実行時にホスト側に空の`node_modules`ができるけど気にしないでね)

```yaml
  view:
    build: ./vuejs
    command: yarn run serve
    volumes:
      - ./vuejs:/myapp
      - /myapp/node_modules # コンテナ内のnode_nodulesがマウントで削除されないようにする
    ports:
      - "50004:8080"
```

## 終わり

読んでくれてありがとう〜