やっほー
S3_3

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

  • 2020年4月4日
  • 2021年4月7日
  • AWS
  • 1002view
AWS S3_3
S3のバケットって色々ポリシーがあってややこしい

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

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

泉アイコン
この記事を書いた人
(いずみん)

当ブログ管理者
・エンジニア
・新プログラミング言語『Zero』開発
・保有資格約20個
・投資好き(日本株・仮想通貨)
・オンラインカジノ好き(ルーレット)
・47都道府県制覇目指し中
⇒Twitter(@izumin_0401)
⇒Instagram(@izumin0401)

まずは制限ありの場合を確認しておく

S3はオブジェクトに対して「オブジェクトURL」があるので、そのURLを叩けばアクセス可能かが判断できます。

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

 

S3

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

 

S3_2

こんな感じでアクセス拒否されます。

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

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

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

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

S3_3

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

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

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

 

S3_4

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

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

 

S3_5

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

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

↑だけです。これで画像等が表示されていれば完璧です。

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

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

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

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

S3_6

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

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

もちろん、今までやってきたように後からでも変更可能です。

AWS SDKの場合

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

 

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

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

まとめ

S3のポリシーはややこしいですね。

何が正しくて何がベストプラクティスなのかが良く分からない。。

ではまた!

きも男
あばよ
S3_3
フォローしてもらえると泣いて喜びます