やーまんぶろぐ

気が向いた時にだけ書くブログ

HerokuにRailsアプリを公開

HerokuにRailsアプリを公開するときのメモを書きます。

Herokuアカウントを作成したのは5年前くらい前ですね。
勉強がてらに作ったWebサービスなんかはHerokuの無料枠で動かしています。

今回はRailsのscaffolod機能を使ってメモ帳アプリを作成していく手順を例にしています。

バージョンはこちらになります。

ruby -v
ruby 2.2.2p95 (2015-04-13 revision 50295) [x86_64-darwin14]
rails -v
Rails 4.2.6

scaffoldで作成したメモ帳アプリの確認

rails new my_memo
cd my_memo
rails g scaffold Memo name:string description:text
rake db:migrate
rail s

http://localhost:3000/memos にブラウザからアクセスすると、メモ帳アプリができていると思います。

f:id:yamano3201:20160409154247p:plain

「New Memo」をクリックしてMemoを作成することができるアプリです。

Herokuに公開

HerokuのDBはpostgresqlで動くので、Gemfileを下のように書き換えてbundle installしましょう。
これでHeroku上(production環境)ではpg(postgresql)で、ローカルでrails sで起動した場合にはsqlite3で動かすことができます。
rails_12factor はRails 4対策になります。

# gem 'sqlite3'
gem 'sqlite3', :group => [:development, :test]
group :production do
  gem 'pg'
end
gem 'rails_12factor'

bundle installでpgのインストールに失敗した場合は、brew install postgresqlでインストールしてからbundle installすると成功すると思います。

それではHerokuに公開してみます。

git init
git add .
git commmit -m "first commit"
heroku create my-memo-xxxxxx
git push heroku master

heroku addons:add heroku-postgresql --app my-memo-xxxxxx
rake db:migrate
sudo heroku run rake db:migrate --app my-memo-xxxxxx
open https://my-memo-xxxxxx.herokuapp.com/memos

※ heroku createするときのアプリ名は世界でユニークな名前にする必要があります。
※ ローカルで一度db migrateしてから、Heroku側でdb migrateを行わないとエラーになるので注意が必要です。

これでHerokuにRailsアプリを公開することができました。

Twitter Bootstrapで見た目を整える

ここまでで目的は達成したのですが、せっかくなのでTwitter Bootstrapで見た目を少しだけ整えておきます。

まずはGemfileに下のgemを追加します。

gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'

bundle installして、bootstrapをインストールしていきます。
Herokuに反映させるには、再度pushする必要があります。

bundle install
rails g bootstrap:install less
rails g bootstrap:themed Memos 

git add .
git commit -m 'add bootstrap'
git push heroku master

f:id:yamano3201:20160409215307p:plain

f:id:yamano3201:20160409215529p:plain

これで少しだけ今風になりました。

エラー解消

いくつかエラーが起きたので解消したときのメモを残しておきます。

git push heroku master

usernameとpasswordを聞かれエラーになる場合は、
heroku auth:tokenを打って出てきた文字列をコピーしてから、もう一度git push heroku msaterを実行しましょう。

Username for 'https://git.heroku.com': (空エンター)
Password for 'https://git.heroku.com': コピーした文字列

heroku logs

Herokuに上げたアプリ側で、エラーが起きた場合はログを確認しましょう。

heroku logs --app my-memo-xxxxxx

最後に

Herokuを使えばアプリコードに集中できるので、趣味で書く分には十分ですね。

次回は、Herokuとslack連携や、監視のアドオンなど、いくつかHerokuについて書いていきたいと思います。

気が向いたら、また書きます。