はじめに

Ruby on Railsを用いて開発したWebアプリケーションをRenderを用いて無料でデプロイする方法を記載します。

Renderを用いる際の注意点

Renderには無料枠と有料枠の2種類が存在します。
有料枠に比べ無料枠はできることに制限があるので、まずはそれを知ることから。

①Webアプリケーションに関する制限

無料プランでは、非アクティブ状態が 15 分間続くと自動的にアプリがスリープします。
新しいリクエストが来るとスリープが解除されますが、最大30秒の応答遅延が発生する可能性があります。
無料プランで使用できるのは、 1か月あたり750時間の実行時間と、100GBまでのデータ転送です。100GBを超える場合、0.10 USD/GBが課金されます。
無料枠を超えると、サービスは自動的に中断され、有料プランにアップグレードされるか、無料枠がリセットされるまで、トラフィックを処理できなくなります。無料利用は毎月1日にリセットされます。
通常、無料の Web サービスのビルドは、有料サービスのビルドよりも遅くなります。ビルドとデプロイの時間を短縮するには、有料プランにアップグレードしてください。

②データベースに関する制限

Renderで推奨されるデータベースはPostgreSQLで、初期状態ではMySQLを使用できません。
無料でデータベースを作成し利用することができますが、作成後90日でアクセスできなくなります。
アクセスの停止から14 日間の猶予期間がありますが、この期間をすぎるとデータベースはデータと共に削除されます。
無料のデータベースは、一度に１つだけアクティブにすることができます。

上記を理解した上でデプロイ作業を行いましょう。

デプロイの流れ

1.PostgreSQLをインストール

以下コマンドをターミナルで実行

% brew install postgresql

ターミナルでの処理が止まったら、以下のコマンドを実行して正しくインストールできていることを確認しましょう。

% psql --version
psql (PostgreSQL) 14.5 (Homebrew)のように、バージョンが表示されれば正常です。

2.Gemの追加

本番環境（Renderでの実行時）にPostgreSQLを使用できるようGemを追加します。
Gemfileの「末尾」に以下の記述を追加しましょう。

# Gemfile内
（省略）

group :production do
  gem 'pg'
end

# ターミナル
1
% bundle install

3.デプロイ用の設定ファイルを準備する

Render用の設定ファイルを追加します。
以下の手順で作業を行いましょう。

① binフォルダに、render-build.shという名称でファイルを新規作成する。
② 作成したファイルに、以下の記述を追加する。

bin/render-build.sh内
#!/usr/bin/env bash
# exit on error
set -o errexit

bundle install
bundle exec rake assets:precompile
bundle exec rake assets:clean
bundle exec rake db:migrate

4.データベースの設定を行う

開発ではデータベースとしてMySQLのみを使用してきました。
本番環境ではPostgreSQLを使用するため、以下のようにdatabase.ymlの設定を変更しましょう。
なお、以下のコードでは設定内容がわかりやすいよう、元のコメントは削除しています。

# config/database.yml内
default: &default
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

development:
  <<: *default
  adapter: mysql2
  username: root
  password:
  host: localhost
  database: ajax_app_development

test:
  <<: *default
  adapter: mysql2
  username: root
  password:
  host: localhost
  database: ajax_app_test

production:
  <<: *default
  adapter: postgresql
  url: <%= ENV['DATABASE_URL'] %>

このように変更することで、開発環境およびテスト環境ではMySQLが、本番環境ではPostgreSQLが使用されるようになります。

5.Gemfile.lockの設定を変更しよう

macOS上で開発したアプリケーションを、Linuxなど別のOSで動作しているサーバーにデプロイする場合は、設定の追加が必要な場合があります。
下のコマンドを実行して、Gemfile.lockに設定を追加しましょう。

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

6.秘密情報管理用ファイルを作成しよう

通常、Railsで新規アプリケーションを作成すると秘密情報を管理するための以下２つのファイルが作成されます。

credentials.yml.enc
master.key

しかし、ダウンロードしたアプリケーションにはこれらのファイルが含まれないため、デプロイ前に新規作成が必要です。

以下の手順で追加を行いましょう。

まずは、ターミナルのアプリケーションディレクトリにて、下記のコマンドを入力しましょう。

# ターミナル(アプリディレクトリ)
% EDITOR="vi" bin/rails credentials:edit

秘密情報管理用のファイルがない状態でこのコマンドを実行すると、新たにファイルが作成されます。

以下の画面がされれば正しく作成されています。

# aws:
#   access_key_id: 123
#   secret_access_key: 345

# Used as the base secret for all MessageVerifiers in Rails, including the one protecting cookies.
secret_key_base: 7227c525f70e7dca95b6e29f99de70394fabae582ccbeb56615ab62a2f626add11f10dc30024f9e319f90c8b5e00e2c61c9bc0743767c7397d70722d574f0152
~                                                                                                                                
~                                                                                                                                
~                                                                                                                                
~                                                                                                                                
~                                                                                                                                
~                                                                                                                                
~                                                                                                                                
~                                                                                                                                
~                                                                                                                                
~                                                                                                                                
~                                                                                                                                
~                                                                                                                                
~                                                                                                                                
~                                                                                                                                
~                                                                                                                                
~                                                                                                                                
"/var/folders/44/2fvb80dx4kn39st549ybxbrw0000gn/T/35149.credentials.yml" 6L, 303C

