SinatraアプリをHerokuにデプロイしよう!

SinatraアプリをHerokuにデプロイしよう!

こんにちは、Mako(@makokamiya)です。

今回はSinatraで作ったwebアプリケーションをHerokuにデプロイする手順をまとめてみました!

「はじめてwebアプリケーションを作った」というくらい、超初心者向けに噛み砕いて書いています。

学習が進んでいる人は、記事の中で所々リンク付けている公式ドキュメントで寄り道をしながら読み進めていただけると理解が深まると思います。

はじめに

この記事の対象者

プログラミング初心者Sinatraでwebアプリケーションを初めて作った人
CODEBASEプログラミング教室卒業生
(この記事にそってデプロイができるようにサンプルアプリを用意しています。卒業生であればお気軽にご連絡ください。)

前提条件

言語:Ruby
フレームワーク:Sinatra
データベース:PostgreSQL
SinatraアプリケーションはPC内で問題なく動作する
Gitのインストール作成が済んでいる
Homebrewのインストールが済んでいる

Herokuの準備

Herokuとは

Herokuをわかりやすく説明すると、

webアプリケーションを、インターネット経由で誰でも見ることができるようにしてくれるサービスです。

Freeプランだと、ひとつのアカウントで550 時間/月(認証済アカウントでは1000時間)無料でアプロケーションを動かすことができます。(その他制限があります。)

Herokuアカウント作成

Herokuアカウントをお持ちでない方は、公式サイトからアカウントの作成を行ってください。

HerokuCLIインストール

公式を参考にHerokuCLIのインストール、ログインを行います。

Herokuコマンドラインインターフェイス(CLI)を使用すると、ターミナルから直接Herokuアプリを簡単に作成および管理できます。これはHerokuを使用する上で不可欠な部分です。

brew tap heroku/brew && brew install heroku

CLIのインストールを確認するには、heroku –versionコマンドを使用します。

heroku --version
# heroku/7.0.0 (darwin-x64) node-v8.0.0

Herokuログイン

CLIをインストールした後、heroku loginコマンドを実行します。ログインを完了するためにWebブラウザーに移動するためのキーを入力するように求められます。 CLIは自動的にログインします。

heroku login
# heroku: Press any key to open up the browser to login or q to exit
#  ›   Warning: If browser does not open, visit
#  ›   https://cli-auth.heroku.com/auth/browser/***
# heroku: Waiting for login...
# Logging in... done
# Logged in as me@example.com
  • Herokuアカウントの作成ができた!
  • HerokuCLIのインストールができた!
  • Herokuにログインができた!

ローカル開発環境と本番環境

まずは「ローカル開発環境」でやること「本番環境」でやることをイメージしましょう。

(この記事では、わかりやすいように、開発環境と本番環境とで作業順序が同じになるように書いています。実際には異なる場合もあります。)

ローカル開発環境(パソコンの中)

  1. アプリを用意する(コード書く)
  2. 環境変数を設定する
  3. PostgreSQLの中でデータベースを作る
  4. サーバーを立ち上げる(Ruby app.rb)
  5. ブラウザで確認する

