酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

Rails X Herokuでアプリを作成 [完全初心者向けチュートリアル]

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

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

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


Included file ‘custom/google_ads_yoko_naga.html’ not found in _includes directory

目次

(01) 事前準備: 最初に見ておくと捗るドットインストール
(02) ローカル環境構築
(03) Railsアプリのひな形作成
(04) WebアプリにおけるMVCとは?
(05) Railsのフォルダ構成
(06) Herokuの概要・メリット
(07) RailsでWebアプリを作成
(08) Herokuへのアップロード
(09) 次に見ておくと捗るドットインストール & おすすめサイト
(10) 簡単な開発の流れ
(11) 体験談

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

http://dotinstall.com/lessons/basic_unix

http://dotinstall.com/lessons/basic_vim

実際にヒアリングして認識したのは、まず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のインストール

http://tande.jp/lab/2012/05/1728

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

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

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

1
2
3
cd ~/Dropbox
mkdir ruby_tutorial
cd ruby_tutorial

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

1
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でプロジェクトを開きます。

1
2
cd heroku_app
subl .

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

1
gem 'sqlite3'

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

1
2
3
4
5
6
7
group :development do
  gem 'sqlite3'
end
group :production do
  gem 'pg'
  gem 'rails_12factor'
end

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

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

1
bundle install --without production

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

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

1
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サイトのルートにアクセスした時に表示されるページの設定です。

1
root :to => 'products#index'

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

1
bundle exec rake RAILS_ENV=development db:migrate

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

1
rails server

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

Included file ‘custom/google_ads_yoko_naga.html’ not found in _includes directory

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

いよいよHerokuにアップロード(デプロイ)します。が、その前にheroku用のDBの設定をします。
vim config/database.ymlのファイルないにあるproductionを以下のように書き換え。

1
2
3
4
5
6
7
production:
  adapter: postgresql
  encoding: unicode
  database:
  pool: 5
  username:
  password:

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

1
brew install gibo

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

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

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

1
2
git add .
git commit -m "first commit"

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

1
heroku create

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

1
git push heroku master

Rails4.1の場合はsecret keyを生成してherokuの環境変数にセット。

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

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

1
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サービスを公開するまで - ぐだぐだ言ってないでコードを書けよ、ハゲ。

Included file ‘custom/google_ads_yoko_naga.html’ not found in _includes directory

便利リンク

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

お願い

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

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

変更来歴

(2014/02/08 20:00) Rails4.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) Rails4.1対応
(2016/02/29 00:15) Herokuの概要・メリットのスライドを追加

おすすめの書籍