-
- 1. Gitブランチを作成して作業開始
- 2. トップページの作成
- 3. Herokuへのデプロイ
- 4. Herokuの修正デプロイ
- 5. まとめ
Herokuへのデプロイ
Gemfileを編集する
Herokuへのデプロイを行うにはGemfileを編集する必要があります。以下場所からGemfileを開きましょう。
デフォルトで設定されているSQLiteというデータベースはHerokuでは使用できません。ですので、開発・テスト環境でのみ使用するという風に書き換えます。Gemfileの中から以下を見つけてカット（切り取り）します。MacであればCommand + x、WindowsであればCTRL + x になります。
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
そして、以下のように開発・テスト環境部分に貼り付けてください。
group :development, :test do
# Call 'byebug' anywhere in the code to ...
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
end
次に、本番環境ではPostgresというgemを使用するので以下を記述します。これは以下のように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
herokuの準備
AWSの初期状態ではHerokuを使うためのツールが入っていません。このツールのことをHerokuCLIといいます。ターミナルに以下のコマンドを実行してツールをインストールしましょう。
$ source <(curl -sL https://cdn.learnenough.com/heroku_install)
すると以下のように表示されインストールされたのがわかります。
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 25.4M 100 25.4M 0 0 54.0M 0 --:--:-- --:--:-- --:--:-- 53.9M
HerokuCLIのバージョンも確認しましょう。
$ heroku --version
heroku/7.24.4 linux-x64 node-v11.14.0
これでHerokuCLIがインストールされて、Herokuコマンドが使えるようになっています。次からはコマンドを使ってログインしてデプロイするまでやってみましょう。
ログイン・SSH Keyの設定
デプロイを行う前に、まだ少しやることがあります。ターミナルからHerokuへログインしSSHキーの登録を行います。以下を参考に、ログインとキーの登録を行って下さい。
まずはHerokuにログインします。
$ heroku login --interactive
# メールアドレスとパスワードを求められるので、入力しエンターをクリック
Enter your Heroku credentials:
Email: test@test.com
Password: *********
次に鍵をHerokuに追加します。
$ heroku keys:add
Herokuにアップロードしますか？と聞かれるのでyを入力する
? Would you like to upload it to Heroku? (Y/n)
#すると以下のようなコードが出てきたら成功です。
Uploading /home/ec2-user/.ssh/id_rsa.pub SSH key... done
デプロイ
最初に、Herokuアプリの作成を行います。
heroku create <アプリ名>
こちらの書式で名前をつけて新規アプリを作成することができます。
※注意としてアプリ名は任意。空いているアプリ名にする必要があります。
$ heroku create newsable-skillhub
# Herokuにアプリが作成される。
Creating ⬢ newsable-skillhub... done
https://newsable-skillhub.herokuapp.com/ | https://git.heroku.com/newsable-skillhub.git
オレンジの部分がURLになります。このURLでHeroku上のアプリにアクセスできます。では、現在のmasterをHerokuにデプロイします。
$ git push heroku master
と入力するとズラーッとコードが表示されます。少し時間がかかりますが、待ちましょう。
#コードがたくさん出てきます。Herokuにプッシュされます。
remote: -----> Discovering process types
remote: Procfile declares types -> (none)
remote: Default types for buildpack -> console, rake, web
remote:
remote: -----> Compressing...
remote: Done: 41.9M
remote: -----> Launching...
remote: Released v6
remote: https://newsable-skillhub.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/newsable-skillhub.git
* [new branch] master -> master
よく見るとアドレス部分があるのがわかると思います。こちらがこれからHerokuで公開されるアドレスになりますので、どこかにメモをしておくと良いでしょう。これはみなさん、それぞれ違うと思いますので注意してください。ここでは以下のアドレスのなっています。
https://newsable-skillhub.herokuapp.com/
では、デプロイできているか確認してみましょう。上記のコードを直打ちしても良いですが、今回はコードに書いてあるアドレスをクリックして「Open」をクリックしましょう。
ブラウザの別タブが開きます。以下のように表示されれば、デプロイは成功しています。
課題
Heroku.comにアクセスして、該当のアプリの詳細を見てみましょう。
無料ビデオ講座のお知らせ
Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。
