Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

知り合いと飲んだ勢いで、簡単な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"

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

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

データベース

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

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

データベースの保存先は、ホストのプロジェクト直下にdbdb_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のバージョンの指定と、
nodejspostgresql-clientのインストール、
Gemのインストールをしています。

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.ymlapiサービスでは、
サービス実行(コンテナ起動時)にserver.pidファイルを削除して、
再起動した時のエラーが出ないようになっています。

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をインストールしています。

vuejs/Dockerfile
FROM node:12.7.0-alpine

WORKDIR /myapp

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

RUN yarn install

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

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

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

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

終わり

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

tubutubu_mustard
Dockerとか便利なものが好き
sorich
SORICHはWebシステム開発を主軸に、デザイン・Web制作・アプリ開発・IoTまで、クライアントの幅広いニーズに対応する技術者集団です。
https://www.sorich.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away