【初心者向け】RailsアプリをRenderでデプロイする手順（mac）

## 背景
今回はRailsアプリを作ってデプロイする上で、
２０２４年７月時点において最も簡単かつモダンにデプロイする手順についてです:sunglasses:

当方、駆け出しエンジニアですがrailsデプロイに苦しんだため、
同じくデプロイで苦しんでおられる方の一助となればと思います:grinning:

webアプリは有料プラン（starter:月$7~）でないと動作が不安定なのでご注意ください。Freeプランだとエラーが出る場合があります。Freeで失敗したら有料プランの移行を検討してください:hushed:
データベースは90日まで無料で運用できますが、９０日でデータベースは削除されるので継続運用される場合は有料プラン（starter:月$7~）に移行をお願いします:bow:


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

1.PC上のアプリ内準備
2.Railsアプリのデプロイ
3.データベースのデプロイ
4.Railsアプリとデータベース接続


## PC上のアプリ内での準備

### Gemfileの編集

以下のような変更を加えてください。

```diff_c: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追加後は以下のコマンドを実行しておきましょう。

```ruby:ターミナル
 bundle install --without production
```
 
### database.ymlの編集
production環境で接続するDBの変更を行います。

変更前
```ruby:config/database.yml
 production:
  <<: *default
  database: db/test.sqlite3
```
変更後
```ruby:config/database.yml
production:
  <<: *default
  adapter: postgresql
  encoding: unicode
  pool: 5
```
## Railsアプリのデプロイ
ここでは、Railsのアプリ部分のデプロイです。
RailsなどのWebサイトとデータベースが一体化しているアプリは
それぞれデプロイする必要があるため片方ずつ行います。

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

https://render.com/

※GitHubのアカウント・レポジトリをお持ちでない方は、
下記の記事を参考に作成してください。

### ※GitHubでの作業

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

https://qiita.com/mt-blue-sou/items/e28ae0b27a7911c302d5

## Webサービスのデプロイ
1.ログイン後、Renderダッシュボードの右上にある「New+」ボタンをクリックし、
「Web Service」を選択します。
![6874747073.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521687/bbdd1377-051a-6b07-8469-a027f3bc90e7.png)


2.Gitリポジトリを選択し、デプロイ先のブランチを指定します。
3.名前（my-rails-appなど）とリージョンを指定します。

### Webサービスの設定
#### 基本情報
Name: サービス名
Environment: Ruby
Region: シンガポール
Branch: デプロイしたいブランチ。`main`か`master`
plan:starter(月$7)
#### 各種詳細設定
Start Command:
```ruby:
bundle exec rails s -p 10000
```
Build Command:
```ryby:
bundle install && bundle exec rake assets:precompile db:migrate
```
Advanced
ここでは、環境変数の設定を行います。
RAILS_MASTER_KEYを設定します。このキーはconfig/master.keyに保存されています。
![68747470733.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521687/74cb9672-1757-db74-b0f6-b1bc879481ad.png)


もし、マスターキーがない方orエラーが出た方は以下のコマンドを実行しましょう。

```rubu:ターミナル
# Railsプロジェクトの階層で実行, ファイルを削除するコマンド
rm config/credentials.yml.enc config/master.key
# マスターキー生成コマンド
EDITOR="code -w" bin/rails credentials:edit
```
Githubにアップロード
ここまでの変更を行なった後は、GitHubにアップロードしましょう。

最後に、`Create Web Service`を押してWebサービスをデプロイします。
ここまででアプリサービスは作成作業完了です。


## データベースのデプロイ
Renderダッシュボードの右上にある「New+」ボタンをクリックし、
「PostgreSQL」を選択します。
### データベースの設定
#### 基本情報
Name: アプリ名_DB
Region: シンガポール
Plan：はFree

残りはスルーで`Create Database`を押しましょう。
作成完了まで少し（2~5分程度）時間がかかります。


## Railsアプリとデータベースの接続
### Webサービスでの環境変数の設定
作成したデータベースの`Info`にある`Internal Database URL`をコピーしましょう。
![スクリーンショット 2024-07-14 11.55.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521687/ea568334-752b-c8e3-519e-29712983d801.png)

次に、Webサービスの`Environments`に移動し
`DATABASE_URL`を`Key`に、コピーしたURLを`Value`に入れて、`Save Changes`を押しましょう。
![スクリーンショット 2024-07-14 12.01.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521687/25a4378a-66a9-4afa-fd09-5e59908f0fa6.png)



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

```ruby: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
```
### 環境設定ファイルの設定
環境設定ファイル（config/database.yml）がPostgreSQLを使用するように設定します。
productionセクションは以下のようになります。
```ruby:yaml
production:
  <<: *default
  database: my_app_production
  username: <%= ENV['DATABASE_USERNAME'] %>
  password: <%= ENV['DATABASE_PASSWORD'] %>
  host: <%= ENV['DATABASE_HOST'] %>
  port: <%= ENV['DATABASE_PORT'] %>
```
Githubにアップロード
ここまで変更を行なった後は、Githubにアップロードしましょう。

### 環境変数の設定
データベース接続に必要な環境変数
DATABASE_HOST,
DATABASE_PASSWORD, 
DATABASE_PORT,
DATABASE_URL,
DATABASE_USERNAME
これらがWebサービスの`Environments`で正しく設定されているか確認します。
![スクリーンショット 2024-07-14 14.12.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521687/8c2d2c12-6029-5e2c-bb9a-f707891c3b90.png)
### データベースの移行を実行する
以下のコマンドを使用して、Webサービスの`Shell`でマイグレーションを実行してください。
```ruby:bash
bundle exec rails db:migrate
```

### ログの確認
ここまで完了したら、Dashboard > アプリ名 > Eventsの順で移動し
最新の`deploy`明るい緑色）のURLをクリックして確認しましょう。
こんな感じになっていたらリリース成功です。
![6874747073.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521687/94940fb6-f2ce-3f21-4507-8447b518567f.png)


デプロイ成功確認のため、少し左上にあるURLをクリックしてみましょう。

:::note warn
Webページの表示まで３〜５分程度かかることがあります。
:::
表示確認できれば、デプロイ完了です:raised_hands: