Status Code 303 - See Other

サーバサイド、iOS・アンドロイドアプリ、インフラレベルの話まで幅広くやってます。情報の誤りや指摘・意見などは自由にどうぞ。

Ruby on Rails チュートリアル１章

ruby Web Framework

概要

Ruby の Web Framework である Ruby on Rails のチュートリアルについてまとめる。
対象読者としては、チュートリアルを一度は読んだけどチュートリアルからいちいちコマンドなどを再確認するのが面倒な場合など。

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

使用環境

※ 全部基本的に無料

IDE (Integrated Development Environment)

Cloud 9 (Cloud9 - Your development environment, in the cloud)

  • クラウド上で作業できる開発環境、最近はこんなサービスもあるんですね・・
  • 基本的にコンソール上で作業するので、GUI しか使えない人は厳しいかも？
  • ファイルの編集には vi を使用

バージョン管理

Git

  • おなじみのバージョン管理ツール
  • SVN(subversion)との違いは、ローカルでも自由に作業できたり、ネット不通でも開発できる環境だったり。

Gitリポジトリ

Bitbucket

  • 少人数開発であればプライベート環境(他人に公開しない)が無料で使える。
  • Github と基本的に提供機能は同じ。

Heroku

１章内容

Ruby on Rails の知識・チュートリアルの基本的な取り決めなど

Rails こんなすごい

チュートリアル実施の前提知識

  • 基本的に前提知識はなくても大丈夫。もちろん知っているに越した事はない。
  • 個人的には、プログラミングを過去に書いた事ある人ならできる内容
    足りない所は適宜補完する(Ruby, HTML, CSS, JavaScript, SQLなど)
  • 記法の説明、流し読みすれば OK
    • コンソール上のコマンドの書き方
    • パスの記述
    • プログラムの書き方。省略記号をそのままソースコードに記述しないこと！
とりあえず動かしてみる

上記使用環境の利用方法説明がひたすら続く
※ 当然だけど、各サービスのWeb画面もいつかは変化するので適宜読み替える
※ 事前にローカル環境もしくは Cloud 9 のどちらで開発するか決めること。個人的に Cloud 9 の方が環境依存なくて良いと思う。

  1. Ruby の導入 (※Cloud9 は不要)
    ※ Windows では ruby がデフォルトで入ってないので導入する。
    ※ Mac OS はデフォルトで入ってるけど、バージョン古いかも。(私の環境では Ruby 2.0.0)
    Ruby のインストール確認方法

    $ ruby -v
ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin13]


  2. Rails をインストール

    $ gem install rails -v 4.2.2


  3. プロジェクト用フォルダ作成、そこにプロジェクト作成

    $ APP_NAME=アプリ名をココにいれて！
$ mkdir ~/workspace
$ cd ~/workspace
$ rails _4.2.2_ new ${APP_NAME}


  4. Gemfile の置換

    $ rm ~/workspace/${APP_NAME}/Gemfile
$ vi ~/workspace/${APP_NAME}/Gemfile

    以下をコピペで貼付けて作成。

    source 'https://rubygems.org'

gem 'rails',                '4.2.2'
gem 'sass-rails',           '5.0.2'
gem 'uglifier',             '2.5.3'
gem 'coffee-rails',         '4.1.0'
gem 'jquery-rails',         '4.0.3'
gem 'turbolinks',           '2.3.0'
gem 'jbuilder',             '2.2.3'
gem 'sdoc',                 '0.4.0', group: :doc

group :development, :test do
  gem 'sqlite3',     '1.3.9'
  gem 'byebug',      '3.4.0'
  gem 'web-console', '2.0.0.beta3'
  gem 'spring',      '1.1.3'
end


  5. Rails サーバを起動する
    サーバ起動はそれ専用の端末になってしまうため、別タブ・別ウィンドウで起動すること。

    $ APP_NAME=アプリ名をココにいれて！
$ cd ~/workspace/${APP_NAME}
$ rails server

    Cloud 9 の場合

    $ APP_NAME=アプリ名をココにいれて！
$ cd ~/workspace/${APP_NAME}
$ rails server -b $IP -p $PORT

    なお、APP_NAME を２回いれるのが面倒な場合は、以下のコマンドを実行する事。
    これによって、ターミナル起動時に設定が読み込まれるため、別タブに移動しても同様の操作が可能になる。
    Mac OSXの場合

    echo "APP_NAME=hello_app" >> ~/.bash_profile

    Linux環境の場合

    echo "APP_NAME=hello_app" >> ~/.bashrc


  6. 動作確認
    ローカル環境なら
    http://localhost:3000/ にアクセスし、以下のようなデフォルトページが表示されれば OK。
    f:id:kouki_hoshi:20160611163613p:plain
    Cloud 9 であれば、[Share]ボタンをクリックして、環境設定中の[Application]にある URL にアクセスする。
    f:id:kouki_hoshi:20160611163120p:plain

デフォルトページに Hello World 表示

  1. コントローラにweb表示時の挙動を記述。

    $ vi ~/workspace/${APP_NAME}/app/controllers/application_controller.rb

    hello という挙動を定義する。(hello, worldって表示するだけ)

    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                               # hello メソッド追加 (3行)
    render text: "hello, world!"  # hello, world を表示
  end
