【Ruby on Rails】環境構築からHello Worldまでやってみよう

こんにちは！あっきー (IwswAkht) です！

現在業務で Ruby on Rails を使っているため、基本的な流れを忘備録として記録します。

環境構築(AWS)→ Hello World! の出力→ Git での管理 → デプロイ(Heroku)

以上の開発においての基本となる業務の流れになります。

さいしょに
【Gem】と【Bundle】
Rails のインストール
Bundle実行で gem をインストール
Rails初期画面を表示
Hello World! を出力してみる
Gitリポジトリにプッシュ
Heroku へデプロイ
初回以降のコマンド
さいごに

さいしょに

この記事は以下のサイトを参考にしています。
エラーになった個所や調べたことの補足などしてまとめた形になります。

第1章ゼロからデプロイまで - Railsチュートリアル

SNS開発やWebサイト制作が学べる大型チュートリアル。作りながら学ぶのが特徴で、電子書籍や解説動画、質問対応、社員研修、教材利用にも対応しています。

まずは開発環境として AWS でのプロジェクト作成を行ってください。

参考をみていただけましたら大丈夫かと思います。

【Gem】と【Bundle】

環境構築をすると「gem」や「bundle」といったコマンドが頻出してきます。なんじゃこりゃ、とならないように最初に簡単に概念だけ捉えておきましょう。

まず、Gem についてです。ひと言で言ってしまえば、

Gem はライブラリ、RubyGems は Ruby言語用のパッケージ管理システムです。

なので Gem は Ruby にインストールすることによって使用します。こちらに公開されています。

RubyGems.org | your community gem host

Bundle についてもひと言で言ってしまえば、

「gemfile」と「gemfile.lock」に従って、Gemを管理をするライブラリです。

このあと実際に Rails をインストールしますが、その時に「gemfile」と「gemfile.lock」といったファイルがデフォルトでインストールされます。

ここにいろいろと設定をごにょごにょ書いて bundle install で設定を反映させるみたいな感じになります。

Node.js における npm、package.json を編集してからの npm install 的なのに近しいものを感じますね。

Rails のインストール

やってみて思ったのですが、Rails で環境構築をするだけなら驚くほどに簡単でした。

gem のように独特なコマンドを使うのに慣れる必要がありますが、基本的には以下の3つのコマンドを実行すれば環境構築ができるようですね。

・インストール時に Rubyドキュメントをインストールしない

ターミナル

$ printf "install: --no-document \nupdate:  --no-document\n" >> ~/.gemrc

1	$ printf "install: --no-document \nupdate: --no-document\n" >> ~/.gemrc

・バージョンを指定して Rails をインストール

ターミナル

$ gem install rails -v 5.1.6

1	$ gem install rails -v 5.1.6

・Railsプロジェクトを作成する

ターミナル

$ rails _5.1.6_ new ProjectName

1	$ rails _5.1.6_ new ProjectName

これで Cloud9 で作成した開発環境の配下に指定したプロジェクト名で大量のフォルダやファイルが生成されます。

Rails はバージョンに縛りがあるためちょっと違うだけでも不具合を頻繁に起こす可能性があるみたいですのでオプションで -v をつかって明示的にどのバージョンを使用するかを指定した方がのちの開発が楽になるようです。

きつね先生

ちなみに現在の最新バージョンは【6.0.0】です。

Bundle実行で gem をインストール

作成した Railsプロジェクトのの中に「Gemfile」というファイルが存在しますのでひらいてください。

ここに必要な Gem(ライブラリ群)を指定して、Bundleでインストール(管理)します。

デフォルトで書いてあるファイルを以下のように編集します。

~/Gemfile

source 'https://rubygems.org'
 
gem 'rails',        '5.1.6'
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.6.4'
group :development, :test do
  gem 'sqlite3',      '1.3.13'
  gem 'byebug', '9.0.6', platform: :mri
end
group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end
# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

source 'https://rubygems.org'

gem 'rails', '5.1.6'

gem 'puma', '3.9.1'

gem 'sass-rails', '5.0.6'

gem 'uglifier', '3.2.0'

gem 'coffee-rails', '4.2.2'

gem 'jquery-rails', '4.3.1'

gem 'turbolinks', '5.0.1'

gem 'jbuilder', '2.6.4'

group :development, :test do

gem 'sqlite3', '1.3.13'

gem 'byebug', '9.0.6', platform: :mri

end

group :development do

gem 'web-console', '3.5.1'

gem 'listen', '3.1.5'

gem 'spring', '2.0.2'

gem 'spring-watcher-listen', '2.0.1'

end

# Windows環境ではtzinfo-dataというgemを含める必要があります

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

保存しましたら以下のコマンドを実行してください。

・プロジェクトフォルダに移動

ターミナル

$ cd hello_app

1	$ cd hello_app

・gem のインストール

ターミナル

$ bundle install

1	$ bundle install

