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のDB操作を学んでみました。

## はじめに
以前からHerokuに関する記事をいくつか作成していますが、今回は諸般の事情でDBのテーブルを削除する作業が発生しました。誤って消すと面倒なのでDBは必要に応じてしか触ったことがなかったのですが、せっかくの機会なので色々な操作を学び直してみました。

## Heroku Postgres
Herokuが公式にサポートしているDBは[<strong>「Heroku Postgres」</strong>](https://jp.heroku.com/postgres)という<strong>Herokuのプラットフォーム上で動くPostgreSQL</strong>だけなので、その前提でDBを操作していきます。Heroku Postgresは、Heroku SchedulerやCloudinaryと同様に[add-ons](https://elements.heroku.com/addons/heroku-postgresql)から追加可能です。追加後、環境変数には自動でPostgreSQLのURLが追加されます。

## 操作
今回はDB操作だけでなく、Heroku CLI操作の基本も含めてまとめていきます。順序としては、ログイン〜DB情報表示〜DBバックアップの表示・作成〜DBバックアップのダウンロード〜DBテーブルのエクスポート・削除という流れで説明していきます。

### Herokuログイン〜DB情報表示
`heroku login`でログイン後、まずは`heroku pg:info`でDBの情報を確認しましょう。一部、数字をいじっていますが、こんな感じで表示されていると思います。
<script src="https://gitlab.com/-/snippets/2579216.js"></script>

### DBバックアップ表示
続いてバックアップ関連情報一覧の表示です。`heroku pg:backups`から確認できます。利用できる機能は以下の通りです。
* `=== Backups`・・・バックアップの作成履歴
* `=== Restores`・・・バックアップのリストア履歴
* `=== Copies`・・・バックアップのコピー履歴

バックアップの作成・リストアは実施履歴がないので、実施日時には何も表示されません。3行目の通り、バックアップ作成のために`capture`を利用しましょう。

<script src="https://gitlab.com/-/snippets/2579215.js"></script>

### DBバックアップ〜ダウンロード
それでは`heroku pg:backups:capture`でバックアップを作成します。8行目のように、`b002`というIDでバックアップが作成されたというメッセージが出ています。バックアップ作成後、再度`heroku pg:backups`でバックアップ情報を確認すると、`=== Backups`の欄に先ほどのIDが表示されていることが分かりますね。また同じテーブルに実施日時が表示されていますが、クソデカデータではないので2秒ぐらいで完了しているようです。

その後、`heroku pg:backups:download`で作成したバックアップをダウンロードします。コマンド実行後、デフォルトではコマンド実行時と同じ階層で、`latest.dump`という名前のファイルでダウンロードされます。

<script src="https://gitlab.com/-/snippets/2579217.js"></script>

### DBエクスポート（CSVファイル）
上の章ではDB自体のダウンロードをしましたが、こちらではより実践的にDB内のテーブルをCSVにエクスポートしてみます。
エクスポートする前に、CSVに落としたいデータがどのテーブル内にあるか確認しましょう。エクスポートしたいテーブルは`sample_group`テーブルに入っていそうです。
※なお今回は使用しませんが、SQLコマンドを操作するためには`heroku pg:psql`の他に、`$ heroku config`でHerokuで設定済みの環境変数を表示し`DATABASE_URL`の値を取得した後、`$ psql [DATABASE_URL]`でDBにアクセスする方法もあります。

<script src="https://gitlab.com/-/snippets/2579220.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.1) まずは<code>heroku pg:psql</code>でDBをSQLコマンドで操作できるようにします。今回は<code>psql</code>の後に、<code>[App Name]</code>と同時に<code>-c</code>を加えることでDBと接続させます。さらに、<code>"\d"</code>を追記することでデータベース内の全テーブルを表示します。</li>
<li>(l.10) <code>（4 rows）</code>とあるように、このDB内に4つのテーブルがあることが分かりました。エクスポートしたいテーブルは<code>sample_group</code>テーブルに入っていそうです。※ なお今回は使用しませんが、SQLコマンドを操作するためには<code>heroku pg:psql</code>の他に、<code>$ heroku config</code>でHerokuで設定済みの環境変数を表示し<code>DATABASE_URL</code>の値を取得した後、<code>$ psql [DATABASE_URL]</code>でDBにアクセスする方法もあります。</li>
<li>(l.12) 続いてエクスポートを実施します。(l.1) 同様に<code>heroku pg:psql</code>でSQLコマンドを操作できるようにします。</li>
<li>(l.18) すると今度は<code>[App Name]::DATABASE=></code>と表示されSQLが書けるようになります。ここで<code>\copy</code>を使ってテーブルを全選択した状態で最後にHEADERを加え列名が入った形でCSV出力を指示しましょう。コマンド実行時と同じ階層で<code>sample.csv</code>が作られているはずなのでこれで完了です。</li>
<li>(l.19) <code>COPY 10</code>は、列名含めて10行のデータが存在することを示しています。</li>
</ol>
</details>

#### 列を指定してエクスポートする
今回は(l.18) の通り`SELECT * FROM public.sample_group`としているのでテーブルがそのまま出力されてしまっていますが、先ほど出力した`sample.csv`を見ると`player`という名前の列があることが分かりました。そこで、`*`として全列を選択している部分について`player`に変更して改めてCSVエクスポートを実行すると`player`列の全値が出力できます。また同時に`WHERE`句を使えば、列内で条件に合った値のみを出力可能です。このあたりは一般的なSQLの構文ですので、[こちらの記事](https://qiita.com/tatsuya4150/items/69c2c9d318e5b93e6ccd)を参考にしてもらうと分かりやすいと思います。

#### Heroku Dataclipsを使用する場合
またCSVにエクスポートするだけならHerokuの[<strong>「Dataclips」</strong>](https://data.heroku.com/dataclips/)を使ってみても良いと思います。
詳しくは下の記事を参考にしてみてください。
* [HerokuのDataclips使ってみた。](https://techblog.futosh1.com/blogs/heroku-dataclips-howto)


### DBテーブル削除
バックアップ作成+CSVエクスポートの両方が完了したので最後にテーブルを削除します。
<script src="https://gitlab.com/-/snippets/2579222.js"></script>
上のコマンドを実行するだけですが、その際`ERROR:  cannot drop table sample_group because other objects depend on it`というエラーが出ることがあります。これは、他のテーブルを参照しているために発生するエラーですので、関連するテーブルを削除する必要があります。問題なく任意のテーブルが消せていたら、再度`DROP`すると`ERROR:  table "sample_group" does not exist`（=対象のテーブルが削除できたため）というエラーが出るはずですので、これで完了です。
## まとめ
DB削除は注意しましょう。バックアップだけは忘れないように実施しておきましょう。
### 参考
* [Heroku Postgres](https://jp.heroku.com/postgres)
* [Qiita - 【これだけ覚えてたらOK！】SQL構文まとめ](https://qiita.com/tatsuya4150/items/69c2c9d318e5b93e6ccd)

HerokuのDB操作いろいろ

Herokuのadd-onsで、画像管理サービスのCloudinaryを使って画像を保管してみました。

## はじめに
Herokuの優れている点に、多くのadd-onサービスとの連携ができることがあると私は勝手に考えています。その中でも今回利用したのは画像や動画を管理できるサービス、<strong>Cloudinary</strong>です。画像・動画はどうしてもサイズが大きくなるのですが、Cloudinaryであれば1GBまでは無料で利用できるんです。ありがたいですよね。そこで今回はDjangoプロジェクトの画像保管先として利用するための方法についてまとめました。

## 全体の流れ
* Heroku側の設定
* Djangoプロジェクトの側の設定

## Heroku側の設定
* Herokuのadd-onは、[[ダッシュボード]](https://dashboard.heroku.com/apps/) > [Resources]タブ内に<strong><i>"Add-ons"</i></strong>という項目があり、その画面右側の<strong><i>「Find more add-ons」</i></strong>ボタンから下の画面に遷移して追加できます。<strong>Heroku Postgres</strong>を設定したことがあれば分かるかもしれませんね。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/heroku-cloudinary-setup1_clltt0">
* 今回利用するサービスは、右上の検索欄から"cloudinary"と入力すると見つかるので、表示されたアイテムをクリックしてください。
* サービスの画面に遷移すると、サービス・<strong><i>"Region Availability"</i></strong>の説明があり、その下に<strong><i>"Plans & Pricing"</i></strong>があると思います。今回は<strong><i>"Starter"</i></strong>プランを選択した状態で右横にある<strong><i>「Install Cloudinary」</i></strong>ボタンを押しましょう。
* するとダッシュボード画面に戻るので、ここで適用させたいアプリを選択し<strong><i>「Submit Order Form」</i></strong>をクリックします。
* Herokuの[ダッシュボード] > [Overview]タブに戻ると<strong><i>"Installed add-ons"</i></strong>の項目に<strong><i>"Cloudinary"</i></strong>が追加されていることが確認できます。続いて、環境変数を取得・設定する必要があるのでここをクリックして下の画像のようなCloudinaryのページにいきます。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/heroku-cloudinary-setup2_nxgqoi">
* 遷移後、トップページの画面中央部に開発言語とコードが書かれているのが確認できると思います。ここから<strong><i>「Python」</i></strong>を選択するとインストール方法と`cloud_name`, `api_key`, `api_secret`がそれぞれ表示されているのでキーと値をそれぞれ控えておき、Herokuの[ダッシュボード] > [Settings]タブにいきます
* 2つ目の項目に<strong><i>"Config Vars"</i></strong>という項目があるので、ここから<strong><i>「Reveal Config Vars」</i></strong>ボタンを押すと設定済みの環境変数と追加入力可能なフィールドが表示されます。設定済みの環境変数にはCloudinaryのURLが表示されているのが分かると思いますが、ここに先ほど控えておいた3組のキーと値をそれぞれ入力していきましょう。これでHeroku側の設定は完了です。

## Djangoプロジェクト側の設定
### パッケージインストール
* まずは"Cloudinary"のトップページに記載があったようにDjangoプロジェクトに"Cloudinary"をインストールしましょう。また、Cloudinaryのトップページには記載がなかったのですが、DjangoプロジェクトでCloudinaryを利用する際には別途`django-cloudinary-storage`と`Pillow`をインストールする必要があるのでお忘れなく。
```
$ pip install cloudinary django-cloudinary-storage pillow
```
### settings.pyファイル設定
* 続いて`settings.py`を修正していきましょう。下のソースコードのように`INSTALLED_APPS`内および静的ファイル等の記述がある画面一番下に、"Cloudinary"関連設定を追記します。#（追加）とある行が追記したコードです。
<script src="https://gitlab.com/-/snippets/2565176.js"></script>
### .envファイル設定
* 一部順番前後しますが、ローカルでの動作確認のためにも`.env`ファイルには`SECRET_KEY`や`DEBUG`に関する記述の下に3組のキー（`CLOUD_NAME`, `API_KEY`, `API_SECRET` ）と値を記述しておきます。
### models.py設定
* 次にDjangoの管理画面からCloudinaryに画像を格納するための設定をします。
<script src="https://gitlab.com/-/snippets/2565178.js"></script>
### その他ファイル設定
* `serializers.py`, `admin.py`についても設定しますが、他のモデルにおける設定と同じなので省略します。

## 画像の確認
これで設定完了です。画像を確認するためには、Djangoの管理画面から画像が格納されているデータを選択します。マスクが多く見辛くてすみませんが、下のようになっていると思います。<strong><i>"Currently"</i></strong>とある部分が現在格納されている画像のURLになっておりクリックしてみるとブラウザに画像が表示されます。その際のURLがCloudinaryの格納庫となっているわけです。ここまで記載の通り進めた場合は、"https://res.cloudinary.com/{CLOUD_NAME}/image/upload/v1/media/imgs/{img_name}"となっていると思います。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/heroku-cloudinary-setup3_y1vfzt">

## まとめ
今回CloudinaryのStarterプランを使用したわけですが、1GB超えた場合の一つ上のプランはSilver: $99/月（2023年7月時点）ということでなかなか高額なので、画像を中心としたサービスを展開する場合は別の方法を考えた方がよさそうですね。。

Herokuのadd-onsでCloudinaryを使用する方法

HerokuのデータベースをDataclipsを使ってJSON出力してみました。

## はじめに
Herokuの無償版が近々使えなくなってしまうので、そろそろやばいと思い一旦データをどこかに出力・保管しておこう、ということでDataclipsを使ってみました。ビボーロクです。

## Dataclips使ってみた。
### Dataclipsとは
一刻も早くJSON出力したいので、ここは[公式](https://devcenter.heroku.com/ja/articles/dataclips)の説明をそのままお借りします。
> Heroku Dataclips を使用すると、Heroku Postgres データベースへの SQL クエリを作成し、その結果を同僚、サードパーティツール、パブリックと共有できます。データクリップの受信者は、そのデータをブラウザで表示できるほか、JSON および CSV 形式でダウンロードすることもできます。

要するに<strong>Herokuのダッシュボード画面からJSON・CSV形式でエクスポートできる機能</strong>ということですね。これは便利。急ぎで使ってみましょう。

### 使い方
Herokuへのログイン後は[Dashboard画面](https://dashboard.heroku.com/apps)が最初に表示されていると思うので、そこからデータクリップを操作できる画面に移動しましょう。まずは[Data画面](https://data.heroku.com/)に移動し任意のアプリケーションのDBを選択、<strong><i>Dataclips</i></strong>タブを選択します。すると<strong><i>Create Dataclip</i></strong>というボタンが現れるのでクリックすると下の画像のような画面が現れます。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/heroku-dataclips-howto1_oduno6">
ほとんどの項目・テーブルがグレーの網掛けでマスクしてあるので見づらくなってしまっていますが、画像上に記載の番号通り選択・記述するだけで任意のデータをエクスポートできます。
* ①・・・データクリップ名を指定します。データクリップ1つに対し、処理は1つ書くことができます。
* ②・・・プルダウンで処理を実行したいDBを選択します。
* ③・・・DB内に存在するテーブル一覧を確認することができます。
* ④・・・SQL文を書く欄です。今回はテーブルを丸ごと出力したかったので、そのように記述しました。
* ⑤・・・④で書いたSQLの結果が表示されます。
* ⑥・・・⑤で表示された結果をエクスポートする際の形式を指定します。JSONとCSVが選択可能です。

これだけ。ほんまに簡単。

### PostgreSQLとの接続
以上で出力の作業は完了していますので、暇があればこの先読んで見てください。
* ここでは、「PostgreSQLをCLIからも操作できるようにしておかないといけないなぁ」とふと思い立ったことから、接続だけできるようにということで設定方法をまとめています。というわけでまずはHerokuのPostgreSQLに接続します。
<script src="https://gitlab.com/-/snippets/2567487.js"></script>
* 早速エラーです。ローカルにPostgreSQLがインストールされている必要があるようですね。ということで親切に[公式ドキュメントのURL](https://devcenter.heroku.com/articles/heroku-postgresql#local-setup)が記載されているので中身を見てみると、[Postgres.app](https://postgresapp.com/)をインストールするように指示があるので、仰せのままに。インストール後はPATHを通すよう指示があるので実行します。
<script src="https://gitlab.com/-/snippets/2567488.js"></script>
* これでパスが通ったはずです。もう一度接続を試みます。
<script src="https://gitlab.com/-/snippets/2567489.js"></script>
* これでCLIで操作できる環境を構築することに成功しました。

## まとめ
Dataclipのおかげで我が子のように大事なデータをとりあえずローカルに保管できました。今後Herokuを使い続けるか他サービスに乗り換えるべきか検討したいです。ただし、いずれにしてもSQLは習得する必要があるので、個人的に勉強しておかないとなぁと思った次第です。今回は<strong>あえて</strong>お試しでテーブル内の全データを出力したかのような書きぶりでしたが、それしかできないだけですので、ここにて報告させていただきます。

### 参考
* [Heroku Dev Center  - データクリップとのクエリ結果の共有](https://devcenter.heroku.com/ja/articles/dataclips)
* [Heroku Dev Center - Heroku Postgres, Local Setup](https://devcenter.heroku.com/articles/heroku-postgresql#local-setup)
* [Postgres.app](https://postgresapp.com/)