Herokuへのデプロイ

Herokuとはレンタルサーバーのようなもので、デプロイとは制作したプロジェクトを公開するための作業です。このレッスンでは、デプロイに必要な準備を行い、実際にHerokuへデプロイを行います。

吉田先生

AWSのCloud9にはHerokuToolが入ってない為、まずはHerokuToolをインストールする必要があります。

• デプロイの準備
• デプロイ

デプロイの準備

Herokuへのデプロイを行うにはGemfileを編集する必要があります。Gemfileを開いてください。

デフォルトで設定されているSQLiteというデータベースはHerokuでは使用できません。ですので、開発・テスト環境でのみ使用するという風に書き換えます。

Gemfileの中から以下を見つけてカット（切り取り）します。MacであればCommand + x、WindowsであればCTRL + x になります。

そして以下のgroup :development, :test do ~ の中にペーストします。

次に、本番環境ではPostgresというgemを使用するので以下をGemfileに記述します。記述する場所は特に決まりはありませんが、今回は一番末尾に記述しておきます。

これはgroup :production do ~ end を作成し、その中に記述してください。

group :production do
  gem 'pg'
end

次に、Gemfileの内容をインストールします。productionに記述してあるもの以外をインストールする為に、--without productionというオプションをつけてインストールを行い、コミットとプッシュを行って下さい。

$ bundle install --without production

$ git add .
$ git commit -m "Update Gemfile for heroku"

$ git push

プッシュした内容が反映されているかどうか、Githubを更新すると確認できます。

Code内の赤い枠で囲った部分に【Update Gemfile for heroku】とあります。先ほどの処理がGithubにも反映されていることがわかります。

デプロイ

デプロイを行います。AWSのCloud9にはHerokuToolが入ってない為、まずはHerokuToolをインストールする必要があります。以下のコマンドを順番に実行してください。

nvm install v8.12.0

nvm alias default v8.12.0

npm install -g heroku

ターミナルの表示がこのようになっていればHerokuToolのインストールは完了です。ではherokuのデプロイに進みましょう。

まず、ターミナルからHerokuへログインし、SSHキーの登録を行います。以下を参考に、ログインとキーの登録を行って下さい。

$ heroku login
# メールアドレスとパスワードを求められるので、入力しエンターをクリック

ここで１度Enterキーを押します。次にパスワードの入力を求められるのでherokuに登録したパスワードを入力します。

ターミナルの表示が【Logged in as 自分のメールアドレス】になっていればログインは成功です。次は、以下コマンドでSSHキーの登録を行います。

$ heroku keys:add
? Would you like to upload it to Heroku? Yes
# herokuにアップロードしますか？と聞かれるのでyを入力する
Uploading /home/ubuntu/.ssh/id_rsa.pub SSH key... done

次に、Herokuアプリの作成を行います。
※アプリ名は任意。空いているアプリ名にする必要があります。

$ heroku create

# Herokuにアプリが作成される

上記イメージの最後の行、水色部分がURLになります。

Creating app... done, ⬢ damp-basin-58316

<span style="color:#e67e22;">https://damp-basin-58316.herokuapp.com/</span> | https://git.heroku.com/damp-basin-58316.git

このURLでHeroku上のアプリにアクセスできます。では、現在のmasterをHerokuにデプロイします。

$ git push heroku master

#Herokuにpushされます。この処理は少し時間がかかります。

ターミナルに【 * [new branch] master -> master】と表示されれば完了です。

remote: -----> Compressing...
remote:        Done: 44M
remote: -----> Launching...
remote:        Released v4
remote:        https://damp-basin-58316.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/damp-basin-58316.git
 * [new branch]      master -> master

では、デプロイできているか確認してみましょう。先程のアドレスにアクセスして、ブラウザで確認します。

赤い四角部分にカーソルを当てるとクリックできるようになっているので、クリックして【open】を選択しURLを開きます。以下のように表示されれば、デプロイは成功しています。

課題

Heroku.comにアクセスして、該当のアプリの詳細を見てみましょう。

解答例

このレッスンでは、Herokuについて学びました。デプロイの準備を行い、実際にデプロイを行うことも出来ましたね。次のレッスンでは、ブログ機能を作成してデプロイを行います。では、次のレッスンに進みましょう！