確認後は、「escキー」→「:」→「q」と入力し、「enterキー」を押してファイルを閉じましょう。

GitHubにコードをプッシュしよう

Renderでデプロイを行う場合、あらかじめGitHubにコードをプッシュしておく必要があります。
GitHub Desktopを使用して、アプリをGitHubにプッシュしましょう。

Renderでアプリを作成しよう

Renderの公式サイトで自身のアカウントを生成する。

トップページの「GET STARTED FOR FREE」をクリック
サインアップの方法を選択する必要があるので、「GitHub」をクリック
確認を求められるので、「Authorize Render」をクリック
「COMPLETE SIGN UP」をクリックして画面を進め
ここで表示されているアドレスに認証メールが送信されています。
認証メールを探して、本文内に認証用のURLが表示されているのでクリック
Renderの画面に遷移すれば問題ない

1.Renderでデータベースを作成しよう

ヘッダーに表示されている「New +」のボタンをクリック
「PostgreSQL」を選択
作成するデータベースの名称を指定します。（分かりやすいよう「アプリ名_production」と入力。）
入力できたら「Create Database」をクリック
データベースの作成が始まり、「Status」に「Creating」と表示されます
Statusが「Available」に変わったらデータベースの作成は完了

画面を下にスクロールすると「Internal Database URL」という欄があります。
後ほど、ここに記載されているURLが必要になるので、下図のようにアイコンをクリックしてクリップボードにコピーしましょう。

2.Renderでアプリを新規作成

ヘッダーにある「New +」のボタンをクリック
「Web　service」をクリック
GitHubのアカウントと連携させるため、「Connect accout」と書かれた文字をクリック
All repositoriesを選択して、Installをクリック
リストの中からデプロイするアプリケーションを探し、その右にある「Connect」のボタンをクリック
Name欄にアプリケーションの名称を入力
アプリのデプロイや起動時のコマンドを入力します。
以下２か所の欄を編集します。初期状態で入力されているコマンドを削除して、以下の内容を入力しましょう。
①Build Command欄　　→　　./bin/render-build.sh
②Start Command欄　　→　　bundle exec puma -C config/puma.rb
画面をスクロールすると、「Advanced」という文字が書かれているのでクリック
これから環境変数の追加を行います。
「Add Environment Variable」をクリック
これから２つの環境変数を設定します。
まず１つ目は、マスターキーの設定です。以下のように２つの欄に入力を行いましょう。
① 左側に、「RAILS_MASTER_KEY」と入力します。
② 右側にアプリケーションのマスターキーを入力します。マスターキーは、ローカルのアプリケーション内にあります。VSCodeでアプリケーションを表示させ、configフォルダにある「master.key」ファイルの内容をコピペします。
２つ目は、データベースURLの設定です。
まず、環境変数の入力欄を追加するため、「Add Environment Variable」のボタンをクリック
以下のように２つの欄に入力を行いましょう。
① 左側に「DATABASE_URL」と入力します。
② 右側に、先ほどデータベース作成時にコピーした「Internal Database URL」の内容をコピペします。
その他Basic認証やPAYJPなど使用している環境変数があれば、同様に追加する
後から環境変数を追加したい場合は、renderのダッシュボード欄のメニュー欄にあるEnvironmentで追加し、Githubでコミットする。
画面の最下部にある「Create Web Service」のボタンをクリック
ターミナルが表示され、デプロイ作業が開始されます
デプロイが完了すると、緑色のアイコンで「Live」(画面上部)と表示され、ターミナルに「Puma starting in single mode...」という文字が見えます。
画面上部のURLからアプリに接続し、正常に動かすことができるか確認

データベースを直接操作する方法

1.TablePlusをインストール

公式サイトにアクセスし、「Download for Mac」をクリック
ダウンロードできたら、ファイルをクリック
TablePlusのアイコンをApplicationsフォルダにドラッグ
ここまでの操作でインストールが完了したので、ApplicationsフォルダにあるTablePlusを起動

2.データベースにアクセスする設定を行う

Renderのダッシュボードを開き、操作したいデータベースを選択します。
画面をスクロールすると、「Connections」という欄があります。
その中のExternal Database URLが必要になるので、クリップボードにコピーします。
コピーできたらTablePlusでの設定を行います。以下のように右クリックで表示されるメニューから、「Connect from URL」を選択しましょう
上記でコピーしたExternal Database URLを貼り付ける
「import」をクリック
設定画面が表示されるので、Nameの欄に任意の設定名を入力し、Connectをクリック
テーブルを確認して問題なくデータが保存されているか確認

3.データの削除方法

