Zenn
📚

[Ruby on Rails][初心者向け]herokuでサクサクデプロイ

2022/02/07に公開
Rails
Ruby
tech

はじめに

久しぶりにrailsを触ったのでrailsチュートリアルで復習しようと思って一章を始めたのですが、
あれ？思ってたより進まなくね？始めから厳しくね？！って思ったので、後で理解する方式でサクッとデプロイ出来る記事書きましょうってのが目的です。
色々な記事を参考にさせていただいて書いていますので被ってる内容も多いと思います、
自分用まとめみたいな感じですが初学者の方の参考になれば幸いです。



なるべくスッキリ進めていけるように説明は↓のような形で入れていきます！

説明

説明内容

前提条件

  • railsの環境構築が終わっていること
  • mac環境(windowsの方の参考になるようになるべく努力します)

環境

  • rails 5.1.6
  • ruby 2.6.6
  • git 2.30.1

ではやっていきましょう！

step1 とりあえずアプリ作る

なにはともあれアプリが必要ですからstep1では簡単にアプリを作っていきます

ターミナル
$rails new app_name #app_nameはアプリ名です
$cd app_name #rails newしたアプリのディレクトリに移動します
$rails scaffold blog title:string body:text #とりあえず丸写しでokです
$rails db:migrate #とりあえず丸写しでokです
$rails server #ローカルサーバーを起動します

ここまで入力して上記のような画像が表示されていればokです!

説明

rails newあたりは環境構築で試したと思うので、scaffoldから説明していきます

rails scaffold blog title:string body:text

  • scaffold
    railsに備わっているコマンドで、簡単にMVC(Model ,View ,Controller)の雛形を用意してくれるというrails便利機能の一つです。今回のように試しでアプリを用意したい時などに重宝します
  • blog
    blogという関連付けされたMVCが作成されます。
  • title:string
    データベースのカラム名とデータ型です
  • body:text
    データベースのカラム名とデータ型です

rails db:migrate

  • マイグレーションファイルをデータベースを作成や変更内容の反映します
  • 今回はscaffoldで自動で作成されています


congif/routesでルーティングを設定します

config/routes
Rails.application.routes.draw do
  resources :blogs
  root 'blogs#index'
end
説明

ルーティングを設定するとは

urlを解析して適切なコントローラーのアクションに振り分けます、
つまりどういうことかというとこの注文番号の注文が来たらこの商品を返しますよーと言うようなルールを設定するファイルです(ざっくりw)

resouces

基本的なルーティングを自動生成する便利機能です。今回の場合scaffoldで作成したblog機能にルーティングを設定しています。
使用しなくても設定できますが機能が増えてくるとルートの記述も増え、煩雑になってしまいます、
スッキリしたコードを実現するために使う機会は多い機能です。

root

自分のアプリのトップページになるアクションを設定しています、つまり最初に訪れるページの設定です


次にgemfileに変更を加えていきます

gemfile
group :development, :test do
  gem 'sqlite3',  '1.3.13'#←上の方に書いてある'sqlite3'を消して、ここに記述してださい
  gem 'byebug', '9.0.6', platform: :mri
 #gem 'capybara', '~> 2.13'←コメントアウトでok
 #gem 'selenium-webdriver'←コメントアウトでok
end

group :development do
  gem 'web-console', '3.5.1'
  gem 'listen', '3.1.5'
  gem 'spring', '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

#=======追加=========
group :production do
  gem 'pg','0.20.0'
end
#====================
説明

まずはgemfileのグループについてです、

group :development, :test do ~ end

テストするときに使うgemのグループです

group :development do ~ end

開発環境で使うgemのグループです

group :production do ~ end

本番環境で使うgemのグループです

なぜグループ分けするのかというと、
開発・テスト・稼働などそれぞれの環境によって使うgem（機能）は異なります、環境ごとに切り離したい機能や使用したい機能があるのでグループ分けを行い切り替えて使用する必要があります。

