この記事について

この記事ではRailsで作ったWebサービスを公開したい方のために、Supabaseのデータベースを利用して、Render.comに完全に無料でデプロイする手順をまとめました。

上から実行していくのを想定していますが、必要ない部分は適時飛ばしてください。

なおデプロイのタイミングは、技術構成が複雑になってくるとデプロイ時のエラーの原因が分かりづらくなるので、早めにデプロイしてしまい、都度エラーの検証をしていくのがおすすめします。

この記事について
公式のドキュメント
Railsでアプリを作成
- rails new する
- scaffold でCRUDを作成
Supabaseにデータベースを作成
データベースを接続する
- Connection String を作成
開発環境（ローカル）からDBを接続
Render.comにデプロイ
- ローカルでの準備
  - 本番環境用にdatabase.yml編集
  - render-build.shを作成
- Render.comに登録
本番環境（Render.com）からDBを接続
- Render.com上で環境変数を設定
遭遇したエラー
- tailwindが反映されない
- importmap経由のjsが反映されない
参考にさせてもらった記事
おわりに

公式のドキュメント

以下も一通り目を通すのがおすすめ。

Use Supabase with Ruby on Rails | Supabase Docs

Deploying Ruby on Rails on Render | Render Docs

Railsでアプリを作成

まずはデプロイするRailsアプリを作成します。既に作成済みの方はこの手順は飛ばしてください。

rails new する

rails new アプリ名 -d=postgresqlでDBを postgreSQL に設定してアプリを作成。

scaffold でCRUDを作成

rails g scaffold モデル名カラム名:データの型でCRUDを作成。

Supabaseにデータベースを作成

サインアップ

https://supabase.com/dashboard/projectsにアクセス。

まずはサインアップ。 Githubアカウントを使用するのがよさそう。

サインアップ後の画面でNew Projectをクリック。

organization を作成

Nameを入力後Create organizationをクリック。

個人で無料プランの場合 Type of organization は Personal で Pricing Plan は Free - $0/month（どちらもデフォルト）。

project を作成

Nameにプロジェクトの名前を入力。

Database Password にデータベースのパスワード設定。あとで使うので忘れずにどこかに記録！

Region は Northeast Asia (Tokyo)を選択。

全て入力後Create new projectをクリック。

その後1分くらい待つとセッティングが完了します。

データベースを接続する

Connection String を作成

作ったプロジェクトの右上のConnectをクリック。

以下をコピーして、[YOUR-PASSWORD]の部分はプロジェクト作る時に入れたパスワードで置き換え。

パスワードに記号などが含まれる場合、元の文字列をURLエンコードしたものでないとエラーになるので注意。

開発環境（ローカル）からDBを接続

DBを使いたいローカルのターミナルでexport DATABASE_URL= 上記で用意した Connection Stringを実行。

証明書をダウンロード

Enforce SSL on incoming connections をオンにする。

Download CertificateでSSL証明書をダウンロード。

ダウンロードした証明書（prod-ca-2021.crt）をアプリのルートディレクトリに移動。

dotenv-rails で開発環境で使う環境変数の準備

ローカルにあるアプリのapp/Gemfileに以下を追記。

group :development, :test do
  // 開発環境でしか使わないのでdevelopment配下に追加
  gem 'dotenv-rails'
end

ターミナルでbundle installを実行して dotenv-rails をインストール。

app/.envを作成して以下を追記。

APP_DATABASE_HOST=ホストを入力
APP_DATABASE_USER＝ユーザーを入力
APP_DATABASE_PASSWORD=データベースのパスワードを入力

ホストとユーザーは以下を参照。

開発環境用にdatabase.yml編集

config/database.yml

development:
  <<: *default
  host: ENV[APP_DATABASE_HOST"]
  database: postgres
  username: ENV["APP_DATABASE_USER"]
  password: ENV["APP_DATABASE_PASSWORD"]
  sslmode: verify-full
  sslrootcert: prod-ca-2021.crt

その後にbin/rails db:migrateを実行。

これでDBの接続が完了。試しに以下のようにsupabase上からデータ登録し、rails sで起動すると登録したデータが確認できる。

Render.comにデプロイ

ローカルでの準備

本番環境用にdatabase.yml編集

config/database.ymlを編集。環境変数は後ほどRender.com上で設定。

production:
  <<: *default
  host: <%= ENV["APP_DATABASE_HOST"] %>
  username: <%= ENV["APP_DATABASE_USER"] %>
  password: <%= ENV["APP_DATABASE_PASSWORD"] %>

render-build.shを作成

app/bin/render-build.shを作成し、以下の内容にする。

#!/usr/bin/env bash
# exit on error
set -o errexit

bundle install
bundle exec rails assets:precompile
bundle exec rails assets:clean

ターミナルでchmod a+x bin/render-build.shを実行し権限を変更。

ここまでの内容をgitにpush。

Render.comに登録

https://render.com/にアクセス。

GitHubを選択。

右上のメニューから New → Web Service を選択。

Build and deploy from a Git repository を選択。

Github接続をして、以下のように設定を入力

Region

Singapore (Southeast Asia)

Build Command

./bin/render-build.sh

Start Command

./bin/rails server

Instance Type

Free $0/ month

RAILS_MASTER_KEY

config/master.keyの内容を貼り付ける。

master.keyが存在しない場合は以下の記事のように作り直す。

master.keyが見つからない問題 [初見殺し] - はじめてのデプロイで嵌るポイント(Rails 5.2以降) #Rails - Qiita

本番環境（Render.com）からDBを接続

Render.com上で環境変数を設定

Dashboard → Environment から環境変数を設定。

APP_DATABASE_HOSTとAPP_DATABASE_USERとAPP_DATABASE_PASSWORD

supabaseから参照。

DATABASE_URL

これもsupabaseのプロジェクトの右上のConnectをクリック。

これをコピーして、[YOUR-PASSWORD]の部分はプロジェクト作る時に入れたパスワードで置き換え。

RAILS_MASTER_KEY

config/master.keyの内容。

WEB_CONCURRENCY

これでデプロイ準備！　以下から手動でもデプロイできる。

デプロイが失敗する場合は以下からエラーメッセージや警告を調べてみる。

遭遇したエラー

tailwindが反映されない

以下がエラーの内容。

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

原因はrails/tailwindcss-railsのバージョンが古いことだった。

tailwindcss-railsのバージョンを上げたら（2.0.33→2.3.0）エラーがでなくなった。

importmap経由のjsが反映されない

開発環境では動いているimportmap経由のjsのcontroller類（app/javascript/controllers配下のjs）が本番環境だと動かない。

検証ツールで確かめると以下のエラーが出ていた。

Failed to load resource: the server responded with a status of 404 ()

importmap経由の導入方法とJavaScript bundlerで導入方法が違うのに混在させていたのが原因だった。

参考: Stimulus controllerの登録方法の違い #Ruby - Qiita

参考にさせてもらった記事

【※2024年4月より有料化】Rails アプリを公開しよう！ Render.com + PlanetScale デプロイ手順

RailsでSupabaseのPostgreSQLを使ってみる #Rails - Qiita

【Rails】 dotenv-railsを使って環境変数を管理しよう | Pikawaka

おわりに

以上がデプロイまでの手順です。この記事がデプロイのお役に立てれば嬉しいです！

間違っている部分やこうした方がいいよという部分があればお知らせいただけると幸いです〜。

はるまきのブログ

Rails7+Render.com+Supabaseで無料デプロイ