本番環境(Heroku)

  1. アプリ用意する(Gitで管理しておく)
  2. 環境変数を設定する
  3. PostgreSQLの中でデータベースを作る
  4. サーバーを立ち上げる(Procfileの設定、Heroku create
  5. ブラウザで確認する

Sinatraアプリケーションの準備(ローカル開発環境)

それでは、まずはローカル開発環境できちんと動くSinatraアプリケーションを用意しましょう。

Rubyで作られたアプリケーションをデプロイするためには、Bundlerを使用する必要があります。

Bundlerの導入

Bundlerをわかりやすく説明すると、Gemをまとめて記述して一括でインストールしてくれるものです。

Bundlerをインストールします。

gem install bundler

※bundlerはRuby2.6から標準ライブラリとして追加されてました!

rbファイルの中でGemを読み込んでいる部分をコメントアウトします。

# gemをコメントアウトする
# require 'sinatra'
# require 'pg'
# require "fileutils"

# ライブラリの読み込み
require 'digest'  # digestの読み込み
require 'bundler' # bundlerの読み込み
Bundler.require  # Gemfileに書かれているライブラリを一括で読み込み

# 開発環境のみで使用
if development? #書き換える
  require 'sinatra/reloader'
  require 'pry'
end

Gemfileを作成し、先ほどコメントアウトしたGemを追加します。
requireではなくgemと書き換えます。

gem 'sinatra'
gem 'pg'
gem "fileutils"

# 開発環境だけ
group :development do
  gem 'sinatra-contrib'
  gem 'pry'
end

ちなみに、digestはGemではなくRubyの標準添付ライブラリなので、requireするだけで使用できます。

Gemfileに書いたGemをBundlerを使って一括でインストールします。

bundle install

Gemfile.lockが作成されます。これでBundlerの導入は完了です。

Sinatraが正常に起動できるか確かめてみましょう。

Bundlerで管理されたGemを使ってSinatraを起動するには、 bundle exec コマンドを使います。

bundle exec ruby app.rb
  • Bundlerの導入ができた!
  • 「bundle exec ruby app.rb」でSinatraが正常に動くことを確認した!

環境変数の設定

環境変数とはコンピュータさんが持っている、値を入れておく箱(変数)です。

アプリケーションのコードに直接書いてしまうと外部に漏れてしまう恐れがあるため、データベースの接続に必要な情報などを環境変数として定義しましょう。

例えば、
・ユーザー名  :user_name
・パスワード  :board_password
・データベース名:board
というデータベースがあります。

このPostgreSQLデータベースとアプリケーションを接続するための下記の記述を、

client = PG::connect(
    :host => "localhost",
    :user => "user_name",
    :password => "board_password",
    :dbname => "board"
)

以下のように書き換えましょう。

client = PG::connect(
    :host => ENV.fetch("DB_HOST", "localhost"),
    :user => ENV.fetch("DB_USER"),
    :password => ENV.fetch("DB_PASSWORD"),
    :dbname => ENV.fetch("DB_NAME")
)

ENV.fetch("環境変数名","デフォルト名") のように書きます。


環境変数の値が空の時、デフォルト名があればデフォルト名を参照し、なければエラーになります。

DB_PASSWORDDB_NAMEが環境変数の箱です。

このままでは変数の中身が空なので、Sinatraが起動できません。

では、ローカル開発環境で定義した変数に値を入れましょう。

ruby app.rbを実行するターミナルの画面下記のように実行します。

export DB_USER=user_name
export DB_PASSWORD=board_password
export DB_NAME=board

定義した値は、export -pで確認できます。

ここまでできたら、Sinatraが正常に起動できるか確かめておきしょう。

bundle exec ruby app.rb
  • 環境変数の設定ができた!
  • bundle exec ruby app.rb でSinatraが正常に動くことを確認した!

データベース構造の確認

ローカルの開発環境でデータベスを作成する時は、psqlコマンドを使ってPostgreSQLクライアントに入り、CREATE TABLEでテーブルを作成しましたよね?

Herokuのデータベースサーバーでも同じようにテーブルを作成します。

ローカル開発環境のデータベースサーバーで作った物と同じデータベース構造を作成しなければならないので、

ここでは、メモ帳などにtable作成時に使用したCREATE文をメモしておきましょう。例えば以下のような物です。

CREATE TABLE users (
  id SERIAL NOT NULL PRIMARY KEY ,
  name VARCHAR( 25 ) NOT NULL ,
  email VARCHAR( 50 ) NOT NULL ,
  password VARCHAR(512) NOT NULL ,
  UNIQUE (email)
);
  • データベース構造を確認して CREATE文をメモった!

Procfileを作る

Herokuにデプロイするために必要なファイルです。

Procfile」という名前のファイルを作成し、アプリを起動するためのコマンドを書いておきましょう。(※ProckfileのPは大文字です!)

web: bundle exec ruby app.rb

Gitで管理する

HerokuはGitを使ってデプロイします。

まずは「.gitignore」という名前のファイルを作って、デプロイ時にHerokuに挙げたくないものを書いておきましょう。

.DS_Store

次に、ここまでの変更内容をGitに保存しておきましょう。

git init
git add .
git commit -m "デプロイの準備"

これでHerokuにデプロイするためのアプリケーションの準備は完了です!

  • Prockfileを作成した!
  • .gitignoreファイルを作成した!
  • Git add とGit commitした!

Sinatraアプリケーションの準備(Heroku本番環境)

Heroku create

Herokuにアプリを置く空間を作成します。

heroku create アプリ名

heroku create の後ろにアプリ名をつけることができます。省略するとランダムな名前が自動的につけられ、後で変更できます。

heroku create コマンドによりherokuの環境にアプリを設置できる空間が作成されると同時に、heroku用のローカルリポジトリも作成されます。

git remote -v

# heroku	https://git.heroku.com/board-app.git (fetch)
# heroku	https://git.heroku.com/board-app.git (push)
# origin	git@github.com:user_name/board-app.git (fetch)
# origin	git@github.com:user_name/board-app.git (push)

本番環境のDB作成

次は、Heroku本番環境のデータベースにテーブルを作成しましょう。

PostgreSQLサーバー用の無料アドオンを追加します。

$ heroku addons:create heroku-postgresql:hobby-dev

HerokuのPostgreSQLデータベースに接続するには以下のコマンドを使用します。

heroku pg:psql

# --> Connecting to postgresql-reticulated-00000
# psql (00.0)
# SSL connection
# Type "help" for help.
# 以下のようになっていれば接続完了です。
# app_name::DATABASE=>

この画面になったら、先ほどメモしておいた CREATE TABLEを実行してテーブルを作成して行きましょう。

psqlを抜けるには、\qを使用します。

  • 「Heroku create アプリ名」でHerokuアプリ空間の作成ができた!
  • heroku pg:credentials:url」でHerokuのPostgreSQLのデータベース情報が確認できた!
  • 「heroku config:set 環境変数名=値」で環境変数の設定ができた!
  • 「heroku pg:psql」でHerokuのPostgreSQLに入り、データベーステーブルの作成ができた!

環境変数の設定(CUI)

Heroku(本番環境)の環境変数を設定しましょう。

DB_USERやDB_NAMEに入る値には、先ほどHeroku createをした時に自動で追加されたPostgreSQLデータベースのuserやdbnameを指定しなければいけません。

Herokuに自動で作成されたPostgreSQLデータベースのuserやdbnameを確認するには、heroku pg:credentials:urlを使用します

heroku pg:credentials:url

# Connection information for default credential.
# Connection info string:
# "dbname=sampledbname host=ec2-000-00-000-00.compute-1.amazonaws.com
# port=5432 user=sampleuser password=samplepassword sslmode=require"
# Connection URL:
# postgres://0000000000@ec2-000-00-000-00.compute-1.amazonaws.com:5432/000000000

dbname、user、passwordが確認できたら、以下のようにコマンドを叩いて環境変数を設定します。

ここでの設定はローカル開発環境でやったこ設定と似ていますが、書き方が少しだけ異なり、heroku config:set 環境変数名=値 のように書きます。

heroku config:set DB_USER=sampleuser
heroku config:set DB_PASSWORD=samplepassword
heroku config:set DB_NAME=sampledbname

Herokuデプロイ Heroku create

いよいよ、Herokuにデプロイします!

Herokuにデプロイするためのコマンドはgit push herokuを使います。

git push heroku

デプロイしたアプリをブラウザで開くには、

heroku open

うまく表示されましたか?

まとめ

お疲れ様でした!

この記事の流れとは違った挙動があれば、コメントをいただけると助かります!

読んでくれてありがとうございました◡̈

Special Thanks

今回この記事をまとめるにあたり、こちらの記事を参考にしました。
ありがとうございました!