テーブルの内容が表示された状態で、削除したいデータを右クリックしましょう。メニューが開くので「Delete」を選択
行が赤くなり削除対象になっていることがわかりますが、この時点では実際には削除は行われていません。
以下の画像のとおり、アイコン(画面上部の三本線と右に上矢印のマーク)をクリックして削除の操作を反映させましょう。

不具合の解消方法

ここからは、アプリのデプロイに関連して不具合が発生した時のヒント。

1.エラーログから原因を探ろう

アプリケーションが表示されなかったり、意図した通りに動作しない場合は、原因を探るためエラーログを確認する必要があります。
その場合は、メニューから「Logs」を選択してログを表示させましょう。

2.テーブルの変更がRenderに反映しない場合の対応

マイグレーションファイルの作成が正しく行われていない場合、Renderで作成したテーブルの構成を変更できないことがあります。
以下の条件に当てはまる場合は、次に解説する手順を実行してください。

カラムの追加などのテーブルの変更を行った
ローカルでは、変更内容が正しく反映する
Renderでデプロイを行った際に、エラーは出ないがテーブルに上記の変更が反映されない

また、実施前に以下の注意事項を必ずご確認ください。

以下の手順を行う際の注意事項
以下の作業を行うと、それまでに投稿していたデータは全て削除されます。それでも支障がない場合のみ実行しましょう。

1.Renderで作成したデータベースをリセットする

ここからは、Renderで作成したデータベースをリセットする手順について記載します。

設定ファイルの内容を変更
デプロイ時に自動で実行される処理内容を変更するため、VSCodeで以下のようにファイルを変更しましょう。
8行目の記述をコメントアウトして、9行目を追加します。

  # bin/render-build.sh内
  #!/usr/bin/env bash
  # exit on error
  set -o errexit
  
  bundle install
  bundle exec rake assets:precompile
  bundle exec rake assets:clean
  # bundle exec rake db:migrate ←コメントアウト
  DISABLE_DATABASE_ENVIRONMENT_CHECK=1 bundle exec rake db:migrate:reset　←追記

DISABLE_DATABASE_ENVIRONMENT_CHECK=1は、本番環境のデータベースを削除するために必要な設定です。本番用のデータベースには重要なデータが含まれるため、通常は削除できないようになっています。

今回はリセットを行いため、明示的に削除を許可する設定を記述します。

bundle exec rake db:migrate:resetは、データベースをリセットするためのコマンドです。以下の３つを順に実行したのと同じ動作をします。

rake db:drop（データベースの削除）
rake db:create（データベースの作成）
rake db:migrate（マイグレーションファイルの実行）

2.TablePlusを終了する

これからリセットしようとしているデータベースをTablePlusで開いている場合、削除することができません。
もしTablePlusを開いている場合は一度終了しましょう。

3.GitHubにプッシュ

コードを変更しているので、GitHubにプッシュして更新しましょう。

4.動作確認を行おう

GitHubにコードをプッシュすると、Renderのデプロイが実行されます。
デプロイが完了したら、アプリを操作したり、TablePlusでテーブルの内容を確認しましょう。正しく変更されていることを確認したら、次のステップに進みます。

5.設定を元に戻しておこう

今の設定では、デプロイを行うごとに、必ずデータベースがリセットされます。

通常そのような動作は必要ないため、以下のように設定ファイルを元に戻しておきましょう。
8行目のコメントアウトを外して、9行目の記述を削除します。

# bin/render-build.sh内
#!/usr/bin/env bash
# exit on error
set -o errexit

bundle install
bundle exec rake assets:precompile
bundle exec rake assets:clean
bundle exec rake db:migrate ← 変更箇所

デプロイ後に必要な操作

Renderを無料で使用する際は、アクティブなデータベースは１つに限られるという制限があります。
そのため、２つ目以降のアプリをデプロイする前に、すでに作成したデータベースを休止させる必要があります。

データベースを休止させるとアプリも正常に動作しなくなります。以下の操作は必要な場合のみ行うよう注意しましょう

休止させるための手順

Renderのダッシュボードにアクセスし、休止させるデータベースをクリックして選択
画面を一番下までスクロールすると「Suspend Database」と書かれたボタンがあり、これをクリックすれば休止のための操作は完了
休止を解除して再度使用する場合は、「Resume Database」をクリック
statusがavailableに代わればOK

ちなみに

GitHubにコードをプッシュしmainブランチが更新されるとrenderでのデプロイが自動的にスタートします。

Renderの自動デプロイを停止する操作

Renderは、連携させたGitHubにコードがプッシュされると自動的にデプロイが始まる仕様となっています。
その際は、

ダッシュボードで、自動デプロイを停止したいアプリを選択
メニューから「Settings」を選択
画面をスクロールすると「Build & Deploy」グループの中に「Auto-Deploy」という項目があるので、「Edit」ボタンをクリック
「Yes」と書かれたプルダウンメニューをクリック
メニューが開くので、「No」をクリック
「Save changes」をクリックすれば設定変更は完了

Renderによるデプロイ