【完全版】Rails Renderデプロイガイド

背景

今回は、Herokuの代替案として有効的だったFly.ioが
クレジットカードを持たない人にサービスを提供しない方針になってしまったので
クレジットカードを持たない人向けにRender.comのデプロイ方法を
詳細にお伝えします🔥

この記事の通りに進めるだけでほぼ確実にデプロイできるはずなので
もし問題等がありましたら、コメントでお知らせください🙇

無料枠では、Renderのデータベースは90日まで＋1つまでしか運用できません
こちらを了承できる方は進めていきましょう！
（無料で90日以後利用する場合は、引き継ぎ処理と再度DBを作成し直す操作が必要です）

この件に関しては、本記事の最後に記載しています。
有料版であれば90日以後も使用できますが、無料版での使用であれば
90日以内の制約がつきます。

手順

大きく以下の流れで進行します。

1. PC上のアプリ内での準備
2. データベースの作成
3. Railsアプリとデータベースの接続

PC上のアプリ内での準備

作成しているアプリの階層に移動しておきましょう！
移動するコマンド
cd フォルダ名

Gemfileの編集

公式に従います。
以下のような変更を加えてください。

Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '3.0.3'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.4', '>= 6.1.4.1'
# Use sqlite3 as the database for Active Record
- # gem 'sqlite3', '~> 1.4'

# ~~~長いので割愛~~~
group :development, :test do
+  gem 'sqlite3', '~> 1.4'
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end


group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 3.26'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

+group :production do
+  gem "pg", "~> 1.4"
+end

# ~~~長いので割愛~~~

Gem追加後は以下のコマンドを実行しておきましょう。

ターミナル

 bundle install --without production

また、後で以下のようなエラーを防ぐために、コマンドを実行しておきましょう。

エラー
Your bundle only supports platforms ["arm64-darwin-21"] but your local platform
is x86_64-linux. Add the current platform to the lockfile with bundle lock --add-platform x86_64-linux and try again.

ターミナル

bundle lock --add-platform x86_64-linux

database.ymlの編集

production環境で接続するDBの変更を行います。

変更前

config/database.yml

 production:
  <<: *default
  database: db/test.sqlite3

変更後

config/database.yml

production:
  <<: *default
  adapter: postgresql
  encoding: unicode
  pool: 5

Railsアプリの作成

ここからは、Railsのアプリの中でも見た目に関する部分のリリースを行います。
RailsなどのWebサイトとデータベースが一体化しているアプリは
Webサイトとデータベースをそれぞれリリースする必要があるため
片方ずつ行います！

アカウント登録

まずはRender.comのアカウント登録をします
トップページのGET STARTEDからアカウント登録しましょう
アカウントはGithubアカウントで作成しましょう。

Githubの始め方・レポジトリの作成も必要になりますが、
以下の記事を参考に進めると良いと思います！

Githubでやること

Githubに関して行うことは以下の内容となります。
表現は少し違う可能性がありますが、そこはあまり気にしなくても大丈夫です！
（※初心者向けにわかりやすさを重視しています）

1. アカウント作成
2. Github上でレポジトリ（アプリ）の作成
3. PC上のアプリとGithubのアプリの紐付け
4. Githubにアップロード

Webサービスの作成

ログインしたらダッシュボードからwebサービスを作成します

privateリポジトリを使う場合は事前にGithub連携させておく必要があります。
その場合は説明にあるリンクを踏んで連携しておきましょう。
publicを使うならそのままリポジトリのURLを貼れば大丈夫です

Github連携するかURLを入力すると、リポジトリ情報が入力フォームの下に現れるので
クリック後、緑色のconnectをクリックします

Webサービスの設定

基本的な情報

1. Name: サービスの名前になるのでわかりやすい名前にしておきましょう（あとから変更可）
2. Environment: Ruby
3. Region: シンガポール
4. Branch: デプロイしたいブランチ。mainかmaster

各種詳細設定

Start Commandはスルー、PlansはFreeを選択しますが、
Build Command、Advancedは少し注意が必要です。

Build Command

Build Commandは、サービスをリリースしたときに使うコマンドになります。
結構長いので、クリップボードマークからコピーしてください。

seedがある場合

bundle install && yarn install && bundle exec rake assets:precompile && bundle exec rake assets:clean && bundle exec rails webpacker:compile && bundle exec rake db:migrate && bundle exec rails db:seed

seedがない場合

bundle install && yarn install && bundle exec rake assets:precompile && bundle exec rake assets:clean && bundle exec rails webpacker:compile && bundle exec rake db:migrate

Advanced

ここでは、主に環境変数の設定を行います。
Railsのマスターキーと.envファイルの中身を入れてあげましょう。

マスターキー

マスターキーはconfig/master.keyの中にある内容で
keyにRAILS_MASTER_KEY、valueにconfig/master.keyの内容を入れてあげましょう。

もし、マスターキーがないという方orエラーが出た方は以下のコマンドを実行しましょう。
手動で以下の階層にあるファイルを削除してもらっても大丈夫です！
（ファイルが見当たらない場合は実行せずに次のコマンドに進みましょう〜）

ターミナル

# Railsプロジェクトの階層で実行, ファイルを削除するコマンド
rm config/credentials.yml.enc config/master.key

削除後、以下のコマンドを実行しましょう！

Macの方

ターミナル

EDITOR="code -w" bin/rails credentials:edit

Windowsの方

ターミナル

set EDITOR="code -w"
rails credentials:edit

Githubにアップロード（共通）

ここまでの変更を行なった後は、Githubにアップロードしましょう。

ターミナル

git add .
git commit -m "masterKey生成"
git push origin HEAD

.envの設定

ここでは主に、Cloudinaryなどの外部サービスの利用時に使用します。
特に使ってない方はSkipしましょう！

