Rails6 ローカルで頑張って作ったwebアプリをHerokuでデプロイした話

11951 ワード
Heroku HerokuCLI Rails6 Rails Web Rails テキストリンク

目的

  • ローカルで作ったwebアプリを途中からHerokuでデプロイした話をまとめる

詳細情報

  • ローカル環境

    1. OS: macOS High Sierra 10.13.6
    2. 機種: MacBook Pro (15-inch, Early 2011)
    3. CPU: Intel(R) Core(TM) i7-2675QM CPU @ 2.20GHz

  • webアプリ環境

    1. DB: MySQL
    2. 使用フレームワーク: Ruby on Rails
    3. mysql: Ver 8.0.18 for osx10.13 on x86_64
    4. ruby: 2.5.0p0 (2017-12-25 revision 61468) [x86_64-darwin17]

  • Gemfileの記載

    source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.5.0'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use sqlite3 as the database for Active Record
# gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Active Storage variant
# gem 'image_processing', '~> 1.2'
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false
group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end
group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
gem 'mysql2'

前提条件

  • Herokuにはアカウント登録済みでクレジットカードの登録も完了している。(Heroku常でアプリは作成していなくて良い)
  • ローカルでコマンド$ rails sを実行してブラウザから確認することのできる何かしらのwebアプリがある。

webアプリを途中からHerokuでデプロイするときのイメージ

  • 今までGithubで管理していた時はpush先はGithubのリポジトリのみだった。
  • Herokuでデプロイする様になるとpush先がGithubのリポジトリだけではなくHerokuのリポジトリがpush先に追加される。
  • Herokuでデプロイする方法はネット上に多くあるが$ git init直後に$ rails newしているものが多く筆者は混乱した。(最初からではなく途中からでもHerokuにpushできることを伝えたい)
  • 今までのpushのイメージとHerokuでデプロイする様になる時のpushのイメージを記載する。

  • 今までのpush

  • Herokuでデプロイする時のpush

実際の手順概要

  1. ツールのインストール
  2. Herokuでアプリを作成
  3. DBの設定
  4. Herokuにソースをpush
  5. マイグレート
  6. 最終確認

実際の手順詳細

  1. ツールのインストールとログイン

    1. 下記コマンドを実行してToolbelt(Herokuコマンドを実行できる様にするもの)をインストールする。

      $ brew install heroku/brew/heroku

    2. 下記コマンドを実行してHeroku CLI(Herokuアプリをターミナルから直接作成および管理するのが簡単になるもの)をインストールする。

      $ brew tap heroku/brew && brew install heroku

    3. 下記コマンドを実行してHerokuにログインする。(そのままコマンドでパスワードを入力する方式とブラウザが開く方式がある。筆者は後者だった)

      $ heroku login

  2. Herokuでアプリを作成

    1. 下記コマンドを実行してローカルのwebアプリ名フォルダに移動する。

      $ cd ~/[webアプリのディレクトリ(appとかが見えてる階層)]

    2. 下記コマンドを実行してHeroku側でアプリを作成する。任意のアプリ名はローカルのものと一致してなくてもOKである。使用できない文字列が含まれているとエラーがすぐ出るのでGoogleなどで翻訳して対応しよう。(>の後ろは正常に新しいアプリが作成できたときの出力)

      $ heroku apps:create [任意のアプリ名]
>Creating ⬢ study-record... done
>https://[アプリ名].herokuapp.com/ | https://git.heroku.com/[アプリ名].git

    3. 下記コマンドを実行してローカルのwebアプリのプッシュ先にHerokuが追加されたことを確認する。

      $ git remote -v
>heroku  https://git.heroku.com/[アプリ名].git (fetch)
>heroku  https://git.heroku.com/[アプリ名].git (push)
>origin  [email protected]:miriwo0104/[今までpushしてたGithubのリポジトリ名].git (fetch)
>origin  [email protected]:miriwo0104/[今までpushしてたGithubのリポジトリ名].git (push)

  3. DBの設定

    1. 下記コマンドを実行してHeroku用のDBを追加する

      $ heroku addons:create cleardb:ignite
