Rails x Herokuでアプリケーションを作成 [完全初心者向けチュートリアル]

プログラミング経験の本当に少ない人向けに、無料で始められるWebサーバのHerokuにRuby on Railsのアプリケーションをアップロードするまでのチュートリアル記事です。Macでの環境構築から、Herokuへの登録、Railsアプリケーションの作成、HerokuへのPushまでをひととおりカバーできることを目標にしています。

Mac(Linux)な人向けです。Windowsの人、ゴメンナサイ…

(2016/02/29 00:15) Herokuの概要・メリットのスライドを追加

🍄 目次

(01) 事前準備: 最初に見ておくと捗るドットインストール

(02) ローカル環境構築

(03) Railsアプリのひな形作成

(04) WebアプリにおけるMVCとは？

(05) Railsのフォルダ構成

(06) Herokuの概要・メリット

(07) RailsでWebアプリを作成

(08) Herokuへのアップロード

(09) 次に見ておくと捗るドットインストール & おすすめサイト

(10) 簡単な開発の流れ

(11) 体験談

😎 最初に見ておくと捗るドットインストール

実際にヒアリングして認識したのは、まずUNIXコマンドやVimに対してあんまり親しくないので、それが原因で環境構築のときに詰まってしまうようでした。ということで、安定のドットインストールさんの『UNIXコマンド入門』と『vim入門』を作業前に見ておくとあとあとの作業が捗ると思います！

ちなみに最初のほうでよく出てくるターミナルで使うコマンドです。

ls -la : ファイル・フォルダの一覧を見るコマンド
pwd : 現在のパス(自分がいる場所)を表すコマンド
cd : ディレクトリを移動するコマンド(Change Directoryの略)
mkdir : フォルダを作成するコマンド
mv: ファイル・フォルダの場所を移動させるためのコマンド

😀 (2) ローカル環境構築

(2-A) Marvericks Rails開発環境構築手順

Marvericks Rails 最新環境詳解構築手順

この記事を参考にRails環境を構築していただければ幸いです。MySQLの部分については詰まるようであればスキップしてください。

(2-B) Heorkuのユーザー登録とHeroku toolbeltのインストール

こちらの『Heroku登録〜Macで環境整備〜』のSSHの公開・秘密鍵のセクションまでを実行してください。

🤔 (3)Railsアプリケーションのひな型作成

次にターミナルの操作です。作業フォルダへ移動します。作業フォルダは初心者の人向けというのを考えてDropboxフォルダ内にruby_tutorialフォルダを作成してそこに移動します。(Dropboxが入っていない場合はどこでもOKです)

cd ~/Dropbox
mkdir ruby_tutorial
cd ruby_tutorial

次にRailsプロジェクトを作成します。もしこのコマンドでエラーが出る場合は、gem install railsと打ってコマンドが完了するまでしばらくお待ちください。

rails new heroku_app

🐝 (4) WebアプリケーションにおけるMVCとは？

Railsでは次のようなMVC(Model, View, Controller)のしくみ使ってWebアプリケーションを作っていきます。

Model(モデル): 主にデータベース(MySQLやPostgreSQL)とのやりとりを担当
View(ビュー): 主にWebブラウザのhtmlの表示を担当
Controller(コントローラ): View(ビュー)とModel(モデル)との間の橋渡しを担当

🐹 (5) Railsのフォルダ構成

Railsのフォルダ構成は次のとおりです。最初に扱いそうなファイルを厳選して書いています。より詳しい説明は、『Railsの基礎知識』を御覧ください。

├── Gemfile #=> gemの依存関係を指定
├── app #=> アプリを格納
│   ├── assets #=> CSSや画像などを格納
│   │   ├── images #=> 主に画像(jpgやpng)
│   │   ├── javascripts #=> 主にJavaScriptを格納
│   │   │   └── application.js
│   │   └── stylesheets #=> 主にCSSを格納
│   │       └── application.css
│   ├── controllers #=> コントローラを格納
│   │   ├── application_controller.rb
│   │   └── concerns
│   ├── helpers #=> ヘルパーを格納
│   │   └── application_helper.rb
│   ├── mailers #=> メール関連ロジックを格納
│   ├── models #=> モデルを格納
│   │   └── concerns
│   └── views #=> ビューを格納
│       └── layouts #=> ビューの親玉的なファイルを格納
│           └── application.html.haml
├── config #=> 設定に関するファイルを格納
│   ├── database.yml #=> DBの接続情報を格納
│   ├── deploy #=> Capistranoに関するデプロイ・ファイルを格納
│   ├── locales #=> 翻訳などに関わるファイルを格納
│   │   ├── en.yml
│   │   ├── ja.yml
│   │   └── simple_form.en.yml
│   └── routes.rb #=> ルーティングに関わるファイルを格納
├── db #=> データベースの設定ファイルを格納
│   ├── migrate #=> テーブルの作成・削除に関わるファイルを格納
│   │   └── 20140216021738_create_users.rb
│   ├── schema.rb #=> 現在の最新のテーブルの状況がわかるファイル
│   └── seeds.rb #=> DBの初期データ的なファイル
├── public #=> 主に静的なファイルなどを格納。ルート('/')でアクセスした時に見れる
    ├── 404.html
    ├── 422.html
    ├── 500.html
    ├── favicon.ico
    └── robots.txt

🐰 (6) Herokuの概要・メリット

Herokuの概要やこんなことができますよという説明です。Herokuを使うメリットがとてもわかりやすく書かれています。

🍣 (7) RailsでWebアプリケーションを作成

次に作成したフォルダの中に移動します。移動したら、Sublime Textでプロジェクトを開きます。

cd heroku_app
subl .

次にSublime Text上でGemfileを探して次の内容を見つけてください。

