v-crn Code Log

主に備忘録

トップ > Ruby on Rails > Railsプロジェクトの新規作成手順

Railsプロジェクトの新規作成手順

Ruby on Rails

f:id:v-crn:20190703041140p:plain

自分用の備忘録としてRailsプロジェクトの作成手順をここにまとめます。

前提

  • Mac環境
  • bundlerインストール済み
  • ruby 2.5.3 / Rails 6.0.0

本記事はRails 5.2.3の設定を基にして書かれているため新しいバージョンに対応しきれていない事項があるかもしれません。

1. bundle init

まずプロジェクトのルートになるファイルを用意し、bundle initコマンドでGemfileを生成します。

$ mkdir new-rails-app
$ cd new-rails-app
$ bundle initÎ

生成されたGemfileにおいて# gem "rails"のコメントアウトを外し、必要であればバージョンを指定します。

# frozen_string_literal: true
source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "rails"

2. bundle install --without production

グローバルインストール（デフォルト）

bundlerでsystem(global)にGemをインストールします。

$ bundle install --without production

rbenvでRubyのバージョンが管理されているローカルの開発環境では、Gemはsystemのrubyのインストール先に保存されます。

例：/Users/username/.rbenv/versions/2.5.3/lib/ruby/gems/2.5.0/gems

ちなみにどのバージョンのrubyがsystemのglobalに設定されているかはrbenv versionsで確認できます。

$ rbenv versions
  system
* 2.5.3 (set by /Users/username/Documents/WebDevelopment/workspace/new-rails-app/.ruby-version)
  2.6.0

Gemの保存先をプロジェクト内のvendor/bundleに指定したい場合

--path vendor/bundleを付けます。

$ bundle install --path vendor/bundle

プロジェクト毎にGemを管理するためvendor/bundleにインストールするか、あるいはデフォルトのままsystem(global)にインストールするかについては種々の意見があります。個人的にはデフォルトのまま使用しています。

3. bundle exec rails new . -B

Gemfile.lockに記載されたバージョンのrailsを使用してRailsプロジェクトを生成します。

$ bundle exec rails new . -B
  • 上記コマンド実行時、Gemfileの上書きをして良いか尋ねられたら、Y（yesの意）を入力して続行します。
  • newの後ろに.（ドット）を置いてrails newコマンドを実行すると、現在のディレクトリにプロジェクトファイルを作成できます。
  • アプリをHerokuにデプロイする場合、本番環境のDBをPostgresqlに設定する必要があります。上記コマンドに-d postgresqlを付けて実行すると諸々設定してくれます。

主に使用するオプション

オプション 説明
-B, --skip-bundle bundle installを行わない
-d, --database=DATABASE データベースの指定（デフォルトはsqlite3）
--skip-turbolinks turbolinksの無効化
-T, --skip-test デフォルトのminitestを使わない

その他のオプションについては$ rails new -hで確認できます。

4. gitリポジトリの管理

4-1. .gitignoreの編集

gitの管理から外すべきファイルを.gitignoreに記述します。

ここで、さまざまな環境に合わせて.gitignoreのコードを作成してくれるWebサービスgitignore.ioを利用すると簡単にこの作業が終わります。

www.gitignore.io

私の場合、Ruby, Rails, VisualStudioCodeをキーワードにコードを生成し、少し変更を加えた上で使っています。実際のコードを下記のリンクに置いておきます。

github.com

