herokuでRailsアプリを公開する手順をゆっくり丁寧に。
ウェブサービつくるぞーと思い立った時は、あれやこれやといろんなアイデアが浮かんで考えもしませんが、実際に開発する！と覚悟を決めた時に必要になるものは、実際にサイトを動かすサーバー。
Heroku | Cloud Application Platform
ということで、流行りのherokuにサイトを公開するまでを記事にしました。
※自分のPC,MACにローカル開発環境があるという設定です。
※Vagrantが開発環境としてお気に入りなので、rails generateなどのコマンドはvagrant sshの中で。heroku run rake:migrateなどのコマンドはMac上で打っています。
サーバー周りが全然わからなくても、かなり短時間でアプリが動く。
ただ、ワードプレスなんかをインストールしたい！って場合は記事に挿入される画像の保管場所を別途考えなくてはいけないので難易度が上がる。その話はまた後日。
アカウント作成とインストール
なにはともあれ、
アカウントを作成。
次にtoolbeltをインストール。
インストールするとherokuコマンドがターミナルから使えるようになります。
ちなみに、
"Create a new app" はウェブサイト上でやらなくてよい。
アプリの作成
ターミナルで作業です。
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ページを確認。
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がおすすめ。
Free Mercurial and Git Client for Windows and Mac | Atlassian SourceTree
起動してメニューから「New / Clone」を選択。
こんな画面。
デフォルトで選択されている「Clone Repository」ではなく、
「Create Repository」を選択。
Destination PathでRailsアプリのフォルダを選択する。
多分こんなことになってるので、ファイル名を全部選択して、
右クリック「add to index」。
そしてコミットボタンでCommit。
あ、ログとかキャッシュとかは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
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
以上、おつかれさまでした。