gem 'sqlite3'

上の内容を、下のように書き換えます。

group :development do
  gem 'sqlite3'
end
group :production do
  gem 'pg'
  gem 'rails_12factor'
end

これで開発環境ではDBがなくても動くようにして、本番環境でだけDBを使うようにしました(pg)。またrails_12factorはRails 4がHerokuでうまく動くようにするためのライブラリです。

上記が完了したらターミナルで次のコマンドを実行します。

bundle install --without production

ちなみに、先ほどのGemfileや上のbundle installはRubyのライブラリGemを管理するためのしくみBundlerのコマンドです。

これが完了したら、Railsの土台作りのコマンドscaffoldを実行します。

rails g scaffold product name:string price:integer

すると次のようなファイルが作成されます。(環境によって少し違いはあります)

invoke  active_record #=> Model: DBとの連携に関するファイル
create    db/migrate/20140224065448_create_products.rb #=> テーブル作成用ファイル
create    app/models/product.rb #=> DBとの連携ロジックを書くファイル
invoke  resource_route #=> ブラウザでのアクセス経路を書く記事
route    resources :products
invoke  scaffold_controller #=> modelとViewの橋渡し役
create    app/controllers/products_controller.rb
invoke    erb #=> View: ブラウザでの表示に関わるファイル
create      app/views/products
create      app/views/products/index.html.erb
create      app/views/products/edit.html.erb
create      app/views/products/show.html.erb
create      app/views/products/new.html.erb
create      app/views/products/_form.html.erb
invoke    rspec
invoke      rspec

上のコマンドが完了したら、Sublime Textに戻ってconfig/routes.rbの『2行目』に次の内容を追加します。これはブラウザでWebサイトのルートにアクセスした時に表示されるページの設定です。

root :to => 'products#index'

これが完了したら次にDBにテーブルを作成をします。と言っても次のコマンドを実行するだけです。

bundle exec rake RAILS_ENV=development db:migrate

ここまで完了したら、実際にブラウザで確認できます。次のコマンドを実行するとサーバが起動します。

rails server

起動が完了したら、ターミナルにhttp://0.0.0.0:3000と表示されます。サーバが起動しているのでそれをブラウザで見て、次のように表示されれば成功です。

🏀 (8) Herokuへのアップロード

いよいよHerokuにアップロード(デプロイ)します。が、その前にHeroku用のDBの設定をします。

vim config/database.ymlのファイルないにあるproductionを次のように書き換え。

production:
  adapter: postgresql
  encoding: unicode
  database:
  pool: 5
  username: 
  password:

Gitのコマンドを実行する前に、gitignoreを簡単に生成できるツールgiboをインストールします。

brew install gibo

インストールが完了したら、次にバージョン管理のしくみGitのコマンドを実行していきます。

git init
gibo OSX Ruby Rails SASS SublimeText >> .gitignore

.gitignoreからconfig/initializers/secret_token.rbとconfig/secret.ymlの行を削除。

git add .
git commit -m "first commit"

次にこのRailsのアプリケーションをHerokuに登録します。まずはHeroku上にアプリケーションを作成します。

heroku create

続いて、次のコマンドを実行するとHerokuにRailsアプリケーションがアップロードされます。

git push heroku master

Rails 4.1の場合はsecret keyを生成してHerokuの環境変数にセット。

heroku config:add SECRET_TOKEN="$(bundle exec rake secret)"

これが完了したら、本番のDBにテーブルを作成します。

heroku run bundle exec rake RAILS_ENV=production db:migrate

そしてこのコマンドを実行するとブラウザが起動します。先ほどのRailsアプリケーションと同じものが動いていれば成功です。ちなみにこれで世界中に公開された状態になります！

🎂 (9) 次に見ておくと捗るお勧めサイト

Ruby & Railsの入門チュートリアル・まとめ

本章の紹介記事が増えてきたので別記事でまとめ直しました！

🏈 (10) 簡単な開発の流れ

今後このチュートリアルの続編を書くつもりですが、とりあえずこんな流れでプログラミングにトライしてみてください。

(A) 初回のみrails s でサーバー起動
(B) railsを色々変更 => (A)http://0.0.0.0:3000をブラウザで確認
(C) DBの変更がある場合は、bundle exec rake db:migrate
(D) 変更が終わったら、git add . -A && git push heroku master
(E) DBの変更がある場合は、heroku run bundle exec rake db:migrate
(F) heroku openでブラウザでWebサイトの表示確認

この(A) - (F)までのサイクルを回しながら、いろいろ試してみるとおもしろいと思います！

😸 (11) 体験談

僕が1週間でWebサービスを公開するまで - ぐだぐだ言ってないでコードを書けよ、ハゲ。

🐮 便利リンク

Rubyのチートシート変数 / クラス / モジュール

Rubyの変数、クラス、モジュールの使い方について

お願い

個人的に初心者向けにRuby/Railsを教える機会が増えています。この記事に関連する分野で効率的に勉強するのにお勧めな資料をご存じなら、Twitterで@zyunnosukeにメッセージorコメントいただけたら感激します！

逆にこの記事を使ってトライしたら、なんかうまく動かない的な話も同じく大歓迎です。いつでもメッセージください！

😼 変更来歴

(2014/02/08 20:00) Rails 4.0チュートリアルを追加

(2014/02/12 22:20) 知り合いに押してフィードバックをいただきました！

(2014/02/18 00:10) Railsの基本的なフォルダ構成を追加

(2014/02/24 16:10) MVCの説明を追加

(2014/03/30 20:00) Ruby/Railsの参考情報や古くなった情報を修正

(2014/04/13 19:05) Rails 4.1対応

(2016/02/29 00:15) Herokuの概要・メリットのスライドを追加

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

酒と泪とRubyとRailsと