gitignore.ioで生成したコードからの変更点

  • 環境変数設定ファイル.envについての記述が重複していたので２番目を削除
  • .envを.env*に変更：ファイル名が「.env」で始まるファイルを無視（.env.developmentといったファイルもgitの管理対象から除外するため）
  • # config/secrets.ymlのコメントアウトを外した
  • config/credentials.yml.encの追加
  • config/database.ymlの追加
  • 不要なコメント# Ignore Byebug command history file.を削除
  • /spring/*.pidの追加
  • /public/uploadsの追加

4-2. ローカルリポジトリでコミット

$ git init
$ git add .gitignore
$ git commit -m "first commit"

4-3. リモートリポジトリへプッシュ

プッシュする前に、任意のGitホスティングサービスで新規リポジトリを作成します。

The world’s leading software development platform · GitHub

Bitbucket | The Git solution for professional teams

リポジトリ作成直後に表示されるリポジトリパスをコピーしておきます。 プロトコルとしてはHTTPSよりSSHの方が無難です。*1

SSH keyの形式

サービス名 SSH key
GitHub git@github.com:GitHub-ID/リポジトリ名.git
Bitbucket git@bitbucket.org:Bitbucket-ID/リポジトリ名.git

あとはコンソール上でコピーしたリポジトリパスを登録してプッシュするだけです。

$ git remote add origin リポジトリURL
$ git push -u origin master

-u, --set-upstreamオプションを付けてプッシュすると、プッシュ成功時にプッシュ先のリモートブランチを上流ブランチとして設定します。上流ブランチ*2を設定しておくと、git pushやgit pullなどのコマンドを実行するときに引数を省略でき、便利です。

5. Gemのインストール

最初にGemfileの完成形を示し、それから導入したGemについて説明します。

Gemfile

# frozen_string_literal: true

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "2.5.3"

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem "rails", "~> 6.0.0"
# Use Puma as the app server
gem "puma", "~> 3.11"
# Use SCSS for stylesheets
gem "sass-rails", "~> 5"
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem "webpacker", "~> 4.0"
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem "turbolinks", "~> 5"
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem "jbuilder", "~> 2.7"
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", ">= 1.4.2", require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem "byebug", platforms: [:mri, :mingw, :x64_mingw]
  gem "dotenv-rails"
  # Use sqlite3 as the database for Active Record
  gem "sqlite3", "~> 1.4"
end

group :development do
  gem "better_errors"
  gem "binding_of_caller"
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem "web-console", ">= 3.3.0"
  gem "listen", ">= 3.0.5", "< 3.2"
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem "spring"
  gem "spring-watcher-listen", "~> 2.0.0"
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem "capybara", ">= 2.15"
  gem "guard"
  gem "guard-minitest"
  gem "minitest-reporters"
  gem "rails-controller-testing"
  gem "selenium-webdriver"
  # Easy installation and use of web drivers to run system tests with browsers
  gem "webdrivers"
end

group :production do
  gem "pg"
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]

# Appearance
gem "jquery-rails"
gem "bootstrap", "~> 4.3.1"

webpacker

Rails6からお世話になるwebpacker。デフォルトでGemfileにその名が刻まれていますが、次のコマンドでインストール必要があります。

$ bundle exec rails webpacker:install

インストール完了後、rails sでサーバー起動に成功すればOKです。 後述するBootstrapの導入において使用するconfig/webpack/environment.jsはこのインストールのときに作成されます。

Rubocop

rubyコードがコーディング規約通りに記述されているかチェックする静的コード解析ツールです。

gemインストール

$ gem install rubocopでインストールします。

rubocopコマンド

コードチェック

$ rubocop

自動修正

$ rubocop -a

rubocopの設定ファイル

設定ファイルの作成

拡張子.ymlのファイルをrubocopの設定ファイルとして用意します。

例：.rubocop.yml

内容は以下のリンクを参考に編集しました。 - rails/.rubocop.yml - .rubocop.yml設定例

プロジェクト専用の設定ファイル

rubocop --auto-gen-configコマンドでそのプロジェクト専用の設定ファイルを作成することもできます。これを実行すると生成されるファイルが2つあります。 - .rubocop.yml：コーディング規約の設定ファイル - .rubocop_todo.yml：rubocop --auto-gen-config実行時点で違反している規約を無効にする設定ファイル

.rubocop_todo.ymlの内容は空っぽの状態が望ましいですが、どうしても対応することが難しい規約は.rubocop.ymlに移動しましょう。

VS Codeの拡張機能ruby-rubocop

インストール後、以下のVS Codeの設定で以下の項目を指定する必要があります。

Ruby › Rubocop: Config File Path

rubocopの設定ファイルのパスです。
例：/Users/Username/***/Ruby/Rails/workspace/.rubocop.yml

Ruby › Rubocop: Execute Path

rubocop実行ファイルのディレクトリまでのパスです。
例：/Users/Username/.rbenv/shims/rubocop/

Solargraph

コード補完機能を提供するgemです。
gem install solargraphでインストールできます。

better_errors / binding_of_caller

errorを見やすく表示してくれるgemです。

Gemfile

group :development do
  ......
  gem 'better_errors'
  gem 'binding_of_caller'
end

詳しくは以下の記事が参考になります。

【Rails】better_errorsとbinding_of_callerで自分でエラーを解決できるようになろう【初心者向け】 - Qiita