以下のようなエラーがでる場合があります。

The bundle currently has spring locked at 2.1.0.
Try running bundle update springIf you are updating multiple gems in your Gemfile at once,
try passing them all to bundle update

その時は以下のコマンドを実行してアップデートしてから再度インストールしてください。

・Bundle のアップデート

ターミナル

$ bundle update

1	$ bundle update

Rails初期画面を表示

以下のコマンドを実行後にアプリケーションで開きます。

・サーバー起動

ターミナル

$ rails server

1	$ rails server

たぬきち仙人

rails s での省略も可能じゃ。

ブラウザで確認しましたら初期画面が表示されます。

Hello World! を出力してみる

Rails は MVCアーキテクチャのもと構築されています。Laravel の記事などで同じようなことは書いているかと思いますので簡単に説明すると、

・M (Model == データベース系)
・V (View == ブラウザ表示)
・C (Controller == プログラミング)

という各々を役割を持ちます。

なので、「Hello World!」を出力する場合は、View に直接書くか、Controller に書いてルーティングすれば大丈夫そうですね。

ここでは Controller の方でやっていきます。

以下のファイルの編集を行ってください。

app/controllers/application_controller.rb

class ApplicationController &lt; ActionController::Base
  protect_from_forgery with: :exception
  def hello
    render html: "Hello world!"
  end
end

class ApplicationController < ActionController::Base

protect_from_forgery with: :exception

def hello

render html: "Hello world!"

end

config/routes.rb

Rails.application.routes.draw do
  root 'application#hello'
end

Rails.application.routes.draw do

root 'application#hello'

end

・def で hello というアクション名を定義し、中にプログラミングの記述
・root ‘コントローラー名#アクション先’ でルーティング

これで再度ブラウザにアクセスすると「Hello World!」が出力されます。

Gitリポジトリにプッシュ

やらなくてもいいところではあるのですが、このあと本番環境として Heroku にデプロイする際にリポジトリをプッシュするのでそのために必要です。なので、せっかくなのでリモートにもプッシュさせましょう。

今回は公開させる目的はないので Bitbucket を使います。
以下の URL よりアカウントの作成してください。
※アカウント作成時に設定するアドレスとユーザーIDはのちの Gitコマンドでも使用しますので覚えておいてください。

Try our products in the Cloud, free for 7 days

また、Gitコマンドについて以下の記事でまとめていますので併せて確認しブランチの作成やマージなどもやってみてください。

【Git】Visual Studio Code × GitHub の連携

gitの基本操作を解説。VSCodeとGitHubの連携。リポジトリ作成、コミット、ブランチ、マージ、プル、フェッチ、プッシュ、クローンなどの操作をGUIとCLI両方の方法を解説しています。

簡単に手順を書いていきます。

Coud9 のターミナルで ssh鍵の作成をするのですがまずは以下のコマンドで既に作成されていないか確認してください。

・.ssh フォルダに移動

ターミナル

$ cd ~/.ssh

1	$ cd ~/.ssh

・フォルダ内の参照

ターミナル

$ ls

$ ls

【id_rsa id_rsa.pub】 のようなファイル名が存在しなかった場合以下のコマンドで作成します。

・ssh鍵の作成

ターミナル

$ ssh-keygen

1	$ ssh-keygen

作成した ssh鍵を Bitbucket に追加します。

以下のコマンドで出力された公開鍵の値をコピーします。

・公開鍵の出力

ターミナル

$ cat ~/.ssh/id_rsa.pub

1	$ cat ~/.ssh/id_rsa.pub

コピーしましたら Bitbucket のアイコンをクリック→設定→SSH 鍵 の順番で遷移し公開鍵を追加してください。

続いて Bitbucket にプッシュしましょう。

以下のコマンドを順番に実行してください

ターミナル

#Git ユーザーID設定
$ git config --global user.name "Your Name"
#Git アドレスの設定
$ git config --global user.email “your.email@example.com”
#リポジトリの作成
$ git init
#リポジトリに Railsプロジェクトの追加
$ git add -A
#コミット
$ git commit -m "free comment"
#リモートリポジトリの追加
$ git remote add origin git@bitbucket.org:ユーザー名/hello_app.git
#リモートリポジトリへプッシュ
$ git push -u origin --all

#Git ユーザーID設定

$ git config --global user.name "Your Name"

#Git アドレスの設定

$ git config --global user.email “your.email@example.com”

#リポジトリの作成

$ git init

#リポジトリに Railsプロジェクトの追加

$ git add -A

#コミット

$ git commit -m "free comment"

#リモートリポジトリの追加

$ git remote add origin git@bitbucket.org:ユーザー名/hello_app.git

#リモートリポジトリへプッシュ

$ git push -u origin --all

ユーザー名などは ssh鍵追加時に Bitbucket側で勝手に生成してくれるかと思います。

Heroku へデプロイ

