Heroku より使いやすかった render.com というサービスについてざっくりまとめた。（アカウント作成や初回 Deploy まで）

## render.com とは

一言で説明すると、様々な Web アプリケーションを簡単に Deploy 可能にする PaaS であり、静的サイトから Web アプリまで幅広いアプリケーションを簡単に運用できるサービスになります。

似たようなサービスだと Heroku などがありますね。
ただ、Heloku は2022年11月に無料プランが終了したので、現在だと最低でも $5 はかかります。（2023/06/18 時点）
それに対し、render.com は一部制限はありますが無料で使う事が出来ます。
又、次世代 Heroku とも呼ばれているみたいです。

その他、render.com の説明や良いところなどは、下記の記事にて詳しく記載されてますので良かったら見てみて下さい。

https://zenn.dev/mitsuruokura/articles/12b17d406902ab

### 無料プランの注意点（2023/06/18 時点）

- アプリケーションの実行時間は、月750時間
→ 月750時間ですから、1つのアプリケーションなら問題ないですね。2つ以上運用するとなると制限が来るので、そこは注意が必要という感じでしょうか。

- データベースを保存できる期間は、90日間
→ 学習用、さくっと検証用、って感じであれば問題ないと思います。

- Render について調べたくてググっても関係ない情報が出る
→ Render.com と正式名称まで入れるのが良さそうです。

- 非アクティブ状態が15分続くと停止状態になる、その後リクエストが来ると起動状態になるが、最初のリクエストの応答までに多少時間がかかる。（当方の環境でやってみると30秒くらい）
→ 私自身は学習用途で使っているので、そこまでクリティカルな問題ではありませんでした。しかし、それは困るよ。って方もいるかと思います。その場合は、ウェブサイトやサーバーの可用性を監視するためのサービスなどを入れて定期的にレスポンスを送り、「停止状態にしない」という方法も良いかもしれません。具体的な方法などは、[@ppputtyo(ぷっちょ)](https://qiita.com/ppputtyo) さんという方が、Qiita で「Render.com無料プランのスリープ対策」という記事を公開しています。

https://qiita.com/ppputtyo/items/2ab44303dcfabeb7b23e#fn-1

その他の無料プランの注意点や、制限などは以下の公式ドキュメントに記載されているので、気になる方は見てみて下さい。

https://render.com/docs/free#free-web-services

こちらは、無料・有料プランの概要になります。

https://render.com/pricing

## 事前確認

今回お試しで Deploy するのは以下の「hello world!」と書かれたものです。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/c655d196-d2b1-feb2-bff2-d8cdc6773ffd.png)

又、作業を開始する前の前提として

1. GitHub のアカウント → 作成済み
2. repository → 作成済み
3. git push まで終わっている

という所から始めます。

## 手順

### 1.  アカウント作成及び Deploy 前の設定まで

1.1　[render.com](http://render.com/) の公式を開き、「DASHBOARD」をクリック
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/dbe635b3-672a-ae31-c81a-d65a10a88565.png)

1.2　任意の方法で Sign in。（この時点で GitHub のアカウント連携すると後々楽です）
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/c3b1cd1d-64a6-af40-fbc3-34f344555853.png)

1.3　Sign in 完了後、redner.com の DashBoard が参照できる事を確認し、Web Services の「New Web Service」をクリック
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/d8a1160a-0cad-9e42-57e6-0f6d6e599cac.png)

1.4　GitHub 連携をするため、「Configure account」をクリック
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/a6ee2063-7014-c9b3-f905-d6ae3af47551.png)

1.5　ここでは、Only select repository を選択し Select repositories をクリックする。その後、作成した repository が出てきますのでお好きなものを選択します。その後 install ボタンをクリックしましょう。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/e5e103c3-f684-e44d-9b8e-1d1d50fbf63b.png)

1.6　connect a repository に追加された事を確認し、「Cennect」をクリック
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/e749ef0e-5a59-e0a6-b7d2-af61ea76ff9d.png)

1.7　アプリケーションの名前を決めたり設定等を選択していきます。基本的には既に入力済みなのでそのままでも問題なさそうです。参考までに以下の項目は私の場合です。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/08432fd0-2126-00be-4134-a152d681e073.png)

- Name：test-deploy（アプリケーション名）
- Region：日本がなかったので適当にシンガポールを選択
- Branch：変更せず（ main である事は一応確認）
- Root Directory：変更せず
- Runtime：変更せず
- Build Command：変更せず
- Start Command：変更せず
- Instance Type：変更せず（ 念のため free が選択されている事を確認）

上記の項目の入力が終わったら、ページ下部にある Advanced をクリック
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/61279c91-cb4a-e841-1d9b-686b3f5d4bbf.png)

