Django REST Frameworkをバックエンドに、Next.js+MUIをフロントエンドにして、Markdown形式で記事を投稿するブログを作成しました。【Part 2】

ブログ作成についてまとめました。

Django REST Framework + Next.js (MUI) + Markdownでブログを作る【Part 2】

Django REST Frameworkをバックエンドに、Next.js+MUIをフロントエンドにして、Markdown形式で記事を投稿するブログを作成しました。【Part 1】

Django REST Framework + Next.js (MUI) + Markdownでブログを作る【Part 1】

脱HerokuにともないRender.comにデプロイしてみました。

## はじめに
今に始まったことではありませんが、個人開発者の味方Herokuが無料で使えなくなったことで、同様の価格帯・スペックでテスト用・POC用に利用可能なRender.comに乗り換えた方も多いのではないでしょうか？私もついに重い腰を上げてRender.comを試してみたのでデプロイまでの方法まとめておきます。

### 注意（追記）
Render.comではSSH接続・ShellはFreeプランでは利用できません。そのため、本記事によってデプロイはできても利用ができません（申し訳ありません！！）。有償に切り替えるかデプロイ前にDjangoのSuperuserを作成しておく必要があります。前者については有償利用に切り替えるだけですが、後者については本記事に記載はないので予めご了承ください。。

## デプロイまでの流れ
デプロイは以下の手順で実施していきます。

1. アカウント作成
2. 必要ファイルの作成
3. リポジトリと接続
4. デプロイ

※ちなみに、[公式ドキュメント](https://render.com/docs/deploy-django)を見るとパッケージ管理ツールに`pip`ではなく`poetry`を使っていますが、`pip`でも問題なくデプロイできました。

## 1.アカウント作成
2023年6月時点では、GitHub・GitLab・Google・Emailでのアカウント作成ができるようです。今回私はGitLabのプロジェクトをデプロイを利用したいのでGitLabを選択しました。省略しますがメール認証・パスワード設定等をしてアカウント作成完了です。

## 2.必要ファイルの作成
Render.comにデプロイするには既存ファイルの変更、新ファイルの作成が必要になります。新ファイルは全てルートディレクトリに作成します。以下、+が新ファイル、▲が変更ファイルになりますが、下の順番で作成していくとスムーズにいくと思います。
* ▲project名/settings.py
* +requirements.txt
* +build.sh
* +render.yaml


### ▲project名/settings.py
まずはsettings.pyの修正をしていきましょう。

<script src="https://gitlab.com/-/snippets/2565110.js"></script>

省略されているコードが複数箇所ありますが、変更部分は「#(追加)」とコメントアウトしている部分になります。
DBの設定部分についてはHerokuでも同様なので、Herokuから移行する場合には追記しなくでも大丈夫だと思います。
また、`WhiteNoise`はDjango REST Frameworkでは不要かもしれませんが（未検証）、公式ドキュメント通り一応設定してみています。

### +requirements.txt
次に、ローカルでインストールしたパッケージを本番環境でも利用するために、パッケージをリスト化した`requirements.txt`ファイルを作成します。

<script src="https://gitlab.com/-/snippets/2565111.js"></script>
本当はもっと多くのパッケージをインストールしていますが、紛らわしいので省略してしまっています。ただし、`settings.py`ファイル修正時に追加したパッケージ（`whitenoise`, `psycopg`, `gunicorn`等）については必ずインストールが必要です。
`requirements.txt`ファイルは以下のコマンドを実行することで作成可能です。

```
pip freeze > requirements.txt
```

### +build.sh
次に`+build.sh`ファイルを作成します。デプロイ時に実行されるコマンドを記述したファイルです。

<script src="https://gitlab.com/-/snippets/2565107.js"></script>

通常ローカルでも利用するコマンドなので説明は省略しますが、ここでは上で作成した`requirements.txt`をインストールしているのがポイントです。

### render.yaml
最後にRender.comにおける環境を設定する`render.yaml`ファイルを作成しましょう。

<script src="https://gitlab.com/-/snippets/2565109.js"></script>

ここまで上記で設定してきた内容を反映していることが分かりますね。
Herokuの場合はUSとEuropeから選択できますが、Render.comではSingaporeも選択肢にあるのが大きな違いですね。
また、上のように`envVars`に値を入力すると、デプロイ時に環境変数を手動でセットしなくても自動で設定してくれるので便利です。

## 3.リポジトリと接続
必要なファイルが作成できたら[ダッシュボード画面](https://dashboard.render.com/)にいき、下の画像のようにヘッダーにある<strong><i>"New"</i></strong>から<strong><i>"Web Service"</i></strong>を選択します。<strong><i>"Configure account"</i></strong>（画面右側中央部）からGitLabと接続しましょう。GitLabとの接続が完了したら画面中央部に接続可能なリポジトリが表示されるので、該当のプロジェクトを<strong><i>「Connect』</i></strong>ボタンをクリックして接続させます。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/gitlab-render-django1_f53brc">

## 4.デプロイ
上で<strong><i>「Connect」</i></strong>ボタンをクリックすると下のような画面に遷移します。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/gitlab-render-django2_stnfgj">

ここから<strong><i>"Name"</i></strong>に`render.yaml`ファイルで入力したプロジェクト名を転記、他の項目も必要であれば変更を加えていき（ほぼ変更不要だと思います）、ページ最下部の<strong><i>「Create Web Service」</i></strong>を押すと、下のようにデプロイが走ります（画像では途中でキャンセルしています※なお、赤い網掛け部分にはGitLabのリポジトリのパスが表示されています）。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/gitlab-render-django3_pwfsco">

下の画像のように、左ナビゲーションの<strong><i>"Events"</i></strong>から青緑色の雲マークが表示されればデプロイ完了です。あとはDjangoのSuperuserを作成して、、という流れですが、冒頭記載の通りFreeプランではShellが使えないので、よろしければこちらの[記事](https://qiita.com/kkk777/items/91a00e431d3e1d72d51e)を参考にされると良いかもしれません。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/gitlab-render-django4_ur4s9w">

## まとめ・参考
### 参考
* [Renderにデプロイ（Django）](https://qiita.com/kkk777/items/91a00e431d3e1d72d51e#django%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E4%BD%9C%E3%82%8B)