最後にデプロイしてみます。

まずは以下の URL より Heroku のユーザー登録を行ってください。

新規登録 | Heroku

Heroku の開発者アカウントを登録して Heroku でアプリの構築を始めましょう。

会員登録が完了しましたらサインアウトしておいてください。

このあと、Cloud9 のターミナルでログインするのですがログインしたままでやったらエラーがでて、ログアウトしたらイケたのでそのためです。

ここまでできましたらまずは「Gemfile」に以下の編集を行ってください。

~/Gemfile

gem 'rails',        '5.1.6'
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.7.0'

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.6', platform: :mri
end

group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

group :production do
  gem 'pg', '0.20.0'
end

# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem 'rails', '5.1.6'

gem 'puma', '3.9.1'

gem 'sass-rails', '5.0.6'

gem 'uglifier', '3.2.0'

gem 'coffee-rails', '4.2.2'

gem 'jquery-rails', '4.3.1'

gem 'turbolinks', '5.0.1'

gem 'jbuilder', '2.7.0'

group :development, :test do

gem 'sqlite3', '1.3.13'

gem 'byebug', '9.0.6', platform: :mri

end

group :development do

gem 'web-console', '3.5.1'

gem 'listen', '3.1.5'

gem 'spring', '2.0.2'

gem 'spring-watcher-listen', '2.0.1'

end

group :production do

gem 'pg', '0.20.0'

end

# Windows環境ではtzinfo-dataというgemを含める必要があります

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

・Heroku では PostgreSQL を使うため本番環境にpg gemをインストールして Rails と PostgreSQL との通信を可能にする。
・Heroku では SQLite がサポートされていないため、sqlite3 gemが本番環境に導入されないように設定

上記の設定の追加をしています。

次に以下のコマンドで設定を適用します。

・本番用(group :production)以外の gem をインストール

ターミナル

$ bundle install --without production

1	$ bundle install --without production

・設定をコミット

ターミナル

$ git commit -a -m "Update Gemfile for Heroku"

1	$ git commit -a -m "Update Gemfile for Heroku"

これでデプロイ用の設定が完了しましたこで、Heroku をインストールします。

・Heroku インストール

ターミナル

$ source <(curl -sL https://cdn.learnenough.com/heroku_install)

1	$ source <(curl -sL https://cdn.learnenough.com/heroku_install)

・インストールができたか確認

ターミナル

$ heroku --version

1	$ heroku --version

heroku のバージョンが表示されましたら以下の herokuコマンドを順番に実行してデプロイします。

ターミナル

#Herokuログイン
$ heroku login --interactive
#SSH鍵の追加
$ heroku keys:add
#新規アプリケーションの作成
$ heroku create
#デプロイ
$ git push heroku master

#Herokuログイン

$ heroku login --interactive

#SSH鍵の追加

$ heroku keys:add

#新規アプリケーションの作成

$ heroku create

#デプロイ

$ git push heroku master

※アドレスとパスワードの入力が求められますので、Heroku 登録時のものを使用してください。

heroku create でアドレスが出力されますのでそこにアクセスすれば本番用の URL でも「Hello World」がブラウザに表示されることが確認できます。

お疲れ様でした。

初回以降のコマンド

今回で基本の環境はできましたので続きから開発するときのコマンドのメモです。

個人的にですが、慣れてない時期によくわからず初回のみでよかったコマンドを再度やってめんどうなことにしたみたいなことは結構あったのであると案外いいのではないかと思ったので一応載せておきます。

・開始時

ターミナル

#ブランチの切り替え
$ git checkout -b {newbranch-name}
#ブランチの確認
$ git branch -a

#ブランチの切り替え

$ git checkout -b {newbranch-name}

#ブランチの確認

$ git branch -a

・終了時

ターミナル

#ステージング
$ git add .
#コミット
$ git commit -m "Free comment"
#ログ出力(コミットの確認など、q で終了)
$ git log
#チェックアウト
$ git checkout master
#マージ
$ git merge {newbranch-name}
#リモートにプッシュ
$ git push
#デプロイ(本番使用時のみ)
$ git push heroku

#ステージング

$ git add .

#コミット

$ git commit -m "Free comment"

#ログ出力(コミットの確認など、q で終了)

$ git log

#チェックアウト

$ git checkout master

#マージ

$ git merge {newbranch-name}

#リモートにプッシュ

$ git push

#デプロイ(本番使用時のみ)

$ git push heroku

以上になります。お疲れさまでした。

さいごに

さいごまで読んでいただきありがとうございます。

参考と似たような内容が多いのですが、ほぼほぼ自分のためのメモみたいなものですので勘弁してください(笑)

補足部分で役に立つ部分がありましたら幸いです。

この記事を気に入っていただけましたらTwitterでもプログラミングに関してのツイートをリアルタイムでしていますので
ご一緒にフォローもお願いします。

あっきーをフォローする