はじめに

今回は皆さんのアプリケーションを公開する為の作業を行いたいと思います。
この作業を行うことによって、今まで自分のPCからしか見れていなかったwebサイトを誰からでもアクセスできる状態、つまり自分だけのURLを手に入れることができます。
自分のPCでしか見れないことと、誰かに見てもらったり実際にサービスを利用してもらっている状態は雲泥の差ほど違います。何よりせっかく頑張って作成したものなので、最後までやりきることが大事です。

さて、開発に移る前に、まずは題名の説明から入りたいと思います。

Herokuとは？?

Herokuとはアプリケーションを公開するためのサーバーをレンタルできるサービスです。

「レンタルサーバー」はよく聞く用語かもしれませんが、同じようなものです。

ただ、一般的なレンタルサーバーでは、アプリケーションを公開するために1から自分でサーバーの設定をすべて行う必要があります。

しかし、Herokuではすでにそのような面倒な設定をすべて代行して行ってくれるので、非常に簡単にアプリケーションを公開することができます。

デプロイとは？？

デプロイとは、アプリケーションをWEB上に公開して利用可能な状態にすることです。「デプロイ」はWebサイトでの専門用語のようなものですが、一般的に「リリース」と同義です。

デプロイ（deploy）という言葉は元々、「配置する」「展開する」といった意味があります。

今回の例でいうと、RailsのアプリケーションをHerokuのサーバーに配置することがデプロイです。

ということで、この記事でやることは、Herokuという超便利ツールを使ってサイトを全世界の人が見れるようにwebするということです。

それでは早速やっていきましょう！！

herokuを使えるようにしよう！

最初にHerokuのアカウントを作成して、利用できるようにします。

Herokuは多少の制限はありますが無料で使うことができます。

本格的にアプリケーションを運用する場合は有料にアップグレードすることを考えるといいでしょう。

それでは、Herokuの公式サイトにいってアカウントを作成しましょう。

こちらが公式サイトのアカウント作成ページです。

サイト右上の「Signup」からアカウントを作成しましょう。

名、性、メールアドレス、会社名（何でも良いです）、国を入力してCreate Accountをクリックします。
「Primary development language」の欄には「Ruby」と入力しましょう。

パスワードまで登録できたら完了です！！

登録の時に使ったemailとパスワードは覚えておいてくださいね…。
忘れちゃう人はどこかに記録しておくといいですよ。

herokuコマンドを使えるようにしよう

続いてご自身のPCからherokuを遠隔で操作できるように「heroku CLI」というツールをインストールします。

このツールをインストールすることによって、PCからデプロイしたりサーバーの設定を変更したりすることができるようになります。

ツールはこちらからインストールしておきましょう。
heroku CLI インストール画面

インストールが出来たら、ターミナルを再起動して、以下のコマンドを打ってみてください。

$ heroku --version

インストールしたバージョンが出てきたらインストールは完了しています。
これでherokuを使う準備はばっちりです！

次からは、railsアプリケーションの方をeditorで変更していこうと思います

Railsアプリケーションを、Heroku用に変更しよう

これからherokuにデプロイする準備をします。

Gemfileの編集

Gemfileをherokuサーバー上で動くように編集していきます。

まず、「gem 'sqlite3'」と書いてある部分をコメントアウト(command+?)しましょう。

次に、Gemfileのgroup :development, :test do ～ endの間に以下のように書き加えてください。
他にいろいろ書いてあったと思いますが、それらは残した状態にしてください。

group :development, :test do
  gem 'sqlite3' #do ~ end内部に追加。他のgemは残してください。
  #注意　sqlite3のバージョンを指定しないことで、エラーが起きた際は、メンターと相談して、適切なバージョンを指定してください。
end

最後に以下の記述をそのままGemfileの最後の行に追加してください。

group :production do
  gem 'pg'
end

Railsでは、デフォルトで「sqlite3」というデータベースが利用されるようになっています。
しかし、herokuでは「PostgreSQL」というデーターベースを利用するので設定を変更する必要があるのです。