minitest-reporters / rails-controller-testing

minitest-reportersはRailsのデフォルトのテストmitetestにおいて合格／不合格を色分けして表示してくれます。
rails-controller-testingを入れるとtestでassigns、assert_templateを使うことができるようになります。

$ gem 'minitest-reporters'
$ gem 'rails-controller-testing'

test/test_helper.rbに以下の内容を追記しましょう。

require "minitest/reporters"
Minitest::Reporters.use!

Guard

Guardは、ファイルシステムの変更を検知すると自動的にテストを実行してくれるツールです。

Gemfile

group :test do
  ......
  gem 'guard'
  gem 'guard-minitest'
end

Rspecの場合

group :test do
  ......
  gem 'guard'
  gem 'guard-rspec', require: false
end

初期化

$ bundle exec guard init

Rspecの場合

$ bundle exec guard init rspec

初期化コマンドで生成されるGuardfileをRails Tutorialのリスト3.45と同様に編集します。

Guard使用時のSpringとGitの競合を防ぐために.gitignoreファイルにspring/ディレクトリを追加する必要があります（上述の.gitignoreには反映済み）。

dotenv

.envという名前の隠しファイルを作成し、そこにENV[変数名]=値の形式で変数を保存すると、それを環境変数として利用できるようにしてくれます。

gem 'dotenv-rails', groups: [:development, :test]

Bootstrap

CSSやSCSSでViewを装飾するのに役立つパッケージです。

Bootstrapで利用できる変数

次のリンクから確認できます。 bootstrap-rubygem/assets/stylesheets/bootstrap/_variables.scss

導入手順（Rails 6の場合）

1. Bootstrap4、jQuery、Popper.jsの導入

JS/CSSのパッケージ管理ツール「yarn」を通じてRailsアプリにBootstrap、jQuery、Popper.jsを導入します。

$ yarn add bootstrap@4.3.1 jquery popper.js

2. environment.jsの作成

続いてwebpackerインストール時に生成されたconfig/webpack/environment.jsに設定を追加します。

config/webpack/environment.js 変更前

const { environment } = require('@rails/webpacker')

module.exports = environment

変更後

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

module.exports = environment

3. application.jsの編集

app/javascript/packs/application.jsに以下を追記し、bootstrapをインポートします。

import 'bootstrap'
import './src/application.scss'

4. application.scssの作成

app/javascript/packs/src/application.scssを作成し、中に@import '~bootstrap/scss/bootstrap';を記述します。

$ mkdir app/javascript/packs/src
$ echo "@import '~bootstrap/scss/bootstrap';" > app/javascript/packs/src/application.scss

@import '~bootstrap/scss/bootstrap';と書くのは、webpackerがビルド時にapp/javascript/packs以下を参照するのでapplication.scssがビルドに含まれるように指定するためです。

5. application.html.erbの編集

stylesheet_link_tagをstylesheet_pack_tagに変更します。

app/views/layouts/application.html.erb

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

参考

Install Bootstrap with Webpack with Rails 6 Beta

Rails6 Bootstrap4 を使って Heroku で Deploy

導入手順（Rails 6未満の場合）

Gemfileにjquery-railsとbootstrapを追加します。

# Appearance
gem 'jquery-rails'
gem "bootstrap", "~> 4.3.1"

bootstrap導入の前提として以下のgemが要求されることに注意です。 - jquery-rails - sprockets-rails 2.3.2.以上

1. application.cssの編集

app/assets/stylesheets/application.cssの拡張子をscssに変更します。 - application.css -> application.scss

続いて末尾に

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";

を追記しましょう。

2. application.jsに依存関係を記述する

Bootstrapの依存関係をapplication.jsに追記します。

app/assets/javascripts/application.js

//= require jquery3
//= require popper
//= require bootstrap-sprockets

これでBootstrapとjQueryが利用できるようになりました。

pg（HerokuでpostgresqlをDBとして利用する場合）

デフォルトのsqlite3はdevelpmentとtest環境で、本番環境ではpgを使用するようにします。

Gemfile

group :development, :test do
  ......
  # Use sqlite3 as the database for Active Record
  gem 'sqlite3', '~> 1.4'
end

group :production do
  gem 'pg'
end

6. 本番環境の設定（production.rb）

SSL/HTPPS

