vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです

【Rails】Herokuの登録&初期設定からデプロイ方法までまとめ

      2017/11/21

LINEで送る
Pocket


こんにちは、okutani(@okutani_t)です。本記事では『Heroku』の登録方法、かんたんな初期設定からRuby on Railsのアプリをデプロイするところまで解説しています。

Herokuを利用すると、Ruby on Railsのような公開設定がめんどうなアプリをかんたんに公開することができます。

Herokuは条件付きで無料で利用することができ(後述)、アプリの検証なんかにも利用することもできて便利です。

デプロイ作業もGitを利用することで、とてもかんたんにおこなうことができるのでぜひ活用してみてください。

今回作業をおこなった環境は、Ruby2.4.1、Ruby on Rails5.1.2、MacOS上(Sierra)です。

なお、本記事はこちらの公式ページを参考にしています。

参考Getting Started with Rails 5.x on Heroku | Heroku Dev Center

合わせて参考にしてみてください。

ではさっそく、herokuの登録方法から見ていきましょう。

スポンサーリンク

Herokuの登録方法

公式サイトへアクセス。「Sign up」をクリック。

LINKCloud Application Platform | Heroku

以下の項目を入力し、「CREATE FREE ACCOUNT」をクリック。

  • First name
  • Last name
  • Email Address
  • Company name(任意)
  • Country
  • Primary Development Language(今回はRubyを選択)

登録したメールアドレスに登録用URLが送信されます。

メールを開いてURLをクリック。

パスワードを入力し「SET PASSWORD AND LOG IN」をクリック。チェックはお好きに。

これでHerokuに登録できました。「Click here to proceed as 〇〇@〇〇」をクリック。

Herokuの管理画面にログインできました。

次に、自分のPCからHerokuを操作できる「Heroku Toolbelt」を導入していきます。

Heroku Toolbeltの導入

Herokuの新規アプリ作成や、デプロイ、アドオンの追加などを利用できる「Heroku Toolbelt」を導入しましょう。

こちらのHeroku公式ページ「LINKHeroku CLI | Heroku Dev Center」から導入方法を確認できます

今回はMacで利用できるパッケージ管理ツールHomebrew経由で導入しました。Homebrewがよく分からない方は「参考MacにHomebrewを導入する方法&使い方まとめ | vdeep」を参考にしてみてください。

ターミナルから以下のコマンドを実行。

$ brew install heroku

導入確認。

$ heroku --version
heroku-cli/6.13.5 (darwin-x64) node-v8.2.1

これでターミナルからHerokuを操作することができるようになりました。

PCとHerokuの紐付け

先ほど導入したherokuコマンドを使って、PCとHerokuを紐付けてみます。

以下のコマンドを実行します。

$ heroku login

アカウント作成時に登録したメールアドレスとパスワードを入力します。

ターミナルからHerokuへの紐付けができました。

「$ heroku login」コマンドは、内部で「~/.ssh」ディレクトリ内の公開鍵(SSH鍵)をHerokuに登録しているようです。もし過去に公開鍵を作成していなければ作成するよう聞かれるので「YES」と答えておきましょう。

Railsアプリの準備

新しくRailsアプリを作成しましょう。

なお、HerokuではデフォルトでPostgreSQLが対応しているので、導入時にPostgreSQLを利用できるように指定しています。

$ rails new myapp -d postgresql --skip-bundle
$ cd myapp
$ bundle install --path vendor/bundle

それでは、scaffoldを使ってサンプルアプリを作成します。

$ rails g scaffold Article title body:text

TOPページからarticleのindexへアクセスできるよう「config/routes.rb」を以下のように編集します。

Rails.application.routes.draw do
  root 'articles#index' # 追記
  resources :articles
end

DBの初期設定をおこないます。

$ rails db:create db:migrate

サーバーを起動させて「http://localhost:3000」にアクセスしてみましょう。

$ rails s

無事に新規Railsアプリを作成することができました。「New Article」をクリックして好きに記事を作成してみてください。

ちなみに、MacへRuby・Ruby on Railsを導入する方法は「LINKMacにRubyとRuby on Railsを導入する方法 | vdeep」に詳しく書いています。合わせて参考にしてください。

RailsアプリをGit管理

Herokuへデプロイする前に、アプリをGitで管理しておく必要があります。

今回、bundlerで導入したライブラリは「vendor/bundle」以下に入っているので、.gitignoreでGit管理下から外しておきます。

$ echo '/vendor/bundle' >> .gitignore

以下のコマンドから先ほど作成したアプリをGit管理しておきましょう。