ただ、PostgreSQLを利用するのは「本番環境のみ」なので、「group:production」というオプションを追加して本番環境のみで使うようにしています。

Gemfileを書きかえて保存したら、下記のコマンドでGemfileの変更を反映させましょう!!

$ bundle install --without production

注） bundle install をする理由について

　Herokuは、デプロイ作業時に、Herokuサーバー上に置いたRailsアプリに対して、bundle install -without develop testを実行します。この際参照するものはGemfile.lockのみです。すなわち、 Gemfileに記載されていても、Gemfile.lockに記載されていないgemはインストールされません。
Gemfile.lockには、bundle installをして、Gemfileに記載されているgemをインストールした結果、依存gemなども含めて、必要なgemが全て自動で記載されます。bundle install = Gemfile.lock記入。なので、bundle installが必要というわけです。

注） --without production オプションについて

　今回本番環境用のgemのリストを書く、group:productionの中に、gem 'pg' を記入したと思います。もし、--without production　オプションを付けずに、普通のbundle installを実行すると、開発環境でもgem 'pg'が読み込まれてしまいます。gem 'pg' はRubyサイドと、PostgreSQLをつなぐ仲介人のような存在で、PostgreSQLとセットで初めて使用することができます。本番環境ではgem 'pg' はHerokuサーバー上のPostgreSQLを参照しますが、開発環境では、自分のPC内のPostgreSQLを参照します。手動でインストールしていない限り、あなたのパソコンにはPostgreSQLはインストールされていないので、--without productionを付けずに、一括でbundle installをすると、開発環境で参照するPostgreSQLが存在しませんというエラーが起きます。

database.yml

herokuでPostgreSQLを使うためには、もう一箇所データベースの設定を変更する必要があります。

「config/database.yml」ファイルの中身を書き換えます。

以下のように本番環境を表している「production」の項目を変更しましょう。
ymlファイルのインデント（字下げ）は必ず半角スペース2つで行い、全角の空白は使わないように注意してください。
半角と全角は見分けることが難しいので、間違って打ってしまうと探すのに一苦労します...^ ^

変更前

production:
  <<: *default
  database: db/production.sqlite3

変更後

production:
  <<: *default
  adapter: postgresql
  encoding: unicode
  pool: 5

# インデントは必ず半角スペース２つ

production環境下でのデータベースがsqliteからpostgresqlに変わってるのがわかると思います。
「.yml」の拡張子を持ったファイルはYAMLというデータを構造的に記述していく特殊なファイルです。
インデントが文法の意味を持っていますので、注意してください。

トップページの設定

次はトップページの設定をします。

例えばGeekTwitterのトップページを表示するには、localhost:3000/の後に「hello/index」を追記しなければなりませんでしたが、localhost:3000と入力するだけで「hello/index」のページを表示する方法があるんです。

それが、以下の記述です。config/routes.rbに追記してください。

root 'hello#index'

一般化するとroot 'コントローラー名#アクション名'という記述になります。自分のトップページを入力してくださいね！

config/environments/production.rbの設定

これが最後の編集です。

動的な画像を表示させるために、以下の記述をfalseからtrueに変えてください。
31行目あたりにあると思います。

config.assets.compile = true

これで以上です！！大変でしたね！

最後の仕上げ

最後の関門は、作ったアプリのファイルをherokuに渡すというところです。
gitというバージョン管理システムを利用すればこれが実現できます。まずは以下のコマンドを実行しましょう。

git --version

git version 2.14.1のように、gitのバージョンが出てきたら、インストールが完了しています。
もしgitのバージョンがでてこなかったら、インストールができていないので、windowsの人はこちらの記事を参考に、、Macの人はこちらの記事のHomebrewを使ってGitをインストールする以下を参考にgitをインストールしましょう。パスを通すことも忘れないでください。