1.8　Rails アプリケーションを本番環境で動作させるための環境変数を設定します。key には `RAILS_MASTER_KEY` 、Value には `config/master.key` ファイルの中身を入力します。ターミナルで、`cat config/master.key` と実行しコピペしましょう。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/be500b6b-e2df-e60e-1975-975ec3cba4ec.png)

1.9　以上で Deploy 前の設定は終わりなので、Create Web Service をクリックします。すると、自動で Deploy が始まります。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/1e008c5b-b76d-b6b6-972b-3eeb79fee41c.png)

### 2. Deploy

- Deploy 中

2.1　DashBoaed では、以下のように「Deploy in progress（デプロイ中）」だったり、Deploy の状況が Status に表示されます。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/ec20fcc6-9f03-545d-8230-2ae18a808543.png)

2.2　DashBoard の Events をクリックすると、Deploy 履歴や Status などが表示されています。Deploy して、成功したり失敗したりなどした場合はこちらに追記されていきます。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/78985e9c-a23e-e0e1-7e62-9d97ac309931.png)

- Deploy 完了

2.3　Deploy が完了すると、以下のように「Deploy succeeded（デプロイ成功）」となります。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/459b9f05-bad1-fa2f-336f-7617411eb807.png)

2.4　DashBoard の Events だと以下のように、Deploy が成功したのか失敗したのか、いつ実行されたのかなど時間も表示されます。又、git commit -m “commit message” 時のメッセージもこちらに表示されてますね。Deploy が成功したらアプリケーションの URL をクリックしてみましょう。
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/46580890-9343-e364-0d56-2480adef19e6.png)

2.5　hello, world! と表示されていますね。ちゃんと Deploy 出来ている事も確認出来ました。良かったです。
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/188642be-0aea-0522-57cc-8c1d7cbd398c.png)

### 3. Deploy でエラーが起きた場合

Deploy 失敗した場合は、以下の様に「Deplo Failed（失敗）」と表示されています。

- Dashboard 画面

![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/fa2b020f-b8f6-11c9-5408-a35e21d48d8f.png)

- Dashboard → 対象のサービスをクリック → Events 画面

![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/839dce79-de31-6374-1228-c9fc380b5b7d.png)


Error Log を確認する手順は以下です。

3.1　原因を特定する為には、Events 画面を開いた状態で「deploy logs」をクリックします。
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/5e0fabf0-d3f3-ef88-f310-a3b397015182.png)

3.2　以下の様に Log が出てきますので、問題がありそうな箇所を探し出し対処しましょう。「cause」とか「Failed」とか「error」とかで検索するのも良いかと思います。
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/a5d14fdb-c114-6ca8-376f-ad392faa6ab8.png)

3.3　Deploy で躓いてしまった方向けに、参考になりそうな記事を何個か貼らせていただきます。

https://qiita.com/sajiki09/items/e25bba9b716865203ba5

https://qiita.com/keningenuity/items/77de6ff05afeb6e6e594

### 4. 現在の無料利用枠の使用状況を確認したい場合

デフォルトの設定ではクレジットカードなどの登録もしてないですし、無料使用枠を超えたからといって課金されるわけではありません。（翌月まで Stop になるだけです）
しかし、現時点でどれくらい使っているかはざっくりと知っておいた方が安心でしょう。

Billling 画面から、現時点での以下の情報を確認出来ます。

- インスタンス稼働時間
- 空き帯域幅
- ビルド合計時間

手順は以下です。

4.1　画面右上のアカウントをクリックし、「Billling (予算) 」をクリック
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/947c7e86-35c0-3617-4443-f3df453261d5.png)

4.2　「Free Usage（無料使用）」をクリックすると、上記で説明した「インスタンス稼働時間・空き帯域幅・ビルド合計時間」などの現時点での使用量を確認出来ます。月末で使いたいけど使えない。とならないように計画的に使用しましょう。
![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/022a04ca-219e-639b-c42e-ab185ce30528.png)

以上

## まとめ

お疲れ様でした！

今回は、render.com というサービスについてざっくりまとめてみました。
まだ浅い部分しか触ってませんが、UI なども分かりやすく直感的に操作も出来るのでかなり良いな、って印象です。
又、制限はありますが無料で使えるのが本当に助かります。

言語設定で、日本語に出来ない部分はありますが、私はそんなに困らなかったのでマイナスにもならなかったです。
英語苦手な方は、chrome の機能で日本語に出来る機能もついてるので、それを使ったりするのも良いと思います。
後は、Google 翻訳や DeepL などもありますしその辺を上手く活用しましょう。

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