Herokuが無料で使えなくなるのでRenderへ移行する（Renderのデプロイ）

# はじめに
Herokuユーザには衝撃的だった「Heroku無料やめるってさ！（[heroku next chapter](https://blog.heroku.com/next-chapter)）」事変。。

僕も個人で作ったWebアプリはHerokuで稼働させてもらっていたので、かなりの衝撃でした。
ただ、無料で使えていること自体が奇跡的だったのでHerokuの皆様には感謝しかないです。

とは言え、いきなり有料で使うことができなかったり、テスト環境として無料で簡単にデプロイできる環境がほしいのが現実。

そういう背景もあり、Herokuに代わるPaaSを探していたところ出会ったのが「Render.com」でした。


「Render」は端的にいうとHerokuライクに使えて無料枠もかなり充実しているPaaSです。
今回初めて使ってみたのですが、使い方・デプロイ方法はHerokuとよく似ています。
基本的にはコードをそのまま移植できるので、代替サービスとしては優秀すぎるサービスでした。

ただ、DBは無料で使い続けることができないので、その点は要注意。
また、日本ではHerokuに比べ利用者が少ないのか圧倒的に日本語の情報が少ないのが現状であり、利用にあたりハードルになる部分だとは感じています。

今回は移行に備え、備忘のためRenderアカウントの作成からサンプルWebアプリのデプロイの流れを一通り記録しておきました。

※RenderとHerokuの比較については[こちらの記事](https://zenn.dev/mc_chinju/articles/compare_render_and_heroku)が素晴らしすぎるのでご参照。


# この記事で得られること
- Renderのアカウント作成方法
- RenderでのWebアプリの作成方法
- Python＋Flaskアプリのデプロイ方法


# 1．GitHubのアカウントを作成
Renderにアプリをデプロイするのに、Gitのリポジトリが必要になります。
RnederではGitHub or GitLabをサポートしているので事前にアカウントを作成しておきましょう。

なお、この記事ではGitHubを利用しています。

※GitHubのアカウント作成方法はこちらの記事をご参照

https://qiita.com/ayatokura/items/9eabb7ae20752e6dc79d


# 2．Renderアカウントの作成
### Render.comからGitHubアカウントで認証

https://dashboard.render.com/register?next=/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/f7eb8340-51e2-9ffc-865e-680fa312f9a5.png)

・GitHubを選択し、「Authorize Render」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/cc77bf0a-cae4-e518-8db4-92620181778f.png)

### メールアドレスを認証
**Activate your Render account** という件名でGitHubのアカウントにメールアドレス認証が届いているはずです。
メール内のURLをクリックして、認証します。

### ダッシュボードが表示される
Renderのダッシュボードが表示されたらアカウント作成完了です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/ad409047-a639-e883-97f1-073fcc5bffa9.png)

# 3．Webアプリの作成
アカウントが作成できたので、さっそく儀式の「Hellow World」やってみましょう。
ありがたいことにRenderのDocsにPython ＋ Gunicorn ＋ Flaskのデプロイ方法が解説されていたので、今回はこれを使わせてもらいます。

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


## （1）Gitリポジトリを作成
RenderでアプリをデプロイするにはGitリポジトリが必要になります。
Gitリポジトリの作成やファイルのcommit方法はやり方が色々あると思いますが、今回はそこが主旨ではではないので、あえてGitHubのWebサイトの操作で全て完結できる手順を記載します。


### ソースコードをダウンロード

公開されているリポジトリからサンプルコードをダウンロードします。

https://github.com/render-examples/flask-hello-world

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/35ff1c94-f1fb-b009-b307-d042b93fc79b.png)


### Gitリポジトリを作成
自身のGitHubのWebページより、リポジトリを作成します。

- Repositoryname：任意名称
- Pirvateを選択（公開したければPublic）
- その他はDefaultのままとし、「Create repository」をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/96b1ff1b-c27c-d920-61fe-93e2e485fea9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/c0a3986e-0913-2b89-1232-595afffd784b.png)


### ソースコードを登録
リポジトリが作成できたら、先程ダウンロードしたソースコードを解凍し、作成したリポジトリに登録します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/4c8f54fd-0830-383d-d049-c612fdb9de81.png)

ファイルをドラッグ＆ドロップしてファイルをUpload
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/2eaafd6a-ee65-2639-2add-2d99746ec0ad.png)

### リポジトリにCommit
任意のcommitメッセージを入力し、commitします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/6d030569-31e6-1018-7fea-5cc27d5384dd.png)

commitが成功したら、デプロイ用のリポジトリの準備は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/670c4607-d869-a009-7ee1-503cba413ca8.png)



## （2） Web Service 作成 ＆ デプロイ
リポジトリの準備ができたのでRenderでWebServiceを作成してデプロイしていきます。

### Web Service作成
Renderのダッシュボード画面上部の「New ＋」から「Web Service」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/83bba021-a8aa-453e-684e-1ff915606419.png)


### GitHudと接続

自身のGitHubに接続し、リポジトリを読み込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/1af7339b-843b-5540-6236-07694eab5d02.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/89ccef57-7f04-2750-4a22-d37aee23ddf8.png)

GitHubとの接続が完了したら先程作成したリポジトリが表示されるので、「Connect」をクリックしリポジトリを登録します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/adf24615-5397-e605-2786-fd954e62dade.png)

### プロパティ情報を設定し作成
リポジトリを登録したら、プロパティ情報を設定し「Web Service」を作成します。

- Name：Web Serviceの名前
- Environment：Web Serviceの実行環境。Pythonを選択
- Region：Web Serviceが実行される地域。一番近そうなSingaporeを選択
- Branch：デプロイしたいコードが存在しているGitのBranch。Branchを作ってなければmainになるはず
- Build Command：「pip install -r requirements.txt」※ビルド時にrequirements.txtに記載されたモジュールがインストールされる
- Start Command：「gunicorn app:app」　※Web Servicesを起動するコマンド。gunicornについては[こちらの記事](https://techblog.finatext.com/flask-life-to-understand-from-zero-re-9bf283ee5fae)が素晴らしく分かりやすいので参照。
- Plans：Free を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/26fac2d9-192e-abc7-548e-39897e6ea71e.png)


### デプロイが完了するのを待ちます
デプロイログの画面が表示されるので、デプロイが完了するまで待ちます。
デプロイ時間はビルドするモジュールや、インポートしている内容によって大きく変動すると思いますが、今回デプロイした最小構成Webアプリだと5分程度かかりました。
（この辺は圧倒的にHerokuの方が早かった印象です。無料プランなのでデプロイも低速の模様）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/1a755e83-1e02-7f3d-ae88-40b6b9db35f0.png)


### Web Serviceにアクセス！！
Dashboard上部にWeb ServiceのURLが表示されています。
このURLよりWeb Serviceにアクセスできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/dbfdfc62-5f00-46dd-ace6-bf875f6753e1.png)

無事「hellow word」が表示されました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1955406/9f7c0581-ed23-8f2d-b112-c84c3f9459e9.png)


# 最後に
今回はサンプルコードでRenderへのデプロイまでを一通りやってみました。
これとは別に、現在Herokuで動かしているWebアプリをお試しで移行してみましたが、コードを修正することもなく移行することができ、DBを使わない系のWebアプリなら代替サービスとして問題なさそうです！！
ただ、この記事を書き終わって気が付きましたが、CronJobは無料で使うことができないようなので、この辺は別途工夫が必要そうです。