今回の実装にあたってテストグループにはデータベース：SQlite3のgemを使用し、
本番グループにはデータベース：PostgreSQL(gem 'pg')のgemを使用しています。
これはHerokuとRailsでサポートしているデータベースが異なるためです、前述の通り異なる環境で使用するためにグループ分けを行っています。

railsのデータベース: SQlite3

herokuのデータベース: PostgreSQL


gemfileに変更を加えたのでbundle installしましょう

ターミナル
bundle install --without production
説明

without productionとは

本番環境でgemをインストールをしないオプションです(インストールされてしまうとエラーが発生します)
※一度このコマンドを実行すれば記録されているので次回からbundle installだけで大丈夫です。

↓もし本番環境でbundle installしてしまった場合の参考に
https://kajindowsxp.com/unable-bundle-install/


config/database.ymlのセッティングを行います

config/database.yml
production:
  <<: *default
  adapter: postgresql
  encoding: unicode
  pool: 5
#productionの下はインデント(半角スペース２個)
.ymlの説明

スペースに注意する理由

ymlファイルはインデント(スペース２回)を使ってデータの階層構造を表現しているからです。つまり、今回記述したコードだと下記のような意味になります。

config/database.yml
production:# ←productionという括り
  <<: *default
  adapter: postgresql　#インデントでproductionに含まれる
  encoding: unicode　　　　　#インデントでproductionに含まれる
  pool: 5　　　　　　　　　　　　　　　　　　　　　　　　　　#インデントでproductionに含まれる

このように正しくインデントが入っていないとエラーになる上に見つけ辛いので注意が必要です。

記述内容の説明

adapter: postgresql

postgreSQLのデータベースに接続する

encoding: unicode

unicodeという文字コードを使用するという設定です。
このunicodeというのは色々な国の文字に番号が割り当てられた表のようなものです、PCはその表を使って日本語などを表現しています

pool: 5

poolとはデータベースへ接続した時の接続状態を保存しておく役割をしています、接続数はデフォルトで5になります

※参考記事
https://qiita.com/redrabbit1104/items/94e867941b9046feef7d


step2 Gitの準備

step2ではGitというバージョン管理システムを実装することに加えてGitHubの登録も行います。それではいきます！


Gitの登録



Gitの説明

Gitとは分散型バージョン管理システムと言われているシステムのことです

いきなりそんなこと言われても、
「オイ！何を言ってるか分からんぞ！ムッキーっ！！」←(過去の自分)
ってなると思うので簡単に説明します、フワッとだけ理解していただければ

このバージョン管理というのは、変更履歴を記録して

  • どの過去に問題があったか特定したり
  • 問題のなかった過去に遡ったり
  • どこに変更があったかを確認したり

などなど他にも色々と機能はあります、チームで開発をしていく上で無くてはならないシステムと言えるでしょう。なのですが、まあ今は変更内容を記録してるドラえもんのタイムマシンみたいなものだと思っておいてください(わかりにくいw)


そして分散型と名のついているからには集中型というのもあります
どういう違いがあるのかというと、

  • リポジトリという領域ををマシン上に作成して作業を行うのか
  • 特定のリポジトリ領域にアクセスして作業を行うのか

といったような違いがありますが分散型が主流らしいです。集中型に関して興味のある方は調べてみてください。



windowsの方はコチラでインストールしてください↓
https://gitforwindows.org/


インストールされているかバージョンを確認して確かめましょう

ターミナル
$git --version 
git version 2.30.1


Gitでユーザー登録を行っていきます

ターミナル
$git config --global user.name ユーザー名
$git config --global user.email メールアドレス


GitHubの登録

GitHubの説明

GitHubとは

Gitを利用してwebにソースコードを保存しておいたり公開したりできるサービスです。

Gitはコマンドライン上で使用するツールですが、GitHubはGitを使って保存したコードを確認したり、コメント等を行えるなど、webページ上で使用するサービスです。(重要な機能は他にもある)
どこを・いつ・誰が変更したかなど、一目で確認できることからドラえもんのタイムテレビみたいなものだと覚えておくといいでしょう(だからわかりにくい)



