日々更新中です!

S3の画像をJavaScriptのimgタグで直接URL指定する方法!

  • URLをコピーしました!
悩んでいる男の子

S3の画像を直接URL指定で利用したいんだけど、どうしたらいいのかな?

こんな悩みを解決します。

  • 本記事の内容
  • S3画像を直接URL指定で利用する方法
  • S3のポリシー設定
  • 新規ファイルアップロード時の仕様
  • 本記事の執筆者
プロフィール
いずみん(どこの写真だよ)
  • 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
  • 物販月利50万円⇒脱サラ
  • 物販、システム開発、アフィリエイト、プログラミング、投資をやっています。
  • 物販は彼女と楽しみながらやっています!

今回は、 フロントアプリから直接S3の画像を参照する方法を解説します

通常、S3バケットは直接ファイルを参照するとアクセス拒否するように設定されています。

いずみん

すぐ読み終わるので、是非最後まで読んでみてください!

目次

制限ありの場合を確認

S3内のオブジェクトには「オブジェクトURL」があるので、このURLを叩けばアクセスできるかが分かります。

ということで、公開されていないバケットを使用して確認してみます。

公開されていないバケット内にあるファイルのオブジェクトURLをクリックします。

このようにアクセス拒否されます。

フロントアプリから直接URL指定するために

直接URL指定をするには、指定するオブジェクトが公開されていなければなりません

オブジェクトを公開し、オブジェクトURLを叩いて画像等を見ることができればフロントからも参照できます。

S3側のオブジェクト公開設定

上記のように設定します。

4つある内の、上2つをオフにします。

これだけではオブジェクトはまだ公開されていません。

バケット内の公開したいファイルを選択し、「アクセス権限」を開きます。

パブリックアクセス」の「Everyone」をクリックし、「オブジェクトの読み取り」をチェックすれば上記のような設定になります。

画像のオブジェクトURLを再度クリックすると、画像が参照できるようになりました。

フロントでS3の画像を読み込んでみる

<img src="{オブジェクトURL}">

これで画像が表示されていればOKです。

新規ファイルはどうなる?

新規ファイルをアップロードすると、デフォルトではファイルにアクセス制限がかかるのでアクセスを拒否されます。

ですので、先ほど実施したオブジェクトの公開設定を行います。

マネジメントコンソールの場合

マネジメントコンソールでファイルをアップロードする場合は、詳細で権限を変更してあげればOKです。

パブリックアクセス許可を管理する」を上記のように設定します。

AWS SDKの場合

AWS SDKの場合は、「putObject」で画像をアップロードする際にパブリック指定をするだけです。

$s3->putObject([
    'Bucket' => $bucket,
    'Key'    => $keyname,
    'Body'   => 'Hello, world!',
    'ACL'    => 'public-read'
]);
いずみん

ACLに「public-read」を指定すればOK!

ただし、ACLを設定する場合はIAMロール(権限)に「s3:PutObjectAcl」が必要です。

まとめ

今回は、 フロントアプリから直接S3の画像を参照する方法を解説しました。

S3のポリシーはややこしくて、何がベストプラクティスなのかが良く分からないですね。。

ではまた!

まとめ
  • 公開されていないバケットのオブジェクトURLを参照するとエラーになる。
  • S3バケットのファイルを参照するためには、適切なポリシー設定が必要である。
  • 新規ファイルをアップロードした場合はデフォルトでアクセス制限がかかるため、適宜権限を編集する必要がある。
  • AWS SDKの場合は、ACLにpublicの設定を行うこと。
  • 自由な生き方がしたいなら!

自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。

当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。

この記事が気に入ったら
いいね または フォローしてね!

シェアするんやで!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

いずみんのアバター いずみん 自由大好きおじ

自由大好きおじ | 物販月利50万達成⇨脱サラ | 物販(アパレルせどり)・アフィリエイト・プログラミング・投資に関する情報を発信中 | 元エンジニア | 保有資格約20個

コメント

コメントする

目次
閉じる