【Render】Flaskアプリをデプロイしてみた(Heroku代替)

## 経緯

flaskで作ったWebアプリをサクッとデプロイして内輪向けに公開したかったのですが、Herokuから無料枠が消えたため代替サービスを探しました。
要件はこんな感じです。
* 無料であること
* Githubにソースコードを公開しているので、そこから直接連携できること
* DBは使わないのでこだわりなし

Googleで適当に検索したところ、Renderなるサービスがおすすめされていたので、要件を満たすようなのでこれを使うことにしました。

## Renderとは

公式サイトは[こちら](https://render.com/)

### 機能
紹介文にはこんな感じのことが書いてあります。
```
Render is a unified cloud to build and run all your apps and websites with TLS certificates, a global CDN, DDos protection, private networks, and auto deploys from Git.
```

* SSL/TLS対応
* グローバルCDN
* DDoS攻撃からの保護
* プライベートなネットワーク
* Githubからの自動保護
を提供しているみたい。

### 用途

今回はWebアプリのホスティング用途に利用しますが、このサービスでは他にも下記のものをホスティングできるみたいです。
* 静的サイト
* Dockerコンテナ
* Cronジョブ
* Baclground worker(Celery等の分散タスクキューツールを指すのだそうです)

## 使ってみた

### アカウント登録

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261258/67b7c757-6974-177d-7d57-5194c6aed8e0.png)
Githubのアイコンを押してログインして権限認可すればOK

### アプリケーションを選ぶ
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261258/1469d1ed-6c3d-f1f2-f2a2-b5c1b2e7971d.png)

Flaskをホスティングするので `Web Services` を選ぶ

### ホスティングするアプリケーションのGithubを設定する
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261258/4d2a0c0d-a09c-a2ed-913c-3eaede36a751.png)
Github以外にもGitlabのコードも持ってこれるようです。
ここでもGithubに権限を認可すればOK

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261258/93cdc179-7c69-3045-bd46-7e58c41bf2ba.png)
無事Githubと連携出来たら、次はリポジトリを選択。
今回は試していませんが、リポジトリ一覧にはプライベートリポジトリも含まれているため、プライベートリポジトリで公開しているソースコードもホスティングできるのかな？

### アプリケーションの環境・起動設定

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261258/6a6c4cce-224b-2e0c-2699-84dc05e14c75.png)
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261258/1f6cfb41-ebb2-e3be-db18-0cf9aea928a3.png)

ここでは、黄色くマークしている箇所については以下のパラメータを設定します。そのほかの部分については自分のアプリケーションや懐具合と相談して設定してください。

|  パラメータ  |  記入値  |
| ---- | ---- |
| **Runtime** | `Python3` |
| **Build Command** | `pip install -r requirements.txt` |
| **Start Command** | `gunicorn app:app` |

※パラメータはチュートリアルを参照しました。
[Deploy a Flask App](https://render.com/docs/deploy-flask)

Freeプランの場合は制約があるので、こちらも一緒にチェックしましょう。
[Free Instance Types](https://render.com/docs/free#free-web-services)

ざっくり和訳。

* 15分以上使用されないとスピンダウンする。新しいリクエストが来ると再びスピンアップする
	* そのため、リクエストの応答が遅れることがある
* 実行時間は月に合計750時間まで
* 帯域幅は月に100GBまで($30課金すると100GB追加)
	* 実際はビルドに掛かる時間にも上限がある(月に500分まで、$5課金すると1000分追加)
* ダッシュボードの課金ページで課金すれば制限を外せる
* 無料枠を使い切ったら、課金するか無料枠が復活するまでサービスは使えなくなる
* 無料枠は毎月一日に復活する


### ビルド！

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261258/c1c801e8-6328-9f1c-05e7-2bcc5980bf04.png)

ログを眺めます。そのうちSuccessfulとか出ます。お疲れ様でした。

……といいつつ、上手くいかないことがまあまああるので、トラブルシューティングは後述します。
上手くいかないところを直したら、git pushしたあとに `Manual Deploy` をクリックすると再度デプロイできます。

また、上手く行った後は git push すると特に設定もせずに自動デプロイしてくれます。便利。

## トラブルシューティング

上手くいかなかったことを記載します。

### pip の installでコケる

→ライブラリのバージョンを確認しましょう。

Pythonのバージョンは `3.7.10` と結構古めです(2023年4月現在)。適当にガシガシ書いたアプリをRenderでホスティングしよう！と思ってリリースした場合は、 `requirements.txt` に記載のバージョンが新しすぎるようなら調整しましょう。
最初からRenderを利用することが決まっている場合は、pyenv辺りを利用してPythonのバージョンを合わせておきましょう。

#### 新しめの機能使ったところでコケてるのも同じ理由かも？

適当にガシガシ書いたアプリをRenderでホスティングしよう！と思ってリリースした場合は、こういうことも起きるかもしれません。Pythonのバージョンに合わせて実装しなおしましょう……。

### `gunicorn: command not found` とか出てくる

→gunicornを利用してWSGI設定しましょう
→ `requirements.txt` にgunicornの情報を載せましょう&設定ファイルを作りましょう

私は開発中はFlaskの起動を `python app.py` で横着してたので、そもそもWSGIの設定をしていませんでした……。
そうでなくても、WSGI設定をgunicornを利用せずにやってることもあるかもしれません。
適当アプリをチュートリアルにそのまま則ってホスティングしようとした場合は、以下の作業が必要です。

#### `requirements.txt` の追記

以下のように追記します

```Python
gunicorn==19.9.0
```

#### `Procfile` の作成

ルートフォルダに `Procfile`(拡張子無し)を作成し、以下の内容を追記します。

```python
web: gunicorn app:app --log-file=-
```

## 完成品

こうして出来上がったのがこちらの~~クソ~~アプリです。

https://social-filter.onrender.com/

Twitterを中心として発生したネットミームである「社会性フィルター（[詳細](https://enpedia.rxy.jp/wiki/%E7%A4%BE%E4%BC%9A%E6%80%A7%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC)）」を実装したジョークアプリです。
このサイトには社会性フィルターと称するコメント欄があります。ここには何を書いても構いませんが、投稿してもそこに書かれた内容は**何も拾わず**、可愛いフリー画像のﾈｺﾁｬﾝの写真が表示されます。

![スクリーンショット 2023-04-13 141028.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261258/ae8b01af-2bd8-0a25-cf83-446bd40d715b.png)

ﾈｺﾁｬﾝの下にはTwitterへの投稿ボタンがありますので、これをクリックすると
```
にゃーん #社会性フィルター

(社会性フィルターのURL)
```
と投稿されます。各ページごとにTwitterカードの設定をしてるので、Twitter上にも表示された可愛いﾈｺﾁｬﾝの画像が表示されます。可愛いね。

フリープランかつ特に大っぴらに公開していないので、恐らく読者のみなさんがアクセスすると長い時間をかけてゆっくりと公開されると思われます。一度起動してしまえばページ間遷移は特に問題なく動いてくれるかと思います。
なにかの間違えでバズってしまい、750時間分の利用時間を使い切っていた場合は、アプリはサスペンドされ表示されないためご了承ください。

## 参考資料

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

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

https://tanuhack.com/deploy-flask-heroku/

これはRenderでも同手順でデプロイすることができます。

https://enpedia.rxy.jp/wiki/%E7%A4%BE%E4%BC%9A%E6%80%A7%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC