Rails+MySQLのWebアプリケーションを作成し、Herokuに公開する

前提

• Herokuのアカウントを持っている
• Herokuのアカウントにクレジットカード情報が登録済み
• Heroku CLI がインストール済み
  • (Heroku CLI のインストールは以下のコマンドを実行するだけです)
    • 参考：https://devcenter.heroku.com/articles/heroku-cli

$ brew tap heroku/brew && brew install heroku
$ heroku -v

手順

Railsアプリケーション作成

• GitHubにプッシュするまでは、IDEではないターミナルから実行します。
  
  (IDE関連ファイルのプッシュを防ぐため)
• Herokuに公開する場合、アプリ名にアンダースコアは入れられないため、注意が必要です。

$ mkdir app-name && cd $_
$ rails _6.0.2.1_ new -d mysql -T .

GitHubにプッシュする

• GitHub上でリモートリポジトリを作成しておきます。
• git init は rails new 時に自動実行されていますので不要です。

$ git add .
$ git commit -m 'first commit'
$ git remote add origin [e-mail]:user/repo.git
$ git push -u origin master

.gitignore に追記する

• ここからはIDEを使用できます。
• /.idea/* を追記します。JetBrains社IDEの関連ファイルをバージョン管理対象から除外したいだけなので、使ってない方は追記不要です。

.gitignore

/.idea/*

ローカル環境DB作成

$ rake db:create

ローカル環境動作確認

$ rails s

• localhost:3000 にアクセスして、Yay! You’re on Rails! を確認します。

config/application.rb を編集する

• rails g 時の自動生成を制御するようにします。

config/application.rb

module AppName
  class Application < Rails::Application
    config.load_defaults 6.0

    # 以下を追記
    config.generators do |g|
      g.assets false
      g.helper false
      g.jbuilder false
      g.test_framework :rspec,
                       # テストデータベースにレコードを作成するファイルの作成をスキップ
                       fixtures: false,
                       # ビュースペックの作成をスキップ(UIのテストはフィーチャスペックに任せる)
                       view_specs: false,
                       # ヘルパースペックの作成をスキップ
                       helper_specs: false,
                       # ルーティングスペックの作成をスキップ
                       routing_specs: false,
                       # コントローラースペックの作成をスキップ
                       controller_specs: false,
                       # リクエストスペックの作成をスキップ
                       request_specs: false
    end
  end
end

Haml導入

Gemfile

gem 'haml-rails'

$ bundle install

app/views/layouts/application.html.haml

!!!
%html
  %head
    %title
      = content_for?(:head_title) ? yield(:head_title) : 'AppName'
    = csrf_meta_tags
    = csp_meta_tag
    %meta{charset: 'utf-8'}/
    %meta{'http-equiv': 'X-UA-Compatible', content: 'IE=edge'}/
    %meta{name: 'viewport', content: 'width=device-width, initial-scale=1'}/
    %meta{'http-equiv': 'content-language', content: 'ja'}/
    /[if lt IE 9]
      %script{src: 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js'}
      %script{src: 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js'}
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

  %body
    = yield

app/views/layouts/mailer.html.haml

!!!
%html
  %head
    %meta{:content => "text/html; charset=utf-8", "http-equiv" => "Content-Type"}/
    :css
    /* Email styles need to be inline */
  %body
    = yield

app/views/layouts/mailer.text.haml

= yield

静的なページを作成

• 静的ページではなくて、Scaffoldなどでもいいです。
• 下述の「トップページのルーティング設定」をするために、なんでもいいので何かページを一つ作る必要があります。

$ rails g controller StaticPages home

config/routes.rb を編集する

• Herokuに公開する場合は、トップページのルーティング設定が必須となります。
• routes.rb の最下部に記述します。

config/routes.rb

Rails.application.routes.draw do
  get 'static_pages/home'

  root to: 'static_pages#home' # この行を追記
end

GitHubにプッシュする

• この先はHeroku側の作業になるため、ここまでの変更をコミット&プッシュします。

Herokuログイン

$ heroku login
heroku: Press any key to open up the browser to login or q to exit: 

(ここでq以外のキーを押下するとブラウザが開くので、ブラウザに表示されたボタンをクリックしてログインします。)

Opening browser to https://cli-auth.heroku.com/auth/browser/xxxxxxxxxxxxxxxxxx
Logging in... done
Logged in as [e-mail]

Herokuアプリケーション作成

$ heroku create アプリ名

cleardb アドオン追加

$ heroku addons:add cleardb

heroku-postgresql アドオン削除

$ heroku addons:destroy heroku-postgresql -a アプリ名

Heroku環境変数設定

• まず環境変数 CLEARDB_DATABASE_URL の値を確認します。

$ heroku config | grep CLEARDB_DATABASE_URL
CLEARDB_DATABASE_URL: mysql://ユーザー名:パスワード@ホスト名.cleardb.net/データベース名?reconnect=true

• 表示された文字列から抜き出して、それぞれ以下のように環境変数に設定します。
• DATABASE_URL には CLEARDB_DATABASE_URL の値の mysql を mysql2 に置換したものを設定します。

$ heroku config:add DB_NAME="データベース名"
$ heroku config:add DB_USERNAME="ユーザー名"
$ heroku config:add DB_PASSWORD="パスワード"
$ heroku config:add DB_HOSTNAME="ホスト名"
$ heroku config:set DATABASE_URL='mysql2://ユーザー名:パスワード@ホスト名.cleardb.net/データベース名?reconnect=true'

• ポート番号も設定します。

$ heroku config:add DB_PORT="3306"

デプロイ

$ git push heroku master
$ heroku run rake db:migrate

• credentials.yml.enc を使用した場合は、以下のコマンドを実行する必要があります。

$ heroku config:set RAILS_MASTER_KEY=`cat config/master.key`

動作確認

• https://アプリ名.herokuapp.com/ にアクセスして確認します。
• または以下のコマンドを実行します。

$ heroku open

改修した場合

• マイグレーションが関わらないような修正ならば、git push heroku master のみを実行すればOKです。
• マイグレーションの実行が必要な場合は、heroku run rake db:migrate も実行します。

$ git push heroku master
$ heroku run rake db:migrate # マイグレーションの実行が必要な場合のみ

参考

• 【初心者向け】railsアプリをherokuを使って確実にデプロイする方法【決定版】
• RailsDBをMySQLに変更してHerokuでデプロイまでする手順
• HerokuにRailsアプリをデプロイする