画像アップローダーをReactとFlaskで作る

ポイント

画像自体は外部ストレージで管理して、DBでは画像URLを管理。

ローカル開発の全体像

学び

back_endとfront_endのgit管理は分ける

まともにアプリを一から作ってデプロイしたことがなかったので、今回初めて分かったのですが、herokuの場合はroot直下にherokuを動かすためのファイルをいろいろ作る必要があって、そこの階層をスタートにすると読み込むpathがローカルの時と変わってきて、、みたいな感じでごちゃごちゃになりました。なので予めgit管理を分けておけばこのような自体は未然に防げたと思います。

herokuはファイルシステムを扱えない

これに今回一番苦戦したんじゃないかなと思うのですが、herokuで例えば”コマンドを実行してsample.txtファイルを作る”ということは全くできなくなっています。
今回私の場合は

1. 画像を一旦uploadsディレクトリ配下に画像ファイルとして保存して後で読み込む
2. migrationsディレクトリをherokuコンソール上でmigrateする(migrate用のファイルが作られます)

この二つで詰まりました。どちらもheroku上でgit管理外のファイルを新しく生成しようとしており、herokuの仕様上ダメでした。対処法は以下の通りです。

1.PILのImageを利用

# bytes形式で読み込み
img = Image.open(file) #FileStorageクラスがなかなか厄介
# メモリでデータを保持する
bio = io.BytesIO()
img.save(bio, format=image_format)

blob.upload_from_string(data=bio.getvalue(), content_type=content_type)

2.ローカルでmigrateまで済ませた後にpushしてheroku上でupgradeのみ実行する

隠しjsonファイルをheroku上で読み込むには環境変数に無理やり入れる

firebaseの認証にjsonファイルを読み込む必要がありました。

cred = credentials.Certificate('./serviceAccountKey.json')

ただ、これは大事な情報でgitで管理はできないため、heroku上にはないことになってしまい、jsonファイルがないよというエラーが発生しました。解決策としては中身のjsonを無理やり環境変数に入れることで対応しました。

export SERVICE_ACCOUNT_KEY='{"type": "service_account","project_id": "...