$ git init
$ git add .
$ git commit -m "initial commit"

これでRailsアプリをGitで管理することができました。

それでは、作成したRailsアプリをHerokuへ紐付けしていきましょう。

Herokuアプリの作成

Railsアプリをデプロイできるように、Heroku上に新規アプリを作成します。

以下のコマンドを実行。このコマンドは「デプロイしたいアプリのディレクトリから」おこなう必要があります。

$ cd myapp
$ heroku create

Creating app... done, ⬢ warm-everglades-xxxxxx
https://warm-everglades-xxxxxx.herokuapp.com/ | https://git.heroku.com/warm-everglades-xxxxxx.git

もし、アプリの名前を付けたい場合は以下のコマンドでつけることができます。

$ heroku create アプリ名

今回はアプリ名を指定せずに進めてみます。

これで、作成したRailsアプリとHerokuアプリの紐付けができました。

Herokuへデプロイ

それでは、作成したRailsアプリをHerokuへデプロイしてみましょう。

以下のコマンドを実行します。

$ git push heroku master
Counting objects: 83, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (69/69), done.
Writing objects: 100% (83/83), 21.13 KiB | 0 bytes/s, done.
Total 83 (delta 2), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
...省略...

すこし時間がかかりますが、上記のコマンドだけでかんたんにデプロイ作業をおこなうことができました。

HerokuアプリのDBのマイグレーションをおこなう

アプリのデプロイは完了しましたが、DBのマイグレーションがまだなのでサイトはうまく表示されません。

以下のコマンドを利用して、Heroku上でdb:migrateを走らせます。

$ heroku run bundle exec rails db:migrate

これでHeroku上でDBのマイグレーションがおこなわれます。

それでは、実際にサイトが表示されるかどうか確認してみましょう。

動作確認

デプロイがきちんとおこなえているかブラウザで確認してみます。

以下のコマンドを入力。自動でブラウザが立ち上がり、作成したアプリを表示してくれます。

$ heroku open

無事にHeroku上でRailsアプリを動作させることができました!

かんたんかつ無料でこの環境が手に入るHeroku、すごいですね。

URLを変更する

今までの手順で進めると、URLがHeroku上で自動生成されていることに気がついたと思います。

.herokuapp.comの前の文字列を、好きな文字に変更してみましょう。以下のコマンドを実行

$ heroku rename 新しいアプリ名

新しくつける名前は、すべてのHerokuアプリの中でユニークでなければいけないので注意。重複した名前をつけようとすると「Name is already taken」と怒られます。

ちなみに、上記コマンドで変更すると、git push先のURLも自動で書き換えてくれます。

Herokuの無料プラン

無料プランでHerokuを使う場合は、以下の制約があります。

  • 30分アクセスがないとsleepしてしまう
  • すべてのアプリで使用できるのは月1000時間まで(※24時間 x 30日 = 720時間)

30分アクセスがないと、サイトアクセス時の表示に時間がかかってしまいます。

30分ごとにアクセスさせるようスクリプトを組めば解消できるようですが、公式で推奨されている訳ではないのであまりおすすめできません。

無料プランはあくまで検証用や、ちょっとしたBotを置いておく用途で利用するといいですね。

サービスを公開する場合は有料プランを選ぶことになると思います。詳しいプランの概要については、以下の公式サイトのPricingを確認してみてください。

LINKPricing | Heroku

ただし、無料プランでもここまでできることは、とても素晴らしいことです。

Herokuコマンドまとめ

記事が長くなったので、別記事にまとめました。

Herokuでよく使うコマンドまとめ
こんにちは、okutani(@okutani_t)です。本記事では個人的に「Herokuでよく使うコマンド...
2017-11-21 15:35
はてブ

まとめ

本記事ではHerokuの登録方法から初期設定、便利なコマンド紹介までまとめました。

他にも、Herokuでは便利なプラグインを導入することでリッチな環境をかんたんに構築することができます。

なお、紹介したコマンドを利用しなくても、だいたいはHerokuの管理画面からいろいろ操作できるので試してみてください。

Herokuを今後使ってみたい方の参考になれば幸いです。

LINEで送る
Pocket

okutani (okutani_t) のヒトコト
Heroku便利ですねー。無料でここまで使えるってすごい!これからガンガンHeroku使っていこうと思います

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています(現在の業務量によってお受けできない場合もあります)。

Ruby on Rails」「JavaScript(jQuery, Reactなど)」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio


 - Heroku

スポンサーリンク

PC用AdSense

PC用AdSense

  こちらもどうぞ

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。