GitHubのページはコチラ
https://github.com/


sign upをクリックして、ユーザー登録していきましょう。



メールアドレスを入力してください


ユーザーネームとパスワードも


メールの通知を受け取るならyを入力しましょう、ロボットではないことを証明してください


届いたメールに記載されたパスコードを入力したら登録は完了です！

リポジトリを作成していきましょう


リポジトリの説明

リポジトリとは

コードの保管や変更履歴を記録しておく場所のことです、作業スペースなんかを想像するとイメージしやすいかもしれません。

そしてリポジトリにはローカルリポジトリとリモートリポジトリの二つがあります。

リモートリポジトリとは

ネットワーク上のサーバーなどで管理されている大元のファイル

ローカルリポジトリとは

自分のPCなどマシン上で管理している作成または複製されたファイル
といったようにファイルを扱う場所に違いがあります。

リポジトリを使った大まかな流れはこうです↓

  1. リモートリポジトリをローカルリポジトリにクローンする(開発中のアプリを自分のPCにコピー)
  2. ローカルリポジトリで機能追加や修正を行いリモートリポジトリにプッシュする
  3. リモートリポジトリにある開発中のアプリに変更した部分を合流させる

といったようにサーバーとPCで場所分けて作業を行います。
自分は最初分かりにくかったので自宅で作業してから会社に提出するようなイメージを持っていました。※ブランチやプルリクなどの説明は割愛しています


ローカルリポジトリを作成

※アプリのディレクトリに移動してからコマンドを入力してください

ターミナル
$git init
#現在のディレクトリでリポジトリを作成します


ファイルをインデックスに追加

ターミナル
$git add . <-すべてのファイルをインデックスに追加
説明

インデックスとは

ローカルリポジトリに追加する前に一時的に変更内容を保存しておく領域のことを指します。
※このインデックスにファイルを追加していないとローカルリポジトリにコミットできないので注意してください。


インデックスの内容をローカルリポジトリにコミットします

ターミナル
$git commit -m "コミットメッセージ"
説明

commitとは

追加・変更したファイルをGitに登録するためのコマンドです
先ほどインデックスファイルに追加したファイルがローカルリポジトリにコミットされます。

-m

commitのオプションで、メッセージを追加できます
後からコミット内容を確認する時のためにもメッセージは残しておきましょう




コミットして、このように表示されていればOKです

リモートリポジトリを作成


Create repositoryをクリック


リポジトリ名を入力してCreate repositoryをクリック



このような画面になれば作成完了です。画像のようにURLをコピーしてください

リモートリポジトリとローカルリポジトリを接続していきます

ターミナル
$ git remote add origin リモートリポジトリのURL

先程コピーしたURLをoriginの後に貼り付けてください、もしくは画面に同じコマンドが載っているのでそちらを丸々コピーしていただいても大丈夫です。

URLの場所が分からない場合

もし画面を移動してしまってURLの場所が分からないって方は、
Repositories -> 自分のリポジトリ -> Codeの順にクリックしたら下の画像のようにURLが出てきます


リモートリポジトリにコミット内容をpushします

ターミナル
$ git push -u origin master
# ２回目から-u origin masterは不要

このように表示されていればOKです
これでリモートリポジトリにファイルを保存することが出来ました。お疲れ様です

step3 Herokuの準備

step3ではHerokuの登録とHeroku CLIをインストールしていきます

Herokuの登録

Herokuとは

HerokuとはPaaSと呼ばれるサービスで、webアプリを公開するために必要なインフラ環境を貸してくれるサービスです。

PaaSとは

実はwebアプリを作成してもサービスを公開するとなれば、インフラ環境がなければ公開できません。
苦労して作ったのにデーターベースやらサーバーやらを用意するとなると更に大変な苦労が伴います。
そのような環境面の問題を解決してくれるのがPaaSというサービスで、先ほど挙げたデータベースやサーバーなどプログラミング言語の実行に必要な環境をまとめて貸してくれます。
このサービスのおかげで開発者はインフラ構築を容易に行えるので開発に専念できるようになります

