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

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

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

:::note warn
無料枠では、Renderのデータベースは90日まで＋1つまでしか運用できません
こちらを了承できる方は進めていきましょう！
（無料で90日以後利用する場合は、引き継ぎ処理と再度DBを作成し直す操作が必要です）
:::
この件に関しては、[本記事の最後](#-dbの期限について)に記載しています。
有料版であれば90日以後も使用できますが、無料版での使用であれば
90日以内の制約がつきます。

# 手順
大きく以下の流れで進行します。
1. [PC上のアプリ内での準備](#pc上のアプリ内での準備)
1. [データベースの作成](#データベースの作成)
1. [Railsアプリとデータベースの接続](#railsアプリとデータベースの接続)

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

## Gemfileの編集
[公式](https://render.com/docs/deploy-rails#modify-existing-rails-project-for-postgresql)に従います。
以下のような変更を加えてください。

```diff_ruby: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追加後は以下のコマンドを実行しておきましょう。
```zsh:ターミナル
 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.


```zsh:ターミナル
bundle lock --add-platform x86_64-linux
```

## database.ymlの編集
`production`環境で接続するDBの変更を行います。

### 変更前
```yml:config/database.yml
 production:
  <<: *default
  database: db/test.sqlite3
```

### 変更後
```yml:config/database.yml
production:
  <<: *default
  adapter: postgresql
  encoding: unicode
  pool: 5
```

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

## アカウント登録
まずは[Render.com](https://render.com/)のアカウント登録をします
トップページの`GET STARTED`からアカウント登録しましょう
アカウントはGithubアカウントで作成しましょう。

https://render.com/

Githubの始め方・レポジトリの作成も必要になりますが、
以下の記事を参考に進めると良いと思います！
### Githubでやること
Githubに関して行うことは以下の内容となります。
表現は少し違う可能性がありますが、そこはあまり気にしなくても大丈夫です！
（※初心者向けにわかりやすさを重視しています）
1. アカウント作成
1. Github上でレポジトリ（アプリ）の作成
1. PC上のアプリとGithubのアプリの紐付け
1. Githubにアップロード


https://qiita.com/kakeru0520sou1/items/e28ae0b27a7911c302d5

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/24baa890-f831-1800-fd4c-10f27297c6e6.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/671f154d-2f4a-5eaa-dde9-39c8cb6814ae.png)

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

## Webサービスの設定

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

### 各種詳細設定
Start Commandはスルー、PlansはFreeを選択しますが、
`Build Command`、`Advanced`は少し注意が必要です。

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

##### seedがある場合
```zsh
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がない場合
```zsh
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`の内容を入れてあげましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/c37dea92-ab2b-17d6-9a13-7412cc3e4ec1.png)

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

```zsh:ターミナル
# Railsプロジェクトの階層で実行, ファイルを削除するコマンド
rm config/credentials.yml.enc config/master.key
```
削除後、以下のコマンドを実行しましょう！

###### Macの方
```zsh:ターミナル
EDITOR="code -w" bin/rails credentials:edit
```

###### Windowsの方
```sh:ターミナル
set EDITOR="code -w"
rails credentials:edit
```

###### Githubにアップロード（共通）
ここまでの変更を行なった後は、Githubにアップロードしましょう。
```zsh:ターミナル
git add .
git commit -m "masterKey生成"
git push origin HEAD
```


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

先ほど追加した、RAILS_MASTER_KEYの下にあるので
`Add Secret File`を押しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/e18e9765-2c4a-e85d-766d-c401a97bf4e6.png)

次に、ファイル名を`.env`、内容をPC内にあるRailsアプリの
`.env`ファイルの内容をコピペして入れてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/3e152add-7f89-26b4-df42-aae811b69d31.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/db28621e-0d57-a99b-752d-5f1ad858bb8b.png)

また、Webサービス作成の成功時には以下のようなログが出力されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/e98c980e-6406-f214-1f8c-b258ffe9baf7.png)

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

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

## Render.com上で作成
Webサービスの時と同じように作成しますが、
`PostgreSQL`を選びましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/63ee7337-09f3-86a3-b520-246c6965a587.png)

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

:::note warn
作成完了まで少し（2~5分程度）時間がかかります。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/031bb4a6-d323-e2bb-bd19-9bf83354d241.png)


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

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

作成したデータベースのInfoにある`Internal Database URL`をコピーしましょう！
（以下の画像のようになっているはずです！）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/d44a38f1-7a2e-3540-695b-5708f35707d6.png)

次に、Webサービスの`Environments`に移動し
`DATABASE_URL`をKeyに、`コピーしたURL`をValueに入れて、`Save Changes`を押しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/f8da8580-85d7-2233-7254-b987345c2a86.png)

## render.yamlの作成
`render.yaml`をGemfileと同じ階層（＝アプリの直下）に作成し、以下の内容をコピペしましょう。
```yaml: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
```yaml: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にアップロードしましょう。

```zsh:ターミナル
git add .
git commit -m "Webサービス　DBと接続"
git push origin HEAD
```

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

こんな感じになっていたらリリース成功です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/11647d64-3c5e-e492-a045-1ebcf0d8cca5.png)

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

:::note warn
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の永続使用ができるかもしれません。
（推奨されている方法ではありませんが😅）