新プログラミング言語『Zero』を開発しました! 本サイトの記事数は「589」!!

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

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

 

S3のバケットって色々ポリシーがあってややこしい

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

というかそうなっていないとガバガバですからね。

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

 

僕のプロフィールはこちら

 

 

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

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

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

 

 

S3

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

 

 

S3_2

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

 

 

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

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

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

 

 

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

S3_3

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

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

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

 

 

S3_4

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

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

 

 

S3_5

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

 

 

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

↑だけです。

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

 

 

Advertisement

 

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

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

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

 

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

S3_6

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

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

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

 

AWS SDKの場合

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

 

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

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

 

 

まとめ

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

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

以上。

Travelerを知らないの?