Ruby on Rails チュートリアル 「第1章 ゼロからデプロイまで」 簡略版

Bitbucket(Ruby on Rails チュートリアルhttps://railstutorial.jp)をみて、

あまりの長さに挫折しそうだったので「第1章 ゼロからデプロイまで」を簡略版としてまとめてみます。

※簡略すぎて詰まる場合は、本家(https://railstutorial.jp)を御覧ください

目次

開発環境の準備

  1. Cloud9(https://c9.io/)に登録してサインイン

  2. Workspacesにて「Create a new workspace」をクリック

  3. Workspace nameを入力して、Privateを選択して、Rails Tutorialを選択して「Create workspace」をクリック

  4. IDEが立ち上がったら右上の歯車アイコンをクリックして、「Soft Tabs」の値を4→2に変更する
    Rubyにおけるインデントは2が基本だそうです

  5. IDE下部にあるターミナルにて「$ gem install rails -v 5.0.0.1」とコマンドを入力して実行
    ※これでRuby on RailsがCloud9の環境にインストールされる

  6. IDE下部にあるターミナルにて「$ rails _5.0.0.1_ new hello_app」とコマンドを入力して実行
    ※これでRuby on Railsのスケルトンが作成される

  7. IDE左部にあるファイル一覧のGemfileをダブルクリックして開き、gem 'rails'・・・の部分が下記のようになっていることを確認する

gem 'rails', '~> 5.0.0', '>= 5.0.0.1'
または
gem 'rails', '~> 5.0.0.1'
  • IDE下部にあるターミナルにて「$ cd hello_app」とコマンドを入力して実行

  • IDE下部にあるターミナルにて「$ bundler update」とコマンドを入力して実行
    ※Bundlerとは、Ruby on RailsにおけるGem(ライブラリ)の管理をしてくれるもの

  • IDE下部にあるターミナルのタブ右側の「+」ボタンを押して「New Terminal」をクリック

  • 新規タブにてターミナルが立ち上がるので下記のコマンドを入力して実行

$ cd hello_app
$ rails server -b $IP -p $PORT

※これでローカルWebサーバーが立ち上がる。止めたい場合は、Ctrl+Cで終了

  • IDE右上のShareをクリックして、ダイアログ内のApplicationに表示されているURLをクリックして、Openをクリックすると、現在のWorkspaceがWeb画面で表示される

やっぱりまずは、Hello, World!

  • /app/controllers/application_controller.rb を開き、以下のようにhello関数を追加する
class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception

  def hello
    render html: "hello, world!"
  end
end
  • /config/routes.rb を開き、
root 'application#hello'

と入力して保存します
※これでアプリケーションのルートが先程入力した関数となります

  • 再度、現在のWorkspaceをWebで表示してみると、「hello, world!」と表示されていることが確認出来ます

バージョン管理(Git)

ローカル(Cloud9)側

  • IDE下部にあるターミナルにて「$ git config -l」とコマンドを入力して実行し、表示された内容に関して修正したい場合は以下のコマンドにて更新を行う
$ git config --global user.name "Your Name"
$ git config --global user.email your.email@example.com
  • IDE下部にあるターミナルにて「$ git init」とコマンドを入力して実行
    ※これでGitリポジトリの初期化が行われる

  • IDE下部にあるターミナルにて「$ git add -A」とコマンドを入力して実行
    ※これでGitリポジトリへすべてのファイルが追加される

  • IDE下部にあるターミナルにて以下のコマンドを入力して実行

$ git commit -m "Initialize repository"

※これでGitリポジトリへコミットされる

サーバー(Bitbucket)側

※Bitbucketとは、GitHubのようなGitリポジトリホスティングサービスです
 特徴として、共同作業者が一定数以下ならリポジトリを公開しなくても無料で使えます

  • Bitbucket(https://bitbucket.org)に登録してログイン

  • Cloud9のIDE下部にあるターミナルにて「$ cat ~/.ssh/id_rsa.pub」とコマンドを入力して実行し、表示された公開鍵のテキストをコピーする

  • Bitbucketの右上のアカウントアイコンを選択し、「アカウントの管理」をクリック

  • 設定画面の「SSH 鍵」を選択し、「鍵を追加」をクリック

  • Labelにプロジェクト名などを入力し、Keyにコピーしたテキストを貼り付けて「鍵を追加」をクリック

  • Bitbucketの左上の「リポジトリ」を選択し、「リポジトリの作成」をクリック

  • リポジトリ名を入力し、リポジトリタイプは「Git」を選択して「リポジトリの作成」をクリック

  • 概要の右上に表示されているSSHパス(git@bitbucket.org:(username)/(repositoryname>.git)を参考にして、Cloud9のIDE下部にあるターミナルにて以下のコマンドを入力して実行

$ git remote add origin git@bitbucket.org:<username>/<repositoryname>.git

※これでBitbucketとの設定が完了します

  • IDE下部にあるターミナルにて以下のコマンドを入力して実行
$ git push -u origin --all

※これでBitbucketへコードがPushされます
 Bitbucketの画面を更新してソースがPushされていることを確認してみましょう

Gitコマンド例

コマンド 内容
git checkout -b (branchname) ブランチの作成
git checkout (branchname) ブランチの移動
git branch ブランチ一覧の表示
git add -A 新規、修正、削除されたファイルを追加する
git commit -m "(comment)" コミット
git merge (branchname) 現在いるブランチへ(branchname)をマージする
git branch -d (branchname) ブランチの削除
git push ブランチのPush
git push -u origin (branchname) ブランチ名を指定してPush
git pull ブランチをPull
git fetch Fetch
git reset --hard HEAD 直前のコミットの取り消し
git status ブランチの状態確認

Webサーバー(Heroku)のセットアップ

※Heroku(https://www.heroku.com)とは、AWSのようなWebアプリケーションのプラットフォームです

Webサーバー(Heroku)側

ローカル(Cloud9)側

  • Gemfile を開き、最下部に以下を追記する
group :production do
  gem 'pg', '0.18.4'
end
  • 次に同じくGemfile内のsqlite3を「group :development, :test do」配下へ移動する
    ※HerokuではSQLiteがサポートされていないため
group :development, :test do
  # Use sqlite3 as the database for Active Record
  gem 'sqlite3'
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
end

最終的には下記のようになります。

source 'https://rubygems.org'

gem 'rails',        '5.0.0.1'
gem 'puma',         '3.4.0'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.0.0'
gem 'coffee-rails', '4.2.1'
gem 'jquery-rails', '4.1.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.4.1'

group :development, :test do
  gem 'sqlite3', '1.3.11'
  gem 'byebug',  '9.0.0', platform: :mri
end

group :development do
  gem 'web-console',           '3.1.1'
  gem 'listen',                '3.0.8'
  gem 'spring',                '1.7.2'
  gem 'spring-watcher-listen', '2.0.0'
end

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

# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
  • IDE下部にあるターミナルにて以下のコマンドを入力して実行
$ bundle install --without production

※Gemfile.lockを更新するため

  • IDE下部にあるターミナルにて以下のコマンドを入力して実行
$ git commit -a -m "Update Gemfile for Heroku"
  • IDE下部にあるターミナルにて「$ heroku version」とコマンドを入力して実行
    ※Herokuクライアントの確認用。Cloud9を利用していれば初めから入っています。

  • IDE下部にあるターミナルにて「$ heroku login」とコマンドを入力して実行
    「Email」「Password」を聞かれるので登録した際のものを入力する
    ※これでHerokuクライアントがサーバーにログインされます

  • IDE下部にあるターミナルにて「$ heroku keys:add」とコマンドを入力して実行
    「Would you like to upload it to Heroku?(Y/n)」と聞かれるので「Y」と入力して実行
    ※これでHerokuにSSHキーが追加されます

  • IDE下部にあるターミナルにて「$ heroku create」とコマンドを入力して実行
    ※これでHerokuにWebアプリケーションの場所が作成されます

  • IDE下部にあるターミナルにて「$ git push heroku master」とコマンドを入力して実行
    ※これでHerokuにGitのmasterブランチの内容がデプロイされます

  • HerokuにてWebアプリケーションが追加されているので選択し、右上に表示されている「Open app」をクリックすると、「Hello, World!」と表示されていて、無事デプロイ出来たことが確認できる

これにてRuby on Rails チュートリアル「第1章 ゼロからデプロイまで」は完了!

Ruby on Rails 5アプリケーションプログラミング

Ruby on Rails 5アプリケーションプログラミング

Ruby on Rails 5 超入門

Ruby on Rails 5 超入門

たのしいRuby 第5版

たのしいRuby 第5版