なお、上記記事では、terminalのコマンドを、pcの中枢部分に伝える翻訳ソフトにbashというものを利用していることを前提としています。macの人が全員bashを使っているとは限らず、zshである人もいます。記事通りに進めて問題ありませんが、もしgitのバージョンがでないことがあったら、それはbashとzshの違いによりパスが通っていないことが原因の可能性が高いので、メンターに相談して解決しましょう。

gitが使えることを確認後、デプロイしたいrailsアプリ内にgitの設定ファイルを作成したいので、以下のコマンドを入力してください。

# 初期化、gitの管理を開始する為のコマンド
$ git init

（rails new の時点で、--skip-gitを付けていなかった場合、既にgitの設定ファイルが作成されている可能性があります。git init して、Reinitialized existing Git repository in ホニャララ〜/.git/と表示されたら、すでにgitの設定ファイルは作成されているので、そのまま先に進んでください。)

herokuにログインしよう

「heroku CLI」をインストールしたので、ターミナルからherokuを操作することができます。

herokuの操作は、ターミナルからの操作した方が簡単でしょう。

公式サイトからでも操作は可能ですが、英語のサイトなのでわかりにくいことが多いです。

まずはherokuにログインします

以下のコマンドを入力してください

$ heroku login

herokuに登録したemailとpasswordの入力を要求されたら、入力しましょう。

次に、heroku上にRailsアプリケーション用のサーバーを作成します。

アプリの名前はurlになるものです。半角英字なのはもちろんですが、使えない記号(_など)もあるので、シンプルなものにしておきましょう。
ちなみにアプリの名前を空欄にすると自動生成してくれます。

$ heroku create 好きなアプリの名前

これだけで作ることができます

作成できたらherokuの公式サイトにログインして、サーバーが作成されているか確認しておくといいでしょう。

最後の仕上げ

公開してみよう！

準備が整ったので、いよいよ実際にデプロイします！まずはgitにファイルを登録し、そのあとにherokuに登録します。
railsアプリケーションのディレクトリーまで移動してから、以下のコマンドを打ってください。

# ローカルリポジトリとHerokuが紐付いているかの確認　コマンド後、Herokuと表示されたら紐付けが完了しています。
$ git remote

# ディレクトリ配下のファイルをコミット対象にする
$ git add -A

# コミット、””内はどのような内容を作成、修正したのかあとでわかるためのメモ的役割なので内容は自由です。
$ git commit -m "Release to heroku"

ここで初めてgitを使ってコミットした人は、githubに登録したemailとusernameの入力を求められる場合があるので、入力してあげましょう。

下記のコマンドでデプロイできます。

$ git push heroku master

