Edited at

すぐに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"

サービスは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"


終わり

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