LoginSignup
3
2

More than 1 year has passed since last update.

@oniki_ds(シンオク shinoku)

【Rails6】DockerでRails6の開発環境構築【ゼロからデプロイまで】

Posted at

概要

Dockerでrails６の開発環境を作成し、簡単なCRUD機能を実装してからHerokuへとデプロイするまでの手順を紹介します。

前提条件

  • Dockerの各コマンドを利用できる状態になっている。
  • Herokuのユーザー登録が完了し、ブラウザでログインすることができる。
  • HerokuCLIを利用できる状態になっている。

【１】　環境構築編

必要ファイルのセットアップ

本記事ではdocker-qiita-onikiという名前でRailsアプリケーションを設定しますが、この部分はお好きなアプリケーションの名前に書き換えてください。

まずは下記のようにアプリケーションの名前でディレクトリを用意し、各種ファイルを作成します。

$ mkdir docker-qiita-oniki
$ cd docker-qiita-oniki
$ touch Dockerfile Gemfile Gemfile.lock docker-compose.yml entrypoint.sh

各種ファイルをテキストエディタで開いて下記のように記載してください。

※ docker-qiita-onikiはお好きなアプリケーション名に書き換えです！

1. Dockerfile

Dockerfile
FROM ruby:2.7.3

ENV LANG C.UTF-8
ENV DEBCONF_NOWARNINGS yes
ENV APT_KEY_DONT_WARN_ON_DANGEROUS_USAGE yes

EXPOSE 3000

RUN apt-get update -qq && apt-get install -y build-essential postgresql-client 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 mkdir /docker-qiita-oniki
WORKDIR /docker-qiita-oniki
COPY Gemfile /docker-qiita-oniki/Gemfile
COPY Gemfile.lock /docker-qiita-oniki/Gemfile.lock
RUN bundle install
COPY . /docker-qiita-oniki

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]

2. docker-compose.yml

docker-compose.yml
version: '3'
services:
  db:
    image: postgres
    volumes:
      - ./tmp/db:/var/lib/postgresql/data
    environment:
      POSTGRES_HOST_AUTH_METHOD: 'trust'

  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/docker-qiita-oniki
    ports:
      - "3000:3000"
    depends_on:
      - db

3. entrypoint.sh

entrypoint.sh
#!/bin/bash
set -e

rm -f /docker-qiita-oniki/tmp/pids/server.pid

exec "$@"

4. Gemfile

Gemfile
source "https://rubygems.org"
gem "rails", "~>6.1.3"

※ Gemfile.lockは記載の必要なし（空のまま）

5. 確認

これでDockerにRails環境を構築するために必要な設定は揃いました。下記のようなディレクトリ構成になったことを確認してください。

docker-qiita-oniki
├── Dockerfile
├── docker-compose.yml
├── entrypoint.sh
├── Gemfile
└── Gemfile.lock

コンテナのビルド

必要ファイルを用意したディレクトリでコンテナの起動準備に必要なコマンドを実行していきます。

まずはRailsの新規作成をします。

$ docker-compose run web rails new . --force --no-deps --database=postgresql --skip-bundle

お馴染みのRailsファイル達が作成されたことを確認してください。

docker-qiita-oniki
├── app
├── bin
├── config
├── db
├── lib
├── log
├── public
├── storage
├── test
├── tmp
├── vendor
├── .gitattributes
├── .gitignore
├── .ruby-version
├── config.ru
├── docker-compose.yml
├── Dockerfile
├── entrypoint.sh
├── Gemfile
├── Gemfile.lock
├── package.json
├── Rakefile
└── README.md

必要なファイルが揃ったことを確認したらビルドします。（時間がかかります）

$ docker-compose build

DBの作成

config/database.ymlにPostgreSQLに接続するための設定を追記します。

config/database.yml
~
~
default: &default
  adapter: postgresql
  encoding: unicode
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

  ### 下記を追記
  host: db
  username: postgres
  passowrd:
  ### 上記を追記

development:
  <<: *default
  database: docker_qiita_oniki_development
~
~

以下のコマンドでDBを作成します。

$ docker-compose run web rake db:create

Webpackerインストール

Rails６から標準装備となったWebpackerを下記のコマンドによりインストールします(時間がかかります)。

$ docker-compose run web rails webpacker:install

コンテナの起動

必要な準備が揃ったので　いよいよコンテナを起動してRailsのスタートページを表示していきましょう。

docker-compose up

ブラウザからhttp://localhost:3000/にアクセスしてみましょう、無事にRailsのスタートページ「Yay! You’re on Rails!」が表示されましたでしょうか？確認後、起動したコンテナを停止するときは[Ctrl] + [C]を押してください。

ここまでで【１】環境構築編は終了です。お疲れ様でした。

【2】　CRUDアプリケーション作成編

せっかくRailsの環境構築をしたので簡単なCRUDアプリケーションを作成しましょう。
と言っても、本記事はあくまでDockerの環境構築とHeorkuへのデプロイがメインなのでここはRailsの便利機能scaffoldを使ってサクッと進めてしまいます。

停止している場合は、再度コンテナを起動します。

docker-compose up

Rails開発を進めるためにDocker環境でRailsコマンドを入力する方法はいくつかあるのですが、今回はDocker起動用のターミナル１つ残しておき、もう一つターミナルを立ち上げるスタイルで進めたいと思います。

ターミナル上で[command] + [T]を押して２つ目のターミナルを開いてください。

スクリーンショット 2021-06-06 16.10.28.png

