一連の記事
- DockerをつかってVueとRailsの開発環境をつくるこの記事！！
- DockerをつかってVueとRailsの開発環境にユーザー認証機能を実装する
- DockerをつかったVueとRailsの環境にAPIを実装する
本記事の目的
- Dockerコンテナ上にVueとRailsのサービスを作って開発の環境を整える
プロジェクトの構成
/
├ bin/
| └ server
├ docker-front/
| └ Dockerfile
├ front/
├ server/
| ├ Dockerfile
| ├ entrypoint.sh
| ├ Gemfile
| └ Gemfile.lock
└ docker-compose.yml
開発手順
フォルダの作成
bash
mkdir bin
mkdir docker-front
mkdir front
mkdir server
フロント（Vue）の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の準備
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の準備
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の準備
server/Gemfile
source 'https://rubygems.org'
gem 'rails', '~> 6'
Gemfile.lockは何も書き込まない状態でファイルだけ用意してください。
docker-compose.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の準備
bin/serve
# !/usr/bin/bash
rm -f /app/tmp/pids/server.pid
docker-compose build
docker-compose up -d
開発環境の立ち上げ
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のものに変更します。
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
# DBの作成
docker-compose run rails rake db:create
# コンテナの起動
docker-compose up
動作確認
問題なく起動したら以下にアクセスしてWelcomeページが表示されるかを確認する。
http://localhost:3000/
http://localhost:8080/
あとがき
GWの記事2投目です。
けっこうエラーに悩まされてようやくきれいにまとまったのでまとめておきます。
あ〜首が痛い