DockerをつかってVueとRailsの開発環境をつくる


# 一連の記事
1. [DockerをつかってVueとRailsの開発環境をつくる](https://qiita.com/harachan/items/4561d54948fe650cf611)この記事！！
2. [DockerをつかってVueとRailsの開発環境にユーザー認証機能を実装する](https://qiita.com/harachan/items/24f7fbda7c41a4115bf5)
3. [DockerをつかったVueとRailsの環境にAPIを実装する](https://qiita.com/harachan/items/ad9fce3f4b84f49d583a)

# 本記事の目的
- Dockerコンテナ上にVueとRailsのサービスを作って開発の環境を整える

# プロジェクトの構成

```
  /
　├ bin/
　| └ server
　├ docker-front/
　| └ Dockerfile
　├ front/
　├ server/
　| ├ Dockerfile
　| ├ entrypoint.sh
　| ├ Gemfile
　| └ Gemfile.lock
　└ docker-compose.yml
```
# 開発手順
## フォルダの作成
```bash:bash
mkdir bin
mkdir docker-front
mkdir front
mkdir server
```

## フロント（Vue）のDockerfileの準備

```Dockerfile:docker-front/Dockerfile
FROM node:8.11.3-alpine

WORKDIR /app

RUN apk update && \
    rm -rf node_modules package-lock.json && \
    npm install && \
    npm install -g npm && \
    npm install -g @vue/cli
```

## server（rails）のDockerfileの準備

```Dockerfile:server/Dockerfile
FROM ruby:2.6.5
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client
# yarnパッケージ管理ツールをインストール
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
# Node.jsをインストール
RUN curl -sL https://deb.nodesource.com/setup_7.x | bash - && \
apt-get install nodejs
RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp

# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]

```

##  entrypoint.shの準備
```sh:server/entrypoint.sh
#!/bin/bash
set -e

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

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

##  Gemfileの準備
```Gemfile:server/Gemfile
source 'https://rubygems.org'
gem 'rails', '~> 6'
```
Gemfile.lockは何も書き込まない状態でファイルだけ用意してください。

##  docker-compose.ymlの準備
```yml:docker-compose.yml
version: '3'

services:
  web:
    container_name: web-vue
    build: ./docker-front
    ports:
      - 8080:8080
    privileged: true
    volumes:
      - ./front:/app
    links:
      - rails
    tty: true
    stdin_open: true
    command:  "npm run serve"
  db:
      image: postgres
      environment:
        POSTGRES_HOST_AUTH_METHOD: 'trust'
        POSTGRES_PASSWORD: 'postgres'
      volumes:
        - ./server/tmp/db:/var/lib/postgresql/data
  rails:
    build: ./server/.
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - ./server:/myapp
    ports:
      - "3000:3000"
    links:
      - db
```
##  serveの準備
```sh:bin/serve
#!/usr/bin/bash
rm -f /app/tmp/pids/server.pid
docker-compose build
docker-compose up -d

```

# 開発環境の立ち上げ

```bash:bash
# Vueのプロジェクトを作成します
docker-compose run --rm web vue create .
# 好みの設定でプロジェクト立ち上げてください
# 終わったらRailsのプロジェクトを作成します
docker-compose run rails rails new . --force --no-deps --database=postgresql --skip-bundle
# railsにwebpackを導入します
docker-compose run rails bundle exec rails webpacker:install
# 終わったらDockerイメージをビルドします
docker-compose build
```

##RailsのDB程度接続情報の書き換え
railsのDBの接続情報を立ち上げたDBのものに変更します。

```rb:config/database.yml
default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgres
  password: postgres
  pool: 5

development:
  <<: *default
  database: myapp_development


test:
  <<: *default
  database: myapp_test

```

## コンテナの起動
```bash:bash
# DBの作成
docker-compose run rails rake db:create
# コンテナの起動
docker-compose up
```

# 動作確認
問題なく起動したら以下にアクセスしてWelcomeページが表示されるかを確認する。
[http://localhost:3000/](http://localhost:3000/)
[http://localhost:8080/](http://localhost:8080/)

# あとがき
GWの記事2投目です。
けっこうエラーに悩まされてようやくきれいにまとまったのでまとめておきます。
あ〜首が痛い

# 参考にさせていただいた記事
- [DockerでRuby on Railsの環境構築を行うためのステップ【Rails 6対応】](https://qiita.com/kodai_0122/items/795438d738386c2c1966#%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E6%89%8B%E9%A0%86)
- [VueCLI4をdocker-composeで環境構築する際のすゝめ](https://qiita.com/Hirochon/items/a52c213d4b45795e69bb)