S3内の画像データをローカルのhtmlに反映する方法

Question

aws初心者です。ラズパイからS3に保存した画像データをローカルにあるhtmlに持ってこれるようにしたいのですがやり方やパス名の記述がイマイチわかりません...htmlもローカルではなくs3に保存しないといけないのでしょうか.....?

Comments

[yu_1985]

全体的にどれが何にかかっているのか、何を指しているのかがわからないのでもう少し文章を整理しましょう。
これだと何がしたいのか読み取るのが難しいです。

一応頑張って読み解くと
- Raspberry PiからS3になにかの画像を保存している
- 「ローカル」に画像データを持ってきた
はなんとなく読み取れました

わからないこと
- 「ローカル」とはどこか
- 「htmlに持ってくる」という言葉の意味
- そもそもの目的

[tasuketeman]

失礼しました、ローカルのことは忘れてください。やりたいことはS3内の画像をhtmlで表示したいということです。S3でpicture-testというバケットを作成後、その中にindex.htmlとpictureというフォルダを作り、その中に画像を一枚保存しています。このindex.htmlを開いたときにpictureの中にある画像を表示したいです。s3内での写真パスの書き方があまりわからずはまっているという感じです

Answer 1

imgタグにS3のパスを記述するということで回答になっていますでしょうか？

以下、例です。

<img src="https://s3-ap-northeast-1.amazonaws.com/{バケット名}/***/****.png">

もしくは

<img src="https://{バケット名}.s3-ap-northeast-1.amazonaws.com/***/****.png">

仕様については以下が参考になるかと存じます。
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/UsingBucket.html#access-bucket-intro

またもう１点条件として、対象のS3バケットがHTMLを表示させたいホストからアクセスできる状態になっている必要があります。バケットポリシーを編集することでアクセス権限を変更することが出来ます。

お求めの回答になっていれば幸いです。
ご確認のほど宜しくお願い致します。

Answer 2

S3で静的WEBサイトホスティングをするのが最も簡単です。
バケットの直下にindex.htmlを置いて
<img src="picture/hoge.jpg">
とすれば参照できます。

S3の外から参照するとなれば、S3のオブジェクトURLをsrcに設定します。
参考（PHPなので直接的な回答にはなりませんが）
https://qiita.com/Yorinton/items/bdf5f9bc05629c9a0df7#%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%9F%E7%94%BB%E5%83%8F%E3%82%92%E7%94%BB%E9%9D%A2%E8%A1%A8%E7%A4%BA

当然のことながら、いずれの方法でも該当の画像を公開していなければ参照できません。

その他にもCloudFrontにキャッシュさせてそのキャッシュを参照するなどが考えられます。

Comments

[tasuketeman]

無事index.htmlの画像表示できました、ありがとうございます