注）
WindowPCで開発したプロダクトをデプロイすると、過程で、Removing Gemfile.lock because it was generated on Windows.というログが出力されることがあります。これは、WindowsのPCで作成した、Gemfile.lockには、例えばsqlite3 (1.3.8-x86-mingw32)のように、WindowsのPC環境に適したバージョンに指定されたgemをインストールせよという記述が存在することがあるからです。しかし、HerokuはLinuxベースなので、Windowsに適したカスタマイズがされているgemを使用できません。なので、Gemfile.lockは一旦破棄され、gemfileを元に、ゼロからbundle install --without develop test が実行されます(gemのバージョン修正も自動でされる）。なので、まれに、gemのバージョンエラーが生じてしまうことがあります。詳しくはこちら

git push heroku masterが失敗する人はここ読んでください

このコマンドが失敗する場合は、もう一度GitHubのリポジトリにRailsアプリケーションが接続されているか確認してください。

$ git remote

というコマンドを打つと、gitが接続しているアプリケーションが表示されるので、herokuかoriginが表示されるか確認してください

または、(precompile errorなどが表示されることがありますが、この時は、cssファイルやjsファイルの読み込みでエラーが出ているので、)

$  RAILS_ENV=production rake assets:precompile

をターミナルで打ち込んでください。プリコンパイルは、初心者には難しい内容なので、今回は割愛しますが、知りたい人は以下のサイトをみてください。

プリコンパイルとは？？？

heroku上でマイグレーションしましょう！

続けて、今回はデータベースを使ったアプリケーションを公開するので「migrate」で本番環境のデータベースを更新します。

$ heroku run rake db:migrate

本番環境のherokuを操作する場合は、コマンドがRailsと違いHerokuなので間違えないように注意しましょう。

ちなみに、画像投稿機能を実装している場合は更に追加で以下のコマンドを実行してください。
（Cloudinaryの認証が済んでいない人は、画像投稿ができないので、このタイミングで済ませておきましょう。認証したかどうか思い出せない人はメンターに相談してみましょう。）

(xxxxxxxxxxのところはCloudinaryのマイページで取得した自分のキーに書き換えておいてください)

$ heroku config:set CLOUD_NAME=xxxxxxxxxx
$ heroku config:set CLOUDINARY_API_KEY=xxxxxxxxxx
$ heroku config:set CLOUDINARY_API_SECRET=xxxxxxxxxx

これで公開は完成です！！

実際にアプリケーションにアクセスしてみましょう！

ターミナルから以下のコマンドでアプリケーションを開くことができます。

$ heroku open 

コマンドを実行するとブラウザが開かれますが、「Something Went Wrong」というエラー画面がでることがあります。

でも慌てずに。

これはrailsアプリケーションの方でエラーが出た時に出るエラーメッセージなので、これは公開できているという証拠です。

公開すると、エラーメッセージは親切に出てこないので、自分で推測して、エラーを解消する必要があります！！

ここまでお疲れ様でした！！これでHerokuのデプロイは終了です。

slackで成果を発信しよう！

リリースしたURLとともに自分のプロダクトをslackで自己PRして、自分の三ヶ月の頑張りを披露しよう！この発信によって初期ユーザー獲得のチャンスになるかも！？

再デプロイ

一度公開すると色々な人からフィードバックなどをもらって、修正したくなることが必ずあると思います。（むしろ、アップデートすることがサービス作りの面白さを実感する部分かもしれません）それでは修正を行ってみましょう。

Vscodeを変更して、、、保存、、

これだけではローカル（localhost3000）では変更されますが、http://~の方には変更が加えられません。その為、再デプロイという作業を行っていきたいと思います。

修正してみよう！

とっても簡単で、回数制限もないので気軽にやっていきましょう。

$ git add -A

$ git commit -m "○○.index.erbを修正" #変更内容のメッセージを付けましょう。

$ git push heroku master

#変更履歴を見る
$ git log

$ heroku open

これで完了です。

以上で、再デプロイは終了です！　お疲れ様でした！
できたらぜひメンターに見せてくださいね。

エラー対応策集め

Case1

Gem::LoadError: Specified 'postgresql' for database adapter, but the gem is not loaded. Add `gem 'pg'` to your Gemfile

windowsのパソコンで散見されるエラーです。gem 'pg'がインストールされていないがために起きます。しかし、gem pgだけが読み込まれていないわけではなく、group ホニャララ　のように特定の環境下だけでインストールする指定をしたgemの全てがインストールされていない可能性が高いです。解決策は以下。

STEP1  Gemfile.lockを手動で消す。 

STEP2
$ bundle install --without production --path vendor/bundle 

STEP3
appディレクトリと同じ階層にあるbundleフォルダを消す

STEP4
$ git add -A
$ git commit -m'gem pg問題直ってくれ！'
$ git push heroku master

Case2

Must supply cloud_name in tag or in configuration
Cloudinalyとの紐付けが上手くいっていないせいで起きます。疑うべき点は以下

・ herokuにキーなどをセットしたかどうか。
・ Cloudinaryの認証ができているかどうか。Cloudinaryのダッシュボードで確認する。認証できていなかったら確認メールを再送して認証しましょう。
・ cludinary関連ファイルのスペルが合っているかどうかの確認。ファイルの内容だけでなく、ファイル自体の名前も。