RailsをRenderでデプロイ　ヘルプ集【備忘録】

# 背景
以下の記事でデプロイを進めていく中で、わかりにくいことがあったので
その備忘録です！

https://qiita.com/koki_73/items/60b327a586129d157f38

# 流れ
今回のヘルプ集は上述の記事の中でフワッと記述されていた部分のみ抜粋します！
1. [マスターキーについて](#マスターキーについて)
1. [Gemfileについて](#gemfileについて)
1. [render-build.shについて](#render-buildshについて)
1. [render.yamlについて](#renderyamlについて)
1. [外部サービスとの連携（APIキーの設定）](#外部サービスとの連携apiキーの設定)


## マスターキーについて
このマスターキーが出現するのは[この部分](https://qiita.com/koki_73/items/60b327a586129d157f38#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E6%89%8B%E9%A0%86-%E3%81%9D%E3%81%AE1-rendercom%E3%81%A7%E3%83%9D%E3%83%81%E3%83%9D%E3%83%81)になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/4ac18deb-4823-c782-8ecf-f16dea504bf3.png)

このように記述されていますが、あまり詳しくない方はわからないかもしれません。
このマスターキーに関しては、以下の流れで進めていけば問題ありません！

1. コマンドを実行してマスターキーを生成
1. Githubにpush
1. Render.comのWebサイト上で環境変数を追加

### コマンドを実行してマスターキーを生成
まず、ターミナルで以下のコマンドを実行しましょう。
手動で以下の階層にあるファイルを削除してもらっても大丈夫です！
（ファイルが見当たらない場合は実行せずに次のコマンドに進みましょう〜）
```zsh:ターミナル
# Railsプロジェクトの階層で実行, ファイルを削除するコマンド
rm config/credentials.yml.enc config/master.key
```

次に、マスターキーを生成します。
```zsh:ターミナル
EDITOR="vi" rails credentials:edit
```

### Githubにpush
マスターキーの生成は終わったので、Githubにpushします。
```zsh:ターミナル
git add .
git commit -m "masterKey生成"
git push origin HEAD
```

### Render.comのWebサイト上で環境変数を追加

最後に、Render.comで環境変数としてマスターキーをセットします。
Dashboard＞左のサイドバーにある「Environment」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/4380740b-b7ef-bf3e-db1f-65afbdba01e9.png)
既にDATABASE＿URLがセットされていますが、みなさんはセットされていないかもしれません。
このようにマスターキーをセットしましょう。

マスターキーのValueは`config/master.key`の内容です！


## Gemfileについて
Gemfileの変更は明記されていませんでしたが
ポスグレ（postgreSQL）を使えるようにしないといけないです。
（[公式で明記されています](https://render.com/docs/deploy-rails#modify-existing-rails-project-for-postgresql)）

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

```diff_ruby:Gemfile
# ~~~長いので割愛~~~
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
```

## render-build.shについて
`bin/render-build.sh`の内容に関してですが
以下の内容で大丈夫です！

```sh: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.yamlについて

ここが1番の難所です。
手動でDBとRailsを繋ぐなんてしたことない人は
正直さっぱりだと思います。
（筆者は初めてだったので結構手こずりました😅）

具体的には以下のような内容で問題ありません！
```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

```

## buildコマンドの編集
`Settings`の`Build & Deploy`にあるBuild CommandをEditを押して以下のコマンドに変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/22c7321b-700e-0a9a-6049-edb214796492.png)


### 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
```

### 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
```

## 画像が表示されない
画像系のURLの中身を`<%= asset_path('picture1.png') %>`に変えましょう！

具体例
```css
background-image: url('<%= asset_path('picture1.png') %>')
background: url('<%= asset_path('picture1.png') %>')
```
```erb
<img src='<%= asset_path('picture1.png') %>'/>
```


## 外部サービスとの連携（APIキーの設定）
ダッシュボードからアプリに行った先の
「Environment」から環境変数をセットします。
筆者はCloudinaryを利用して画像投稿機能を実装していたので
以下のようにセットしました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/6e6d0962-f591-e351-5c12-40f0b3775597.png)

## 参考文献

https://qiita.com/koki_73/items/60b327a586129d157f38

https://render.com/docs/deploy-rails