Render.comでRailsアプリの本番環境を作成する方法をどこよりも優しく伝える！

# 目的
Herokuの有料化により他のPaasを探している方もいるのではないでしょうか？
本記事は [Render.com](https://render.com/) というサービスを本番環境に使用する方向けの記事です。

前記事からの続編となっていますので、

+ 本番環境だけPostgreSQLにする
+ Railsアプリの環境変数を設定する

という方法を知りたい方は下の記事を御覧ください。

https://qiita.com/ysk91_engineer/items/904a5bc881eda8a10df8

:::note
現在Webエンジニアを目指して勉強中の、現場未経験の僕でもできた工程です。
ハンズオンでゆっくりやっていきましょう。
:::

# 準備

## scaffoldでささっとUserモデルを作る
本番環境でdbが動いているかを確認するために、簡単なMVC構造を作成しましょう。
ターミナルにて

```terminal
$ rails g scaffold User name:string
$ rails db:migrate
```
を実行し、Userモデルを作成します。

この時点で http://localhost:3000/users にアクセスすると、ユーザー名を登録できるサイトが出来上がっているはずです。
試しに2人、ユーザー登録してみました。
![スクリーンショット 2022-10-15 14.29.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/f33274b9-3114-de1c-7916-e94e5b8ee9fe.png)

現在は開発環境なので、使用しているdbはsqlite3です。
本当に保存されているかを確認したい場合は、下の記事を参考にdbの中身を見てみてください。

https://qiita.com/ysk91_engineer/items/46859bf3721d38334431

上のページをHome画面に設定しましょう。
ルーティングファイルを開きます。
```ruby:routes.rb
get "/", to: "users#index"
```
これで、http://localhost:3000/ で上図のページが表示されます。

# RenderでWebアプリを作成する
いよいよRenderでWebアプリを作成します。
ここでは、アップロードしたWebアプリのドメインが付与されるまでを目標とします。

## Render.comに登録する
まずはRenderにユーザー登録します。
**Get Started**からアカウント登録します。

https://render.com/

## Webアプリ作成
`New+ > Web Service`からアプリを作成します。
![スクリーンショット 2022-10-15 14.52.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/2df5f430-b4bd-bfe2-6edf-54d78ade479b.png)

## GitHubレポジトリと連携
RenderはGitHubのレポジトリからプロジェクトファイルを受け取って本番環境を構築します。
右側の**Configre account**をクリックします。
![スクリーンショット 2022-10-16 6.42.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/8db277cc-c3ff-9a91-402c-10518e20aea5.png)


GitHubのページに飛びますので、`Repository access > Only select repositories > Select repositories`から、対象のレポジトリを選択し、`Save`をクリックします。
![スクリーンショット 2022-10-15 15.00.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/afb983cc-00dc-8222-1d92-e60b68c2571e.png)

Renderのページに戻るので、`Connect a repository`中のリストからレポジトリを選択し、`Connect`を選択します。
![スクリーンショット 2022-10-15 15.08.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/b5c5ecee-aee7-c71a-b107-55c4543498bd.png)

## 必要な情報を記入していく
フォームが表示されますので、必要な情報を記入していきます。

+ `Name` サイト名　（今回はrender_appとしました）
+ `Root Directory` 特になければ空欄
+ `Environment` Ruby
+ `Region` Singapore (Southeast Asia)
+ `Branch` main (developmentで開発し、本番環境はmainにマージします)
+ `Build Command` 初期値
+ `Start Command` 初期値
+ `Plans` Free
+ `Advanced` 一旦シカト

**Create Web Service**ボタンを押して送信します。

すると、作成したアプリのページが開かれます。
![スクリーンショット 2022-10-15 15.22.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/37b6942f-934d-9a78-4361-978d14a80375.png)

サイト名の下にある https://render-app-0yyu.onrender.com がURLとなります。
dbを使っていないサイトなら、この時点でRenderへのデプロイは完了です。
この後、dbと紐付けてアプリが動くように設定していきます。

:::note warn
本記事で作成したRender_appはdbを使用していますので、この時点では**Deploy faild**になってしまいます。
次項からのdbと紐付けをおこなうことでデプロイが完了します。
:::


# PostgreSQLをWebアプリを紐付ける
ここからは、Webアプリとdbを紐付けます。
これをおこなうことで作成したUserモデルを本番環境で扱えるようになります。
基本的にはRenderの公式ドキュメントに従って進めればOKですが、和訳し、より詳細に記載していきます。

https://render.com/docs/deploy-rails#update-your-app-for-render

## PostgreSQLを作成する

`New+ > PosgreSQL`からデータベースを作成します。
![スクリーンショット 2022-10-15 16.44.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/0b34226d-5aa8-ce1a-ea11-6a89bb825e3d.png)

フォームに以下の情報を記入します。

+ `Name` 任意のデータベースの名前 (今回はrender_app)
+ `Database` 任意のデータベースの名前 (今回はrender_app)
+ `User` 自分のユーザー名
+ `Region` Singapore (Southeast Asia)
+ `PostgreSQL Version` 初期値 (記事執筆時は14)
+ `Datadog API Key` 空欄
+ `Plans` Free

**Create Database**をクリックするとデータベースが作成されます。

## `puma.rb`を編集
`config/puma.rb`ファイルを編集します。
コメントアウトされた部分を実行されるようにします。

```ruby:puma.rb
# 初期値は2だが、Renderの公式ドキュメントに沿って4に変更
workers ENV.fetch("WEB_CONCURRENCY") { 4 }

preload_app!
```

## `production.rb`を編集
`config/environments/production.rb`ファイルを編集します。
25行目あたりにある一行を公式ドキュメントに沿って変更します。
```diff_ruby:production.rb
- config.public_file_server.enabled = ENV["RAILS_SERVE_STATIC_FILES"].present?

+ config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present? || ENV['RENDER'].present?
```

## `render-build.sh`を記載する
本番環境を走らせるには、本番環境に対してコマンドを送る必要があります。
そのコマンドを`bin`フォルダ内の`render-build.sh`ファイルに書いていきます。
`bun`内に`render-build.sh`を作成したら、[公式ドキュメント](https://render.com/docs/deploy-rails#create-a-build-script
)に従ってコマンドを記載します。

```ruby: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-build.sh`が実行されるように設定する
本番環境が立ち上がるときに、先程作った`render-build.sh`が実行されるように設定します。

RenderのWebアプリページから**Settings**を選択し、スクロールすると**Build Command**という欄があります。
![スクリーンショット 2022-10-15 19.08.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/9b1736bd-596b-0ff6-3d40-e9bce6a5b778.png)

ここを、以下のように変更します。
```diff_ruby:Build Command
- $ bundle install; bundle exec rake assets:precompile; bundle exec rake assets:clean;

+ ./bin/render-build.sh
```


## render.yamlを作成する
本番環境用の環境設定ファイルとして、プロジェクトフォルダ直下に`render.yaml`ファイルを作成します(`render.yml`ではないので拡張子に注意！)。
こちらも[公式ドキュメント](https://render.com/docs/deploy-rails#use-renderyaml-to-deploy)に沿って記載していきますが、一部追加で記載しています。

```ruby:render.yaml
databases:
  - name: <設定したデータベース名>
    databaseName: <設定したデータベース名>
    user: <設定したユーザー名>
    region: singapore

services:
  - type: web
    name: <設定したデータベース名>
    env: ruby
    region: singapore
    buildCommand: "./bin/render-build.sh"
    startCommand: "bundle exec puma -C config/puma.rb"
    envVars:
      - key: <%= ENV['DATABASE_URL'] %>
        fromDatabase:
          name: render_app
          property: connectionString
      - key: <%= ENV['RAILS_MASTER_KEY'] %>
        sync: false
```

このファイルでは`DATABASE_URL`と`RAILS_MASTER_KEY`という変数が使用されていることに注目してください。
次の工程でこの2つの変数の値を取得・設定します。

また、ここで`startCommand: "bundle exec puma -C config/puma.rb"`という一行があるので、Webアプリページの**Settings > Start Command**(Build Commandの下)を以下のように書き換えましょう。
![スクリーンショット 2022-10-16 6.55.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/4a0d25a5-2ced-c996-0521-b3bcb88e9547.png)

```diff_ruby:Start Command
- $ bundle exec puma -t 5:5 -p ${PORT:-3000} -e ${RACK_ENV:-development}

+ bundle exec puma -C config/puma.rb
```

## 環境変数を設定する

Webアプリページの`Environment`から**Add Environment Variable**をクリックすると、`key`と`Value`の設定が可能となります。
![スクリーンショット 2022-10-15 17.12.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/a13ff2b3-632f-0384-f636-4b67c5f82acd.png)

`render.yaml`で設定した2つの変数をこのページで設定します。
![スクリーンショット 2022-10-15 17.19.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/cfe7be89-6f32-09e7-5b03-b384ac5ab13f.png)

これらの変数は以下のように取得します。

`DATABASE_URL`
データベースのページに**Connections**という項目があります。
![スクリーンショット 2022-10-15 20.05.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/3e68f295-0011-33bb-d389-c3acd9c8b7f3.png)
このページの**Internal Database URL**の値を入力します。

`RAILS_MASTER_KEY`
プロジェクトファイル内の`config > master.key`に記載されている文字列を記入します。
**Save Changes**ボタンをクリックすると変更が送信されます。

続いて、プロジェクトフォルダ内でも環境設定をしていきます。
まずは`.env.production`に先程表示した**Connections**の値を設定します。
```ruby:.env.production
DB_PASSWORD = 'Passwordの値'
DATABASE_URL = 'Internal Database URLの値'
RAILS_MASTER_KEY = 'master.keyの値'
```
（ぶっちゃけここに記載した値はGitHubにプッシュされないので、メモ用にとっておくのかな？と思っています。）


# いよいよ本番環境をpush!
ここまで設定できたら、いよいよpushです。
プロジェクトフォルダをGitHubにpushし、Renderにデプロイするレポジトリを最新版にします。

Renderのページ内で表示されてる`In progress`が`Deploy succeeded`に変わるまでお茶でも飲んで待ちましょう。
（Freeプランだと、これがめちゃくちゃ時間かかる！！）

見事、下の画像のようなメッセージが出てきたらデプロイ成功です！
![スクリーンショット 2022-10-15 22.23.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/bb8d29ac-c6d7-3eca-8708-76eab8cd39b1.png)

早速サイトにアクセスしてみましょう。

![スクリーンショット 2022-10-15 22.29.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/7db79adb-934c-6140-4cd0-a6adf5479306.png)
うーん、この味気なさ！
どうやらうまく表示されているようです。

いくつかユーザー登録してみます。
![スクリーンショット 2022-10-15 22.33.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/b6b46fb4-5560-7862-d93c-cfe8da0dda92.png)
唐突なさくら家の名簿。
無事にusersテーブルにデータが保存されていることが分かりました！

## エラーが発生したら？

下のようなメッセージと共にデプロイが失敗するケースもあります。
![スクリーンショット 2022-10-15 22.10.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2688241/7e743ee6-3290-317f-b591-b92fe62e7ed8.png)

エラー文を丁寧に読んでみましょう。
```terminal
$ 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.
```

**プラットフォームが違うんやで**という内容ですね。
そんなときはエラーメッセージに書かれている通り、ターミナルで以下を実行します。

```terminal
bundle lock --add-platform x86_64-linux
```

すると、`Gemfile.lock`に次の内容が追加されます。

```ruby:Gemfile.lock
PLATFORMS
  arm64-darwin-21
  x86_64-linux
```

この上でもう一度pushするとデプロイが成功するハズです。

# まとめ
以上が、Renderで本番環境を構築する方法です。
お疲れ様でした。

初めてデプロイするときは色々な情報をかき集めて悪戦苦闘しましたが、振り返ると結局は公式ドキュメントが一番分かりやすかったなと思いました。

# 参考

[Getting Started with Ruby on Rails on Render(Render公式ドキュメント)](https://render.com/docs/deploy-rails)

[【誰でも簡単】RailsアプリをRender.comでデプロイする手順まとめ](https://qiita.com/koki_73/items/60b327a586129d157f38)

[Heroku無料枠廃止で路頭に迷う開発者に捧ぐ、次世代PaaS「Render.com」の使い方](https://qiita.com/mycndev/items/fc7a8fecd7d0b0d09828)

[macでherokuに初回pushするときに起こるエラー、herokuのプラットフォームを指定する](https://universato.hatenablog.com/entry/2021/07/14/030424)