Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Docker+Rails+Vueの環境を迷わず作成するステップ

最近勉強したDockerを使って、railsとVueの環境構築をしてみました。
いろいろ検索してやってみたものの、多くのエラーと向き合う日々を迎えることに...(それでもだいぶ理解は深まった😎)

この記事では

  • とにかく開発環境だけ欲しい
  • 自分の忘備録

を主な対象として、最速でDokcer+Rails+Vueの環境を作成するステップをご紹介します🐳!
(多分エラーは出ないはず。。。)

STEP1. 4つのファイルを作成しよう

まずは作業するフォルダ(ディレクトリ)に

  • Dockerfile
  • docker-compose.yml
  • Gemfile
  • Gemfile.lock

の4つのファイルを作成します。内容はそれぞれ以下のようにします!

Dockerfile
FROM ruby:2.5.3

RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - && apt-get update && \
    apt-get install -y nodejs --no-install-recommends && rm -rf /var/lib/apt/lists/*

RUN apt-get update -qq && apt-get install -y build-essential libpq-dev

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

RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - 
RUN apt-get install -y nodejs npm && npm install n -g && n 10.17.0

RUN yarn add node-sass

RUN mkdir /app
WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
COPY . /app

docker-compose.yml
version: '3'
services:
    web:
        build: .
        command: bundle exec rails s -p 3000 -b '0.0.0.0'
        volumes:
            - .:/app
        ports:
            - 3000:3000
        depends_on:
            - db
        tty: true
        stdin_open: true
    db:
        image: mysql:5.7
        volumes:
            - db-volume:/var/lib/mysql
        environment:
            MYSQL_ROOT_PASSWORD: password
volumes:
    db-volume:

Gemfile
source 'https://rubygems.org'
gem 'rails', '5.2.3'

作業しているディレクトリで
touch Gemfile.lock
を実行すると、からのGemfile.lockが作成されます。

📣バージョンやdbのパスワードなどはよしなにご変更ください〜。

STEP2. rails newをする

今回はdockerコンテナ上でrailsアプリを作成するので、コマンドラインにそのまま
rails new
を打つのは正しくありません。
(僕のPCはローカルにrailsを入れていないため、rails newを打っても「そのコマンド知りませんけど?」って怒られます。)

dockerコンテナ上でコマンドを実行したい場合は
docker-compose run
コマンドをつかえばOKです🐳。

下記コマンドを実行します。
docker-compose run web rails new . --force --database=mysql --webpack=vue --skip-coffee

このコマンドにより、

  • dbはMySQLを明示的に指名
  • Vueを後入れしなくて済む(後入れでエラーが結構出た記憶)
  • coffee使わないので、coffee関連のファイルを作成しない

という付加価値をつけた状態で、rails new しています。

😇あと2ステップ!

STEP3. database.ymlを作成する

STEP2の読み込みが完了したら、config/database.ymlが作成されているはず。
このファイル内にある「default」の内容を少し書き換えます。

config/databese.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password   ←docker-compose.ymlで指定したdbのパスワード
  host: db         ←docker-compose.ymlのservicesで指定したdbの名前

STEP4. docker-compose up --build

ここまでできたら、
docker-compose up --build
を実行します!

少し時間がかかりますが、読み込みが終わったあとにローカルホストにアクセスしてみると、「Yay! You’re on Rails!」の画面が表示されましたか?
もしそうなら成功です!

だがしかしBut。。。💩
僕の場合は、「ERROR -- : Unknown database 'app_development' (ActiveRecord::NoDatabaseError)」が表示されました。

僕と同じという方は、
docker-compose exec web rails db:create
をしてあげればOK!

docker-compose down
をした後に、再度
docker-compose up --build
をすれば立ち上がるはずだぞ!お疲れ様でした🥳

最後に

コロナ禍でWebエンジニア転職を頑張っていますが、railsポートフォリオだけだとお祈りしかされません。
AWSの冗長構成でインフラ構築しててもお祈りです。

そこでRails+VueのRESTfulAPIを使ったアプリ(いわゆるSPA)を追加で作ったところ最終面接までは行けるようになりましたが、それでもやっぱり大変です。

もしWebエンジニア転職が大変だぁという方が読んでくれていたら、これだけは言いたいです。
諦めずに頑張ろうね!!!!

以上、お粗末様でした。

Rascal823
元SIerの教育学部卒エンジニア。 できたてホヤホヤのベンチャーで、TypeScriptやReactと格闘しています。 新卒入社で入ったSIerを1年で辞めてWeb系に転職した異端児。 好きなことにマッスグマ🐻
https://mathmate.xyz
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