>Created cleardb-fitted-21162 as CLEARDB_DATABASE_URL
>Use heroku addons:docs cleardb to view documentation

    2. 前述のコマンドで下記のエラーが出た人はHerokuでのクレジットカードの認証ができていない。

      Please verify your account to install this add-on plan (please enter a credit card) For more information, see
▸    https://devcenter.heroku.com/categories/billing Verify now at https://heroku.com/verify

    3. 下記コマンドを実行して設定されている内容を出力する。CLEARDB_DATABASE_URLから後ろはみなさんの環境に合わせて変化するので注意。

      $ heroku config
>=== study-record Config Vars
>CLEARDB_DATABASE_URL: mysql://b60b5336b9085d:[email protected]/heroku_f69d4fc63e3b43f?reconnect=true

    4. 前述のコマンド結果のCLEARDB_DATABASE_URLに続く出力に注目する。下記に書かれたフォーマットで出力されるので#がついた行を参考に[username][password][hostname][db_name]が指す値がなんなのか見ておく。下記は筆者の環境のものであるためみなさんがそのまま設定してもダメである。自分の値を取得して設定しよう。

       mysql://b60b5336b9085d:[email protected]/heroku_f69d4fc63e3b43f?reconnect=true
#mysql://[username]    :[password]@[hostname]                    /[db_name]             ?reconnect=true

    5. 下記コマンド群を実行して先ほど取得した[username][password][hostname][db_name]を順に設定してゆく。

      $ heroku config:add DB_NAME="heroku_f69d4fc63e3b43f"
>Setting DB_NAME and restarting ⬢ study-record... done, v5
>DB_NAME: heroku_f69d4fc63e3b43f

$ heroku config:add 
>DB_USERNAME="b60b5336b9085d"
>Setting DB_USERNAME and restarting ⬢ study-record... done, v6
>DB_USERNAME: b60b5336b9085d

$ heroku config:add DB_PASSWORD="XXXXXXXX"
>Setting DB_PASSWORD and restarting ⬢ study-record... done, v7
>DB_PASSWORD: XXXXXXXX

$ heroku config:add DB_HOSTNAME="us-cdbr-iron-east-05.cleardb.net"
>Setting DB_HOSTNAME and restarting ⬢ study-record... done, v8
>DB_HOSTNAME: us-cdbr-iron-east-05.cleardb.net

$ heroku config:add DB_PORT="3306"
>Setting DB_PORT and restarting ⬢ study-record... done, v9
>DB_PORT: 3306

    6. Gemfileにgem 'mysql2'の記載がある方は下記コマンドを実行する。URLのmysqlの記載をmysql2に修正しただけである。

      $ heroku config:set DATABASE_URL='mysql2://b60b5336b9085d:[email protected]/heroku_f69d4fc63e3b43f?reconnect=true'

  4. Herokuにソースをpush

    1. 下記コマンドを実行してHerokuにpushを行う

      $ git push heroku master

  5. マイグレート

    1. 下記コマンドを実行してHeroku側のDBをマイグレートする。

      $ heroku run rake db:migrate

  6. 最終確認

    1. 下記コマンドを実行して出力されたURL(Web URL:の後ろに書かれたもの)へブラウザからアクセスし正常にサービスが世に放たれているか確認する。

      $ heroku apps:info
>=== study-record
>Addons:         cleardb:ignite
>Auto Cert Mgmt: false
>Dynos:          web: 1
>Git URL:        https://git.heroku.com/[アプリ名].git
>Owner:          [email protected]
>Region:         us
>Repo Size:      454 KB
>Slug Size:      51 MB
>Stack:          heroku-18
>Web URL:        https://[アプリ名].herokuapp.com/