【Ruby on Rails】Webアプリケーションのデプロイ＆データベース連携手順

## はじめに

**説明**
[Render.com](http://Render.com) を使って Webアプリケーションを Deploy する手順です。
又、Database も作成し、連携させる手順についても説明しています。
Database は PostgreSQL です。

**環境**
メイン機：Windows 11 home に WSL2（ Ubuntu 22.04 ）環境を用意して、そこに Ruby をインストールしています。
下記のコードブロックに記載している通り、各バージョンは以下です。

- Ruby : 3.1.2
- Ruby on Rails : 7.0.4
- Bundler : 2.3.14
- PostgreSQL : 14.8

```ruby
wsl-ubuntu@tks:/mnt/c/Ruby/development/sample_app$ cat /etc/os-release 
PRETTY_NAME="Ubuntu 22.04.2 LTS"
NAME="Ubuntu"
VERSION_ID="22.04"
wsl-ubuntu@tks:/mnt/c/Ruby/development/sample_app$
wsl-ubuntu@tks:/mnt/c/Ruby/development/sample_app$
wsl-ubuntu@tks:/mnt/c/Ruby/development/sample_app$ ruby -v ; rails -v ; bundle -v ; psql --version
ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x86_64-linux]
Rails 7.0.4
Bundler version 2.3.14
psql (PostgreSQL) 14.8 (Ubuntu 14.8-0ubuntu0.22.04.1)
wsl-ubuntu@tks:/mnt/c/Ruby/development/sample_app$
```

**【前提】Render.com について**
以前書いた記事にて簡単に説明や、アカウントの作成方法などの手順も記載しておりますので、ご不明な場合は是非ご参照下さい。
今回は、Render のアカウントなど作成している前提で進めます。

https://qiita.com/tks_00/items/73cf04c225e5f6113cd8

**注意点**
- 無料プランは、データベースを作成後 90 日で期限切れになるため注意が必要です。（あくまで学習用途として利用であれば問題ないかと思います）
- 又、無料プランの場合は、1つまでしかデータベースは作成出来ないようです。

## 手順

### 1. Database の作成

1.1　**[Render.com の Dashboard](https://dashboard.render.com/)** を開いてる所から作業を開始します。まずは、データベースを作成しますので、「New」→「PostgreSQL」を選択します。

![1.1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/b25cb927-8ab6-7d2b-9cdb-96cf241e2603.png)

1.2　「Name」と「Database」に名前を決めて入力します。（任意のもので大丈夫です。分かりやすくアプリケーション名とかが良いかもしれませんね）
Region は、日本がないので適当で問題ないです。PostgreSQL の Version は今回「14」を選択します。
![1.2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/f1f84dbd-f8cf-183b-5b18-f5ea339cd94d.png)


1.3　ページ下部まで進み、Instance Type が「Free」である事を念のため確認します。その後「Create Database」をクリックして、データベースを作成します。
![1.3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/17a72f97-5044-204f-917d-4afe68eee0cd.png)

1.4　Info ページへ画面が転移します。現在 Status が「Creating」ですので「Available」になるまで少し待ちます。（私の場合は 1分くらいで作成出来ました）
![1.4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/df9b3376-e3a7-3c9f-26ab-5095469ddd4a.png)

1.5　Available になりましたので作成完了です。
![1.5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/bf5f3a13-d969-4d8c-8b25-f3a2f3dd27d6.png)

1.6　次に「Connect」を選択して、「Internal Connection」タブを選択、そこに記載している URL をコピーして下さい。「2.8」で使います。
![1.6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/076a4985-e699-3821-e891-b875150e9936.png)


### 2. Webアプリケーションの作成 & Database 連携

2.1　次は、Web アプリケーションを作成します。「New」→「Web Service」を選択します。
![2.1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/41dec2c8-a53c-53d9-87fb-612cc76d8bdd.png)

2.2　GitHub の下にある「Configure account」を選択します。
![2.2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/50e429f1-23c5-fbf4-9e3f-d559e56e7a1c.png)

2.3　「Repository access」から「Only select repositories」を選択し、追加したい repository を選択します。
![2.3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/35634985-1e25-4ad4-526c-1ba293b67690.png)

2.4　選択した repository が追加されている事を確認して、「Save」を選択します。
![2.4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/2397a007-9af0-a156-f751-d9a551e9fb87.png)

2.5　Connect a repository に追加されていますね。次は、追加した repository の右にある「Connect」ボタンを選択します。
![2.5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/95e414ba-120c-fb78-db39-29bfdec5e12b.png)

2.6　Name だけは任意の名前を決めます。それ以外は基本的にデフォルトで問題ありません。
![2.6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/9426ff53-35a9-9a83-a660-29b41f4a24eb.png)

2.7　ページ下部まで進み、Instance Type が「Free」である事を念のため確認します。その後「Advanced」を選択します。
![2.7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/713c20c5-643c-db66-74a1-3fd6776ecb7e.png)

2.8　ここで入力が必要な情報は下記の2つです。

- RAILS_MASTER_KEY：master.key の情報
- DATABASE_URL：先程作成した Database の URL（紐付けを行います）

master.key の情報は、Rails アプリケーションの「config/master.key」ファイルを参照したら英数字30桁くらいの文字があります。（ターミナルで `$ cat config/master.key` などと叩いて確認でもOKです）
Database の URL は「1.6」でコピーした URL をペーストして下さい。

（ Column が2つ追加されていない場合は、「Add Environment Variable」をクリックして Column を追加して下さい）

![2.8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/450367cc-028f-6c23-edd6-8a3c4a8a2d08.png)

2.9　ページ下部まで進み、「Create Web Service」を選択します。そうすると自動で Deploy が始まります。
![2.9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/bb5c02d2-8562-8100-c3c9-cff63c164b7b.png)

2.1.0　Status が In progress となり、Deploy 中ですので少し待機です。（私の場合は、2~3 min でした）
![2.1.0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/14b901af-1a96-f5e0-7a8e-0d3e9359e9ca.png)

2.1.1　Status が Live になれば Deploy 成功です。もし、Failed などになれば失敗してますので、ログを見て対処が必要です。
![2.1.1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/d6c71948-03f4-2ca0-f0a0-2ac43b08cc41.png)

### 3. 生成された URL をクリックし、公開されていることを確認

3.1　Deploy が成功しましたので、生成された URL をクリックしてみましょう。（今回は、記事用なので Hello world と表示されるようにしています）
![3.1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/4acf6327-e8b5-a27c-a8bc-6e23b031d305.png)

3.2　ちゃんと公開されていますね。成功です。
![3.2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/5b9f5e36-f8f2-2aac-c78d-2212fbaf6ce4.png)


### 4. 最終的な完成状態

- 作成したアプリケーションが Deploy succeeded であること。
- 作成したデータベースが Available であること。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/0707afad-420d-1b37-17c0-e28c03eef10e.png)


## **まとめ**

お疲れ様でした！

個人的に Render は、Heloku より使いやすく Deploy Error の場合もこけた場所が分かりやすいので結構好きです。
又、学習用途であれば無料で十分に使えますので本当に助かります。
「日本語の記事が少ない & 日本語語に対応してない & Region に日本語がない」などはありますが、そこまでクリティカルな問題ではないと思っているので、どんどん使っていきたいです。

chrome 使っている方は、「右クリック」→「日本語に翻訳」で日本語に切り替えなども出来ますので是非ご活用下さい。（たまに変な日本語になっている時はありますが）

以上です。
ここまで見ていただき、ありがとうございました！