セキュリティ強化のためにSSLを導入するにはproduction.rbに次の項目を追記するだけでOKです。

# Force all access to the app over SSL, use Strict-Transport-Security,
# and use secure cookies.
config.force_ssl = true

一般に本番用のWebサイトでSSLを使えるようにするためには、ドメイン毎にSSL証明書を購入し、セットアップする必要があります。が、Herokuのサブドメインを利用する場合、HerokuのSSL証明書に便乗することでその作業をしなくても済みます。

config.assets.compile = true

config.assets.compile = falseをtrueに変更します。

config.assets.compile = true

Herokuにデプロイしたアプリでロゴや背景画像などが表示されない場合はこの項目がデフォルトのfalseになっていることが多いです。

config.require_master_key = true

本番環境でのmaster key未設定を防ぐためにconfig.require_master_key = trueを有効化します。これによりmaster keyが指定されていない状態でサーバを起動しようとしてもエラーが発生するようになります。

続いてHerokuにmaster keyを環境変数として設定しておきましょう。 以下のコマンドでconfig/master.keyの値をRAILS_MASTER_KEYという名前の環境変数にセットします。

$ heroku config:set RAILS_MASTER_KEY=マスターキーの値

7. 本番環境用のWebサーバー

HerokuのデフォルトではWEBrickというWebサーバを使っています。WEBrickは簡単に導入できることが特長ですが、大きなトラフィックを扱うことには適していません。多数のリクエストを捌くことに適したWebサーバの１つとしてPumaがあります。

WEBrickからPumaにWebサーバを置き換えるためにHerokuのPumaドキュメントに沿ってセットアップします。

config/puma.rbを以下の内容に書き換えます。

# frozen_string_literal: true

workers Integer(ENV["WEB_CONCURRENCY"] || 2)
threads_count = Integer(ENV["RAILS_MAX_THREADS"] || 5)
threads threads_count, threads_count

preload_app!

rackup      DefaultRackup
port        ENV["PORT"]     || 3000
environment ENV["RACK_ENV"] || "development"

on_worker_boot do
  # Worker specific setup for Rails 4.1+
  # See: https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#on-worker-boot
  ActiveRecord::Base.establish_connection
end

次にHeroku上でPumaのプロセスを実行するための設定ファイル「Procfile」をルートディレクトリに作成します。

$ touch Procfile

作成したProcfileに以下の内容を記述します。

 web: bundle exec puma -C config/puma.rb

rails sでサーバ起動を確認できたらpumaの導入は完了です。

Herokuデプロイ

Herokuの準備

$ heroku create アプリ名（任意）
$ heroku addons:create heroku-postgresql
$ heroku config:add SECRET_KEY_BASE="$(bundle exec rails secret)"

初回のgit push heroku master

$ git push heroku master

bundler 2を使用しているためにHerokuへの初回pushでActivating bundler (2.0.1) failed:などのエラーで失敗する場合は次のコマンドでパッチをあててください。

$ heroku buildpacks:set https://github.com/bundler/heroku-buildpack-bundler2

更新の際よく使うコマンド

git push heroku

初回のpushで付けていた「master」は省略可です。

$ git push heroku

DBリセット

$ heroku pg:reset DATABASE
$ heroku run rails db:migrate RAILS_ENV=production

Web URL確認

$ heroku info
=== new-rails-app-rails6
Addons:         heroku-postgresql:hobby-dev
Auto Cert Mgmt: false
Dynos:          web: 1
Git URL:        https://git.heroku.com/new-rails-app-rails6.git
Owner:          example@example.com
Region:         us
Repo Size:      177 KB
Slug Size:      54 MB
Stack:          heroku-18
Web URL:        https://new-rails-app-rails6.herokuapp.com/

環境変数確認

$ heroku config
=== new-rails-app-rails6 Config Vars
DATABASE_URL:     postgres://**********************
LANG:             en_US.UTF-8
RACK_ENV:         production
RAILS_MASTER_KEY: **********************
SECRET_KEY_BASE:  **********************

参考

RailsアプリをHerokuにデプロイする

おわり

以上でRailsプロジェクトの最初のステップが完了しました！　ここからガンガン開発を進めていきましょう！

*1:参考：GitHubのremote URLにはどのプロトコルを使えばよいのか？ - Qiita

*2:上流ブランチ(upstream branch)：あるローカルブランチが、履歴を追跡するように設定したリモートブランチのこと。