このブログはプログラム開発や学習などの際に役立つ知識や情報を発信するエンジニアのためのトータル技術ブログです。
ご意見やご要望にも積極的に答えていきますので、お気軽にお問い合わせください。

記事へのリクエストはこちら

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

Ruby on Rails
スポンサーリンク

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

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

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

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

スポンサーリンク

さいしょに

 

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

第1章 ゼロからデプロイまで - Railsチュートリアル
SNS 開発を題材にした大型チュートリアル。プロダクト開発の 0→1 を創りながら学びます。電子書籍や解説動画、質問対応、法人向けサービスも提供しています。

 

まずは開発環境として 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

 

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

$ gem install rails -v 5.1.6

 

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

$ 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]

 

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

 

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

$ cd hello_app

 

・gem のインストール

$ bundle install

 

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

 

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

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

 

・Bundle のアップデート

$ bundle update

 

Rails初期画面を表示

 

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

 

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

$ 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 < ActionController::Base
  protect_from_forgery with: :exception
  def hello
    render html: "Hello world!"
  end
end

 

・config/routes.rb

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

 

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

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

 

Gitリポジトリにプッシュ

 

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

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

Create your account
Bitbucket is the Git solution for professional teams. Collaborate on code with inline comments and pull requests. Manage and share your Git repositories to buil...

 

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

 

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

 

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

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

 

・.ssh フォルダに移動

$ cd ~/.ssh

 

・フォルダ内の参照

$ ls

 

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

 

・ssh鍵の作成

$ ssh-keygen

 

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

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

 

・公開鍵の出力

$ 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

 

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

 

Heroku へデプロイ

 

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

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

Heroku | 新規登録
無料で Heroku の開発者アカウントを新規登録して、Heroku でアプリ作成を始める。

 

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

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

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

 

・~/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.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

 

・設定をコミット

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

 

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

 

・Heroku インストール

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

 

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

$ heroku --version

 

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

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

 

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

 

さいごに

 

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

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

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

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

スポンサーリンク
あっきー

元キャバクラ店長から未経験でエンジニアに転職した異端児。

「週4の5時間勤務、月収100万円」を実現させ、ゆるりと生きることを目標に日々パソコンと奮闘している。

自分の経験を元に、未経験からでも挫折しないプログラミングの勉強方法や最新技術や情報などを発信していきます。

あっきーをフォローする
Ruby on Rails
\良い記事だったらシェアしてね!/
スポンサーリンク
駆け出しエンジニアのつぶやき