yikegaya’s blog

yikegayaのブログ

S3に保存した画像のサービス内での扱い

S3に保存した画像画像にいろいろ情報つけて扱う実装で考えたこと。

例えばこの画像はプロフィール画像用でこれはメモ用、とかの属性つける場合どうしたら良いんだろ。RailsとReactで作ったWebサービスで使う想定。

S3の仕組みでオブジェクトにjsonメタデータ付与できるのでそれ使って実装しようとしたんだけどいまいち綺麗に実装できなそうだったんで、RDBでS3オブジェクトのURLと属性のカラム持つテーブル作って扱ったら割と楽に作れた。

DBにobject_urlと属性を保持するフラグとかステータスのカラム持たせて、APIでDBの値取り出してReactのstateに設定して作ってみた。 テーブル作らずにS3内で完結させることもできそうだけど、まあ、コストとかパフォーマンスとかの問題もないしメンテしやすいし扱いやすいし良いか

interface Image {
  object_url: string;
  avator_flg: boolean;
}

const [images, setImages] = useState([]);

const sampleMethod = (image_id) => {
  該当の画像に対する何かの処理
}

return(
    <>
  {images.map((image, i) => (
          <img src={image.s3_object_public_url} key={i}>
          <a onClick={sampleMethod(i)}>画像に何かの情報をつけたい</a>
  ))}
    </>
)