先ほど追加した、RAILS_MASTER_KEYの下にあるので
Add Secret Fileを押しましょう。

次に、ファイル名を.env、内容をPC内にあるRailsアプリの
.envファイルの内容をコピペして入れてください。

最後に、saveを押して保存後、
Create Web Serviceを押してWebサービスを作成します！
ここまででアプリは作成完了です！

Webサービス作成時のログの見方

作成時にログが生成されます。
Dashboard > アプリ名 > Eventsの順で移動し
最新のdeploy（明るい緑色）のURLをクリックして確認できます。

また、Webサービス作成の成功時には以下のようなログが出力されます。

試しに、URLも少し上の方に表示されているので
クリックすると、トップページが開くはずです。
まだデータベースを作成していないので、ログイン機能などは動作しませんが
表示のみされます。

データベースの作成

次に、データベースを作成します。
先ほどまでの内容では、Webサービス（見た目）しかできていないため
この後の作業も必要となります！

Render.com上で作成

Webサービスの時と同じように作成しますが、
PostgreSQLを選びましょう。

名前は先ほど作成したアプリ名_DBなどが良いでしょう。
PlanはFreeで、残りは何もせずにCreate Databaseを押しましょう！

作成完了まで少し（2~5分程度）時間がかかります。

Railsアプリとデータベースの接続

Webサービスでの環境変数の設定

作成したデータベースのInfoにあるInternal Database URLをコピーしましょう！
（以下の画像のようになっているはずです！）

次に、WebサービスのEnvironmentsに移動し
DATABASE_URLをKeyに、コピーしたURLをValueに入れて、Save Changesを押しましょう。

render.yamlの作成

render.yamlをGemfileと同じ階層（＝アプリの直下）に作成し、以下の内容をコピペしましょう。

render.yaml

databases:
  - name: Renderで作成したDBアプリ名
    databaseName: 「Info内のConnectionsにあるDatabase」を入れる
    user: Renderで作成したRailsのアプリ名
    region: singapore

services:
  - type: web
    name: Renderで作成したRailsのアプリ名
    env: ruby
    region: singapore
    plan: free
    buildCommand: "./bin/render-build.sh"
    startCommand: "bundle exec puma -C config/puma.rb"
    envVars:
      - key: DATABASE_URL
        fromDatabase:
          name: Renderで作成したDBアプリ名
          property: connectionString
      - key: RAILS_MASTER_KEY
        sync: false

ここで出てくるdatabaseNameは「Info内のConnectionsにあるDatabase」を入れましょう。
大体、作成時に指定したデータベース名の小文字になっているはずです。
以下に具体例を示すので、参考にしてみてください。

具体例

作成するアプリ名：ExampleApp
データベース名：ExampleApp_DB

render.yaml

databases:
  - name: ExampleApp_DB
    databaseName: exampleapp_db
    user: ExampleApp
    region: singapore

services:
  - type: web
    name: ExampleApp
    env: ruby
    region: singapore
    plan: free
    buildCommand: "./bin/render-build.sh"
    startCommand: "bundle exec puma -C config/puma.rb"
    envVars:
      - key: DATABASE_URL
        fromDatabase:
          name: ExampleApp_DB
          property: connectionString
      - key: RAILS_MASTER_KEY
        sync: false

Githubにアップロード

ここまで変更を行なった後は、Githubにアップロードしましょう。

ターミナル

git add .
git commit -m "Webサービス　DBと接続"
git push origin HEAD

ログの確認

ここまで完了したら、Dashboard > アプリ名 > Eventsの順で移動し
最新のdeploy（明るい緑色）のURLをクリックして確認しましょう。

こんな感じになっていたらリリース成功です！

試しに、少し左上にあるURLをクリックしてみましょう！

Webページの表示まで3分程度かかることがあります。

これでデプロイ完了です！

終わりに

デプロイできましたでしょうか？
何かエラーなどあれば、コメントでお待ちしております！！
Herokuが有料化し、Fly.ioはクレジットカードを所持していなければ
デプロイできないというのは辛いものですが、
この記事で少しでも多くのWebサービスがデプロイされると幸いです✨
それでは👋

補足

DBの期限について

冒頭で触れた、下記の件についてです。

無料枠では、Renderのデータベースは90日まで＋1つまでしか運用できません
こちらを了承できる方は進めていきましょう！
（90日後にDBを作成し直す必要がありそうです）

Free Render PostgreSQL Instance Expiring: XXXX_DB といった件名でメールが届きます。

本文

Hi there,

Your free Render PostgreSQL database, XXXX_DB, will be suspended on 2023-XX-XX. The database will become inaccessible unless you upgrade to a paid plan.

Upgrading takes just a couple of minutes and gives you more space and improved performance. If you decide not to upgrade, please remember to create a backup of your database because all data will be deleted 14 days after suspension.

Read more about Render's free PostgreSQL plans.

If you have questions, feel free to reply to this email and we'll get back to you promptly.

The Render Team

重要な部分のみ訳すと、以下の内容になります。

無料でご利用いただいているRender PostgreSQLデータベース「XXXX_DB」は、2023-XX-XXに停止されます。有料プランにアップグレードしない限り、データベースへのアクセスは不可能となります。
アップグレードはわずか数分で完了し、より多くの容量とパフォーマンスの向上を実現します。アップグレードしない場合、すべてのデータは停止から14日後に削除されるため、データベースのバックアップを作成することを忘れないでください。

このように、DBが使えなくなる旨がメールで届きます。
対処法の予想ですが、作成したアプリ内でデータを書き出すようにしておけば、新たにDBを作成する場合に
Seed値としてデータを挿入し、擬似的にDBの永続使用ができるかもしれません。
（推奨されている方法ではありませんが😅）