この状態で、コマンド入力可能な方のターミナルで下記の２つのコマンドを入力すると、タイトル(titile)と本文(body)の要素を持つタスク(Task)を投稿できるRailsアプリケーションが出来上がります。

$ docker-compose exec web rails g scaffold Task title:string body:text
$ docker-compose exec web rails db:migrate

DBのマイグレーションを行なったため、一度コンテナを再起動したいと思います。

Docker起動用のターミナルの方で[Command]+[C]で停止、docker-compose upで起動、という手順で再起動をかけたあと、http://localhost:3000/tasksにアクセスしましょう。Taskを作成/編集/削除/閲覧できる機能が実装されていることが確認できるはずです。

スクリーンショット 2021-06-06 16.19.07.png

ただし、このままだとRailsのroot(http://localhost:3000で表示されるページ)が「Yay! You’re on Rails!」のままですので、これもタスクの一覧ページにしてしましょう。

config/routes.rbを開くとscaffoldによりresources :tasksの記載があるはずなので、その上にroot 'tasks#index'を追加してください。

config/routes.rb
Rails.application.routes.draw do
  root 'tasks#index'
  resources :tasks
end

これにより、http://localhost:3000にアクセスしてもタスク一覧のページが表示されるようになります。

ここまでで【2】CRUDアプリケーション作成編は終了です。次はいよいよHerokuへのデプロイを行っていきます。ここから先の内容に入る前にコンテナを起動している方は停止を忘れずにお願いします。

【3】　Herokuデプロイ編

それではいよいよここまで作成してきたRailsアプリケーションをHerokuへデプロイしていきます。本記事での内容は全て無料枠でできることになりますので、課金はされることはありません。

1. HerokuコンソールでCreate new app

https://jp.heroku.com/にアクセスし、ご自身のHerokuコンソールへとログインしてください。画面右上の[New]というタブで[Create new app]を選択します。

スクリーンショット 2021-06-05 14.46.30.png

お好きな名前（https://XXXXXXXXXX.herokuapp.com/←XXXXXXXXXXの部分に反映されます！）を入力し、RegionはUnited Statesを選択したまま[Create App]ボタンをクリックしてください。これでアプリケーションのデプロイ先が作成されました。
スクリーンショット 2021-06-05 14.47.01.png

2. Postgreコンテナのアドオンを追加

作成したアプリのページでConfigure Add-onsをクリックします

スクリーンショット 2021-06-05 14.47.56.png

heroku postgresで検索し、
スクリーンショット 2021-06-06 16.59.04.png

無料オプション(Hobby Dev - Free)でPostgreコンテナを作成します。[Submit Order Form]をクリックすると即時に作成されます。

スクリーンショット 2021-06-05 14.55.25.png

アプリケーションのページに戻るとpostgresql-abcdef-12345(postgresql-#{数文字のアルファベット}-#{数文字の数字}の組み合わせ)というようなPostgreコンテナの識別番号が付与されているはずです。以降の作業でコマンドで使用するタイミングがありますのでどこかにメモをしておいてください。

3. HerokuにデプロイできるようにRailsの設定を編集

Heroku上でRailsが作動するようにconfig/environments/development.rbにconfig.hosts << "[Herokuに作成したAppName].herokuapp.com"という一行を加えます。

※ hogeはご自身が作成したHerokuの名称に書き換えてください

config/environments/development.rb
require "active_support/core_ext/integer/time"

Rails.application.configure do
  # Settings specified here will take precedence over those in config/application.rb.
  ~
  ~
  ~
  ### 下記の一文を追加
  config.hosts << "hoge.herokuapp.com"
end

4. ターミナルからHerokuログイン

ターミナル経由でHeroku環境に操作をできるように下記のコマンドを入力します。

$ heroku login
$ heroku container:login

5. Heroku上にコンテナをPUSHする

$ heroku container:push web -a hoge[※ご自身の設定したHerokuアプリ名]
$ heroku container:release web -a hoge[※ご自身の設定したHerokuアプリ名]

6. Heroku上のDBを設定しマイグレーションを実行

$ heroku addons:attach postgresql-abcdef-12345 -a hoge[※Herokuアプリ名]
$ heroku run rake db:migrate -a hoge[※Herokuアプリ名]

※ postgresql-abcdef-12345には「2. Postgreコンテナのアドオンを追加」でメモしたPostgreコンテナの識別番号を入れてください

7. ブラウザでデプロイしたHerokuアプリケーションを開く

heroku open -a hoge[※Herokuアプリ名]

ここまで問題なく作業ができていれば、開発環境と同様にタスクの閲覧・追加ができるアプリケーションがHeroku上にデプロイされているはずです、お疲れ様でした！

注意事項

無事にDockerでの開発環境作成からHerokuへのデプロイまで一気に駆け抜けることはできたでしょうか？２点だけ注意事項を書かせてください。

  • 今回のデプロイでは、一応Herokuの無料枠に収まる設定しかしていないはずですが不安な方はデプロイの確認後、削除をお願いします。
  • 今回のデプロイに関してはセキュリティ的な観点での考慮は一切行えておりません。実サービスとして運用される場合はよりセキュアな構成となるように設定面での見直しが必要になると思いますので、ご認識よろしくお願い致します。

最後に

いかがでしたでしょうか？私自身、Webエンジニア歴が１年に満たない新参者なので技術的に至らぬ点もあるかもしれません。気になった点・ご指摘事項・ご質問など、お気軽にコメントしていただければ幸いです！

参考記事一覧

https://qiita.com/NA_simple/items/57ad10717568fea2160b

https://qiita.com/kodai_0122/items/67c6d390f18698950440

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
2