herokuでRailsアプリを公開する手順をゆっくり丁寧に。

Shunsuke Sawada

ウェブサービつくるぞーと思い立った時は、あれやこれやといろんなアイデアが浮かんで考えもしませんが、実際に開発する!と覚悟を決めた時に必要になるものは、実際にサイトを動かすサーバー。


Rails Heroku

Heroku | Cloud Application Platform

ということで、流行りのherokuにサイトを公開するまでを記事にしました。

※自分のPC,MACにローカル開発環境があるという設定です。
※Vagrantが開発環境としてお気に入りなので、rails generateなどのコマンドはvagrant sshの中で。heroku run rake:migrateなどのコマンドはMac上で打っています。

サーバー周りが全然わからなくても、かなり短時間でアプリが動く。
ただ、ワードプレスなんかをインストールしたい!って場合は記事に挿入される画像の保管場所を別途考えなくてはいけないので難易度が上がる。その話はまた後日。

アカウント作成とインストール

なにはともあれ、
アカウントを作成。

heroku

次にtoolbeltをインストール。
インストールするとherokuコマンドがターミナルから使えるようになります。

Heroku Toolbelt
heroku toolbelt

ちなみに、
"Create a new app" はウェブサイト上でやらなくてよい。

アプリの作成

Terminal
ターミナルで作業です。

herokuにアプリを作成します。

1
$ heroku create your_app

自分のマシンに新しいRailsプロジェクト作成します。

1
2
3
4
5
6
$ rails new your_app
# アプリのフォルダ内に移動
$ cd your_app
# 編集
vi Gemfile
vi config/database.yml

viコマンドでドキュメントが表示されたら
aキーで挿入モードになる。
編集が終わったらエスケープキーを押して、
wqとタイプして上書き保存。
→ viの使い方

Gemfile

1
2
3
4
5
6
7
8
...
# Herokuの本番(production)環境ではPostgresqlを使用する
gem 'sqlite3', :group => [:development, :test]
gem 'pg', :group => [:production]

# コメントアウト
gem 'therubyracer', platforms: :ruby
...

database.yml

1
2
3
4
5
6
7
8
9
# Herokuに合わせて変更が必要
# 本番(production)環境のみ
production:
  adapter: postgresql
  encoding: utf8
  database: your_database
  port: 5432
  username: your_username
  password: your_password

database、username、passwordに関してはherokuにログインすると確認できる。
heroku createしているので、アプリ名が表示されているはず。
クリックして、Resourceページを確認。

Heroku Postgres
Add onsに Heroku Postgres があるのでクリック。
Connection Settings という項目で確認できるはずです。

準備ができたので、ひとまずscaffoldでアプリらしいものを作ります。

1
2
3
4
#Scaffold
$ rails g scaffold blog title:string content:text
#マイグレーション
$ rake db:migrate

Git Repository 作成

最初うちは、Gitの操作にはSourceTreeがおすすめ。

SourceTree
Free Mercurial and Git Client for Windows and Mac | Atlassian SourceTree

起動してメニューから「New / Clone」を選択。
こんな画面。

SourceTree

デフォルトで選択されている「Clone Repository」ではなく、
「Create Repository」を選択。
Destination PathでRailsアプリのフォルダを選択する。

Git

多分こんなことになってるので、ファイル名を全部選択して、
右クリック「add to index」。

Git

そしてコミットボタンでCommit。

Git

あ、ログとかキャッシュとかはCommitしたくないだろうから、
.gitignoreファイルに書き込む。
不可視ファイルは普段みえないけど、$ ls -la で表示できます。
何を無視するかはプロジェクト次第。例えば、

1
2
3
4
5
6
7
8
9
10
11
12
#rails specific
*.sqlite3
config/database.yml
log/*
tmp/*

## generic files to ignore
*~
*.lock
*.DS_Store
*.swp
*.out

Sample .gitignore files for various projects/languages -- Sujee Maniyam

ちなみに、、
既にRailsアプリがあって、Gitもあるって場合は、
下記のコマンドでherokuを追加するだけ。

1
2
3
4
5
$ git remote add heroku [email protected]:your_app_name.git 
# 確認
$ git remote -v
# 削除したければ下記
$ git remote rm heroku

git remote rm destination

SSH key

作成したファイルをHerokuにPushするにはSSH keyが必要です。
公開鍵をHerokuに登録して、秘密鍵を自分のPCに保存しておく。

1
$ ssh-keygen -C 'your@email' -t rsa -f filename

デフォルトではid_rsaとid_rsa.pubが生成されるけど、-f オプションでファイル名を指定できる。他のキーと混同したくない場合は、 -f id_rsa_heroku とかすると良いかも。
2ファイルがRailsアプリのフォルダ内に生成されたので、公開鍵をherokuに登録する。

1
2
#公開鍵をherokuに登録
$ heroku keys:add

2つの鍵ファイルがRailsアプリのフォルダ内にあれば、もうGit Pushできるはず。

1
$ git push heroku master

本番環境でマイグレーション

1
2
3
4
$ heroku run rake db:migrate

# assetsをプリコンパイル
$ heroku run rake assets:precompile RAILS_ENV=production

追記
heroku上でassets:precompileしてもいいかと思っていたんだけど、これではassets/javascript/以下が読み込まれなかった。
なので、ローカル環境でプリコンパイル後、Git pushという流れで解決。

1
2
# ローカル開発環境でprecompile
$ rake assets:precompile RAILS_ENV=production

確認

これで公開されているはず。
http://your_app.herokuapp.com/blogs をブラウザで確認するか、
ターミナル上で、

1
$ heroku openn

とすれば、ブラウザが開く。

Rails4だとCSSやjavascriptが読み込まれていない。
対処するには、
/config/environments/production
の下記設定を変更/追加する。

1
2
3
4
config.cache_classes = true
config.serve_static_assets = true
config.assets.compile = true
config.assets.digest = true

Can't get CSS working on Heroku using Rails 4 with bootstrap-saas gem - Stack Overflow
herokuで対応中とのことらしい。

config.assets.compile = true が false だと、
Twitter BootstrapのGlyphiconが正しく表示されなかったりした。URLたたくと表示されるので、CSSから画像へのパスは正しいのだが、なぞ。

変更後、Git Commit と Pushを忘れずに。

1
$ git push heroku master

以上、おつかれさまでした。

114
Shunsuke Sawada

おすすめの記事

CakePHP 2.x JSヘルパーでajax通信(ajax helperは使わない)
20
Rails4でQiita投稿ボタンをつくった
18
紙のデザイナーがウェブ開発できるようになるまでに必要なこと
451