仮想通貨ブログに専念するため、たまーに更新します!仮想通貨ブログはこちら!

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

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

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

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

  • 本記事の内容
  • S3画像を直接URL指定で利用する方法
  • S3のポリシー設定
  • 新規ファイルアップロード時の仕様
  • 本記事の執筆者
いずみん(@izumin_0401)

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

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

いずみん

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

プログラミングを学びたい方必見!

オンライン特化のプログラミングスクールなら「」が超おススメ!

副業としてプログラミングを学びたい方にもおすすめのスクールです!

  • 初心者が9割以上なので挫折せずに学べる!
  • 受講者に副業の仕事を1案件以上斡旋! ※条件あり
  • オンライン完結型なので、在宅でもお仕事可!
  • プロのメンターがサポートしてくれる!

キャリアカウンセリングメンター相談無料でできるのもおすすめポイントです!

目次

制限ありの場合を確認

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の設定を行うこと。
  • 自由な生き方がしたいなら!

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

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

稼ぐスキルを身に付けよう!!
SNSもフォローしてね!

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

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