はじめに
タイトルの通り、
React on Railsを用いたRailsアプリをRender.comへデプロイしました。
本稿執筆時点では、上記アプリのRender.comへのデプロイに関して情報が見つけられず、
デプロイに苦戦しました。そのため、デプロイ手順を共有させていただきます。
誤りや不正確な表現、不要な手順などを見つけましたら、
お手数をおかけしますがご指摘お願いします。
本稿がどなたかのお役に立てば幸いです。
注意事項
本稿において、「React on Rails」とは、
ReactコンポーネントをRailsのView層へ組み込むためのGemを指します。
RailsがReactを内包することで、一体型の開発が可能となります。
一方で、「React on Rails」という言葉は、
フロントエンド側にReact、バックエンド側にRails（APIモード）を用いた分離型の構成
を表現する際にも使われることがあります。
後者は本稿では扱わない構成ですので、ご注意ください。
本稿の対象者
本稿は下記3点全てに該当する方を対象としています。
- Webアプリとして、React on Railsを用いたRailsアプリを作成している方
- データベースとして、PostgreSQLを使用している方
※Render.comにおける推奨データベースがPostgreSQLのため - 上記をRender.comへのデプロイを検討している方
※本稿ではFreeプランでのデプロイを前提としています
一方で、注意事項でも申し上げた通り、本稿は下記に該当する方は対象外としています。
- フロントエンド側にReact、バックエンド側にRails（APIモード）を用いた構成の
アプリを開発している方
環境
- React：19.2.7
- Ruby：4.0.5
- Ruby on Rails：8.1.3
- React on Rails：16.6.0
- PostgreSQL：18.4
手前味噌ではありますが、実際にデプロイしたWebアプリのリポジトリをご紹介します。
参考になれば幸いです。
デプロイの手順
下記3ファイルを新規作成または編集します。
(1) bin/render-build.sh（Render.comにおけるWebアプリのビルドスクリプト）
(2) render.yaml（Render.comにおけるIaCファイル）
(3) config/database.yml
(1) bin/render-build.shを新規作成
Render.com公式ドキュメントを参考にファイルを新規作成します。
このとき、React on Railsを用いたRailsアプリのデモを参考に、
JavaScriptパッケージ管理ツールによるパッケージ導入手順を追加します。
デモ内ではパッケージ管理ツールとしてyarnが使用されていますが、
本稿ではnpmを使用します。そのため、「npm install」の行を追加します。
また、React on Rails公式ドキュメントを参考に「assets:precompile」の行を編集します。
上記の手順を経て、下記ファイルが作成されます。
#!/usr/bin/env bash
# Exit on error
set -o errexit
bundle install
npm install # 追加
RAILS_ENV=production NODE_ENV=production bin/rails assets:precompile # 編集
bin/rails assets:clean
# If you have a paid instance type, we recommend moving
# database migrations like this one from the build command
# to the pre-deploy command:
bin/rails db:migrate
最後に、chmod a+x bin/render-build.shで実行可能権限を付与します。
(2) render.yamlを新規作成
引き続き、上記のRender.com公式ドキュメントを参考にファイルを新規作成します。
Webアプリ名、データベース名が設定できる箇所（[ ]で表されている項目）があるので、
任意の名称を入力してください。
services:
- type: web
name: [ここにWebアプリ名を入力]
runtime: ruby
plan: free
buildCommand: './bin/render-build.sh'
# preDeployCommand: "bundle exec rails db:migrate" # preDeployCommand only available on paid instance types
startCommand: './bin/rails server'
envVars:
- key: DATABASE_URL
fromDatabase:
name: [ここにデータベース名を入力]
property: connectionString
- key: RAILS_MASTER_KEY
sync: false # You'll provide this value on Blueprint creation
- key: WEB_CONCURRENCY
value: 2 # Recommended default
databases:
- name: [ここにデータベース名を入力]
plan: free
(3) config/database.ymlを編集
Render.com上でWebアプリとデータベースを接続するために、環境変数DATABASE_URL
を設定します。
# ...
production:
primary: &primary_production
<<: *default
url: <%= ENV["DATABASE_URL"] %> # 追加
# ...
以上の3ファイルが準備できたら、各々のリポジトリにpushし、
Render.com公式ドキュメントに従い、デプロイします。
暫く待つとデプロイが完了し、作成したWebサービスにアクセス可能となるはずです。
デプロイ手順の説明は以上です。
ここまで読んでいただき、ありがとうございました。