Railsで作成したWebアプリケーションをHerokuにデプロイし公開する
こんにちはYsです。
先日、初めてRailsを使用して開発したWebアプリケーション「Color Pallet」をHerokuにデプロイして無事に公開が完了しました。
※公開したアプリについての詳細は他の記事で書きます。
その際に、色々躓いた部分があるので、このブログにデプロイ方法と、その際に起きた問題点などをまとめたいと思います。
- Herokuへの登録
- Heroku CLI（コマンドラインインタフェース）のインストール
- Heroku用のモジュールを作成
- HerokuでRailsを扱う際の注意点
- Herokuにデプロイ
- Herokuでマイグレーションの設定
- まとめ
Herokuへの登録
Herokuを使用するには、ユーザー登録が必要なのでまずはユーザー登録を行います。
赤枠の部分をクリックします。
クリックするとユーザー情報を入力する欄が出てくるんので各自の情報を入力します。
赤枠で囲っている部分、今回の「主な開発言語」はRubyとします。
メールアドレスにログインしてくださいとのメールが届くのでリンクをタップし、Herokuにブラウザからログインしてください。
これで会員登録は完了です。
次に自分のPCからHerokuを使用できるように、「Heroku CLI （コマンドラインインターフェイス）を導入します。
Heroku CLI（コマンドラインインタフェース）のインストール
こちらに手順が書いてありますが、僕の方で実際に構築したやり方を書いていきます。
MacではbrewにHerokuのコマンドがすでに用意されているので、brewを使用してインストールを行います。
以下のコマンドをターミナル上で実行します。
$ brew tap heroku/brew && brew install herokuこれでHeroku CLIが使用できるようになりました。
実際にコマンドラインからHerokuにログインをしてみます。
heroku loginというコマンドをターミナル上で打ちます。
$ heroku login
heroku: Press any key to open up the browser to login or q to exit:
Logging in... done
Logged in as sample@sample.com上記のコマンドを打った後にログインページに飛ばされるので、認証完了が出ていれば問題ありません。
次に実際にHerokuにログインして、Heroku用のモジュールを作成します。
Heroku用のモジュールを作成
Heroku用のモジュールが必要なので、モジュールを作成します。
heroku create アプリ名でモジュールの作成が出来ます。
今回は仮なので「appname」というモジュールを作成します。
$ heroku create appname
Creating ⬢appname... done
https://appname.herokuapp.com/ | https://git.heroku.com/appname.gitこれでモジュール自体の作成は完了しました。
次に、任意の場所にこの作成したモジュールをgit cloneを行い、cloneします。
URLは先ほどcreateした際に出てきたURLを使用します。
$ git clone https://git.heroku.com/appname.gitただ、これだけではモジュール自体の「箱」が用意されただけです。
この記事では、ローカルで作成したモジュールがある前提で記事を書いていますが一応ない場合でも特に問題ありません。
・ローカルで作成したモジュールがある場合
cloneしたディレクトリに、モジュールを移行してください。
・ローカルで作成したモジュールがない場合
単純に空のモジュールをコミットします。
既にローカルでRailsで作成したモジュールがある場合、git initは省略してOKです。
# cloneしたディレクトリに移動します
$ cd appname
# gitリポジトリとして作成する
$ git init
# 全てのファイルをステージングにあげる
$ git add *
# コミットする
$ git commit -m "first commit"HerokuでRailsを扱う際の注意点
上記でモジュールを作成して、あとはコミットだけですが実はこのままRailsで作成したモジュールをコミットしてもうまくいきません。
なので、その前に先に躓くポイントを上げて解消していきます。
- Railsの設定でDBを「postgreSQL」に変更する
- デフォルトでES6を使用できるようにする（ES6を使用している方のみ）
- assetsのプリコンパイル設定をオンにする
Railsの設定でDBを「postgreSQL」に変更する
HerokuではRailsでデフォルトで使用できる「sqlite」が使用できません。
そのため、Heroku上ではDBを「postgreSQL」に設定します。
まずはbrewでposgresqlをインストール
$ brew install postgresqlGemfileを修正してpostgresqlパッケージをインストール
Gemfileを修正して、posgresqlをインストールします。
その際に、どっちのDBを使用するのか指定してあげる必要があります。
# 開発環境[development]とテスト環境[test]ではsqlite使用する gem 'sqlite3', '~> 1.3.6' ,group: [:development, :test] # 本番環境[production]ではpostgressを使用する gem 'pg', group: :production
Gemfileを上記のように修正した後、bundle installをターミナルでうち、パッケージをインストールを行います。
$ bundle installこれでpostegreSQLが使用できるようになりました。
今度はDBの使用設定を行います。
DATABASE_URLの確認
heroku configコマンドを使用して、DATABASE_URLを確認します。
$ heroku config
DATABASE_URL: postgres://****:@ec2-**-**-**-**.compute-1.amazonaws.com:**/**※上記のコマンドを打った後にDATABASE_URLが表示されない場合
addonを追加します。以下のコマンドを打つと、DATABASE_URLが生成されます。
heroku addons:create heroku-postgresql:hobby-dev
$ heroku addons:create heroku-postgresql:hobby-dev
Creating heroku-postgresql:hobby-dev on ⬢ sushi... free
Database has been created and is available
! This database is empty. If upgrading, you can transfer
! data from another database with pg:copy
Created postgresql-concave-52656 as DATABASE_URLdatabase.ymlの修正
実際に使用するDatabaseの設定をここで行います。
production:の設定を追加し、urlには先ほど確認した環境変数を、adapterにはposgresqlを指定します。
production:
<<: *default
url: <%= ENV['DATABASE_URL'] %>
adapter: postgresql
encoding: unicode
pool: 5これでDatabaseの設定は完了です。
デフォルトでES6を使用できるようにする（ES6を使用している方のみ）
Rails newで作成したデフォルトのRailsアプリケーションの設定では本番環境[production]においてES6は使用できません。
そのまま本番環境にデプロイしようとすると以下のエラーになります。
rake aborted!
Uglifier::Error: Unexpected character '`'ローカル環境では普通に使用できますが、コミットの際の妨げになるのでJSファイルでES6の記述方法を行なっている人はこの設定は必須です。
productionの設定を変更する
config/environments/production.rbに以下の記述を追記します。
これでES6の記述を行なっても大丈夫です。
config.assets.js_compressor = Uglifier.new(harmony: true)
assetsのプリコンパイル設定をオンにする
この項目はRailsの機能をデフォルトで使用している人向けになりますが、デフォルトではassetsのプリコンパイル機能がOFFになっています。
デフォルトのままデプロイすると、CSSや画像が読み込まれないといった事象になるのでこの設定をONにします。
# 修正前
config.assets.compile = false
# 修正後
config.assets.compile = trueこれで大体の設定は完了です。
あとは実際にソースをデプロイして公開します。
Herokuにデプロイ
Herokuにデプロイする前にリモートリポジトリがあるか確認します。
git remoteコマンドを使用して、herokuがあるかどうかを確認します。
$ git remote
heroku上記のコマンドを打った際に何も出力されていない場合、リモートリポジトリを作成する必要があります。
cloneした際に利用したURLを使用します。
リモートリポジトリを追加
$ git remote add heroku https://git.heroku.com/appname.gitこれで完了です。
では実際に、Herokuにデプロイします。
Herokuへデプロイ
git pushを使用して、実際にモジュールをHeroku上に上げます。
以下のように「Verifying deploy… done」と出力されていれば完了です。
$ git push heroku master
...
remote: Verifying deploy... done.
To https://git.heroku.com/appname.gitHerokuでマイグレーションの設定
Heroku上でマイグレーションの設定を行います。
といっても、通常のローカルで行う作業と同じです。db:migrateを使用します。
$ heroku run rake db:migrateこれで完了です。
heroku openコマンドを使用して、実際にデプロイされた自分のモジュールを確認してみましょう。
$ heroku openhttp://（Herokuアプリケーション名）.herokuapp.comのURLでブラウザが開かれたと思います。
Railsを使用してHerokuにデプロイしたアプリケーションは初回アクセス時にバックグラウンドでrails serverを起動してくれているので、アクセスは遅いです。
一度アクセスしてしまえばプリコンパイル機能が実行されるため、二度目以降は普通に早く動きます。
まとめ
Herokuの公開を完了しました。
自作のWebアプリケーションをポートフォリオ代わりに無料で公開できます。
ただし、Herokuは無料で使用する場合、使用制限がかかっていて24時間フル稼働をしてくれる訳ではありません。
ポートフォリオ代わりに公開する程度では何も問題がありませんが、サービスとして稼働したい場合は有料をオススメします。
人気記事【独学者おすすめ】プログラミング学習動画サービス3選