プライベート写真の保存にGoogle Driveの課金が高いので自作した
初めに
子供の写真を撮っているとスマホの画像があっという間に増えてしまいます。Androidユーザーの私はGoogleフォトにバックアップされるわけですが、無料の枠では収まらなくなってしまいました。
少しでも月額を減らすために自作してみたらいい感じに費用を削れたので紹介したいと思います。
一覧
アップロード
- 開発期間：10日
- リポジトリ(※自分用で作ったのでかなり汚いです)
コスト感
1$ / 150円換算
| 50GB | 100GB | 200GB | |
|---|---|---|---|
| Google Drive | 290円 | 290円 | 440円 |
| 作ったもの | 36円($0.24) | 81円($0.54) | 171円($1.14) |
基本的にはストレージのみです。
- ストレージ
- $0.006 / GB / 月
- 10GBまで無料
- 配信
- Backblaze B2とCloudflareの提携により、Cloudflare経由のダウンロード配信は無料
- https://www.backblaze.com/docs/cloud-storage-deliver-public-backblaze-b2-content-through-cloudflare-cdn
- その他
- 読み取りやアップロードでAPIトランザクション（Class B/C）などがかかりますが、今のところ無料枠を超えたことはないのでほとんどないものと捉えて良いでしょう。
使用技術
クライアント
Next.js 16をVercelで動かしています。個人アプリなので無料で利用できます。
OpenNext(Cloudflare)で動かしていましたが一部動かない部分があったのでやめました。
VercelのHobbyプランでは、next/imageの上限が1000枚のため今回のケースでは不十分です。そのため、画像のリサイズなどはAPI Routesでエンドポイントを作っています。
認証はAuth.jsでGoogle認証のみ実装しています。DBは無しで、メールアドレスの許可リストのみ利用できます。
画像配信
Cloudflare WorkersからBackblaze B2のバケットを読み取って配信しています。基本的には下記のまま実装しています。 当初Auth.jsの認証Guardを作ろうと思っていた名残でHonoで書き直しています。(next/imageで認証を突破できず断念しました)
許可されたユーザー以外はURLの直叩きでも表示させたくなかったので正規アプリからの遷移時のみ画像を表示することができます。
実はヘッダーを書き換えれば表示はできます。誰でも見られる状態にはしたくない温度感だったため、ここは厳密に制御していません。ヘッダーを書き換えてまで見たい人は可愛い我が子を見ていただければと思います😄
オブジェクトストレージ
Backblaze B2を使っています。ここが肝なので料金が抑えられそうなものを厳選しました。
バケットはprivateで、基本的にアプリからしか見ることはできません。
ストレージ料金も激安ですが、cloudflareから配信することで読み取り無料なのは大きいです。
その他
- turborepo
- biome
機能
用途は子供の画像を夫婦間で共有の場所にアップしておき、閲覧できるようなイメージです。
- 画像アップロード（万単位のアップロード想定）
- 一覧表示
- 無限スクロール
- 表示列数の変更
- 詳細表示
- 動画再生対応
- スライド表示
- ダウンロード
- 閲覧制限
- 許可リストのアドレスのみ許可
- URL直叩きも禁止
まとめ
完成して2日ほどですが、利用料を見ても想定したコスト感になっていて満足しています。
子供の写真は夫婦間で送り合い、2つのスマホに同じ画像が存在する状況が多いと思いますが同じ場所のものを共有できるようになってよかったです。また、送られたものを厳選して保存する手間がなくなったのも便利でした。
こういったものは一度課金したら一生払い続けることになりそうなので、節約できてよかったです。
Discussion