そう言われても、なんとなく小難しいと思うので一言にまとめます

簡単にwebアプリを公開出来るサービスです!

（ひどいwww）



HerokuのURLコチラ↓
https://signup.heroku.com/login

ユーザー情報を入力


ユーザー情報を入力してください、RoleはHobbyistでいいでしょう。

CREATE FREE ACCOUNTクリックしたらメールが届きますので、記載されているURLをクリックしてパスワードを設定したら登録完了です

Heroku CLIのインストール

CLIの説明

CLIとは

Command Line Interface:コマンドラインインターフェース の略称で文字だけでPCを操作するためのシステムです、コマンドプロントやターミナルがCLIにあたります。

一方でマウスやカーソルを使って直感的に操作できるシステムのことを GUI
Graphical User Interface：グラフィカルユーザーインターフェースと呼びます



Heroku CLIのURL
https://devcenter.heroku.com/articles/heroku-cli

※windowsの方はここを参考にしてください
https://note.com/on_bass/n/n0495484a2b2b


ターミナル
$brew tap heroku/brew && brew install heroku

コマンドをコピーしてターミナルで実行してください

ターミナル
$heroku --version
heroku/7.59.2 darwin-x64 node-v12.21.0

インストールされているか確認してみましょう、バージョンが表示されていればOKです

Herokuにログインします(２通りあるのでお好きな方で)

1.ブラウザでログイン

ターミナル
$heroku login

上記のコマンドを入力、実行してください

ターミナル
heroku: Press any key to open up the browser to login or q to exit:

と表示されると思います、q以外のキーを打てば下記のようにログイン画面がwebで立ち上がります

webでログインしたら完了です。


2.ターミナルでログイン

ターミナル
$heroku login --interactive
ターミナル
Enter your Heroku credentials:
Email: hogehoge@example.com (メールアドレス)
Password: ********** (パスワード)
Logged in as hogehoge@example.com

interactiveオプションでターミナルからログインできます
以上でHerokuの準備は完了です。

step4 デプロイ

step4ではデプロイを行っていきます。あと少しです頑張りましょう！


アプリとHerokuを連携させます

ターミナル
$heroku create アプリ名とか好きな名前(アプリ名はurlに入る)

同じ名前が使われている場合はこのように出るので、変更しましょう


Herokuにデプロイしていきます

ターミナル
$git push heroku master


エラーが表示されていなければ大丈夫です

※自分がpushした時はFailed to install gems via Bundler.とエラーが出たので解決法を下記に書いておきます。

Failed to install gems via Bundler.

自分の場合以下のようにエラーが発生しました。

このエラーはherokuのbundlerとローカルのbundlerのバージョンの違いによって起きています。


エラー文にも書いてありますが

ターミナル
$bundle lock --add-platform x86_64-linux

と入力するとGemfile.lockの内容が書き換わります。これでpushが通るはず

$git add Gemfile
$git commit -m "[Fix]Gefile.lock"
$git push heroku master

忘れずにcommitしてpushしてください


本番環境でマイグレーション

ターミナル
$heroku run rails db:migrate
#heroku runでheroku上でrailsコマンドが実行できます


このようにマイグレーションが無事終わればデプロイ完了です！


それでは実際にアプリを確認していきましょう、下記のコマンドを入力すればブラウザが開きます(URLを直接打ってもいいです)

ターミナル
$heroku open



このように表示されていればOKです!
これで、あなたのアプリが世に公開されました！おめでとうございます！

アプリを更新した場合

ターミナル
$git add ファイル名
$git commit -m "コミットメッセージ"
$git push heroku master
#Gitに保存した内容がHerokuにデプロイされています。更新した際はpush heroku masterしましょう

上記に加えてデータベースのテーブルなどを変更した場合

ターミナル
heroku run rails db:migrate

以上です！お疲れ様でした！


おわり

Discussion

ログインするとコメントできます