end


  2. 現在のアプリケーションのルーティング情報を設定する。

    vi ~/workspace/${APP_NAME}/config/routes.rb

    アプリケーションルート(http://localhost:3000/など)に hello の挙動を設定する。

    Rails.application.routes.draw do
  # The priority is based upon order of creation: first created -> highest priority.
  # See how all your routes lay out with "rake routes".

  # You can have the root of your site routed with "root"
  root 'application#hello'         # ApplicationController クラスの hello メソッドを呼び出す
(以下省略)



  3. 再度動作確認。hello, world って書かれてればOK。
    f:id:kouki_hoshi:20160611165624p:plain

開発におけるソースコード管理からデプロイまで

以下は、Ruby on Rails 以外に関わる内容のため、概要のみ。

ソースコードのバージョン管理

初回作業

Git 設定

  1. Git インストール (※ Cloud 9 では不要)
  2. Git 設定
    バージョン情報で誰が更新したかの情報などに使われる。

    $ git config --global user.name "Your Name"
$ git config --global user.email your.email@example.com
$ git config --global push.default matching


Bitbucket 設定
  1. Bitbucket 登録
    Bitbucket — The Git solution for professional teams
  2. 公開鍵作成(※ 既に存在する場合・Cloud 9 では不要)

    $ ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/XXXXXX/.ssh/id_rsa): 
Created directory '/Users/XXXXXX/.ssh'.
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /Users/XXXXXX/.ssh/id_rsa.
Your public key has been saved in /Users/XXXXXX/.ssh/id_rsa.pub.
The key fingerprint is:
be:e9:16:45:e1:56:d3:e3:01:61:0e:ac:3e:61:42:18 XXXXXX@YYYYY-ZZZZZ.local
The key's randomart image is:
+--[ RSA 2048]----+
|                 |
|                 |
| .   .           |
|    E+           |
| o =   o S       |
|  + B o.         |
| o = B  .        |
|  o * o .        |
|   o . Bo+       |
+-----------------+

    公開鍵の内容出力

    $ cat ~/.ssh/id_rsa.pub

    公開鍵を Bitbucket ->[アカウントの管理]->[SSH キー] に登録


ローカル環境の Git と Bitbucket 連携
  1. Git レポジトリ作成

    $ git init
$ git add -A
$ git commit -m "コミット内容をココに記述する"


  2. BitBucket にリモートリポジトリ作成

  3. ローカルリポジトリとリモートリポジトリの関連付け

    $ git remote add origin git@bitbucket.org:${USER_NAME}/${REPOSITORY_NAME}.git
$ git push -u origin --all


開発作業手順

  1. トピックブランチ作成 + 現ブランチ確認

    $ git checkout -b ${BRANCH_NAME}
$ git branch


  2. ソースコード修正

  3. 現ブランチの状態確認
    以下の例では、変更状態にあることが示されている。

    $ git status
On branch master
Your branch is up-to-date with 'origin/master'.
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   toy_app/app/controllers/application_controller.rb

no changes added to commit (use "git add" and/or "git commit -a")


  4. 変更をステージ/コミット
    ステージ - 変更をコミット対象にする(コミットはまだされない)
    コミット - 変更をブランチの最新状態にする
    特定のファイルをステージ段階にする

    $ git add ${TARGET_FILES}

    全てのファイルをステージ段階にする

    $ git add -A

    ステージ対象をコミット

    $ git commit -m "コミット内容"

    全変更対象をステージ段階をすっとばしコミット (ただし新しく追加したファイルは適用されない)

    $ git commit -a -m "コミット内容"


  5. トピックブランチの変更をマスタにマージ

    $ git checkout master
$ git merge ${BRANCH_NAME}


  6. トピックブランチ削除

    $ git branch -d ${BRANCH_NAME}


  7. ローカルリポジトリの内容をリモートに反映する

    $ git push


デプロイ

ここでは、Heroku を利用したデプロイを記述する。

初回作業

  • Gemfile 設定追加
    DB に PostgreSQL を利用するため、この内容を Gemfile に記述。

    $ vi ~/workspace/${APP_NAME}/Gemfile

    末尾に４行追加。

    source 'https://rubygems.org'

gem 'rails',        '4.2.2'
gem 'sass-rails',   '5.0.2'
gem 'uglifier',     '2.5.3'
gem 'coffee-rails', '4.1.0'
gem 'jquery-rails', '4.0.3'
gem 'turbolinks',   '2.3.0'
gem 'jbuilder',     '2.2.3'
gem 'sdoc',         '0.4.0', group: :doc

group :development, :test do
  gem 'sqlite3',     '1.3.9'
  gem 'byebug',      '3.4.0'
  gem 'web-console', '2.0.0.beta3'
  gem 'spring',      '1.1.3'
end

# 下記4行追加 
group :production do
  gem 'pg',             '0.17.1'
  gem 'rails_12factor', '0.0.2'
end

    ローカル環境で追加した内容(production)を反映しないように bundler に設定
    (さらに、この変更をコミット)

    $ bundle install --without production
$ git commit -a -m "Update Gemfile.lock for Heroku"


  • Heroku アカウント登録
    Heroku

  • Heroku Toolbelt インストール (Cloud 9 の場合不要)
    Heroku Command Line | Heroku Dev Center

  • Heroku CLI がインストール済か確認

    $ heroku version
heroku-toolbelt/3.43.3 (x86_64-linux) ruby/2.3.0
heroku-cli/5.2.14-a56a9ae (linux-amd64) go1.6.2
You have no installed plugins.


  • Heroku に新しいインスタンスを作成
    Heroku ログイン + 認証鍵追加 + インスタンス作成

    $ heroku login
$ heroku keys:add
$ heroku create


アプリケーションを Heroku にデプロイする

  1. デプロイ方法

    $ git push heroku master


  2. デプロイしたアプリケーションの挙動確認
    heroku create 時のコマンドからアクセスすべき ホストが分かるので、
    これを元にアクセスして確認する。(以下の例では、http://damp-fortress-5769.herokuapp.com/ になる)

    $ heroku create
Creating damp-fortress-5769... done, stack is cedar
http://damp-fortress-5769.herokuapp.com/ | git@heroku.com:damp-fortress-5769.git
Git remote heroku added