S3バケットのアップロードしている画像や動画にリンクを貼る場合のURLの書き方

0

S3バケット内のファィルにアクセスし、HPで画像の表示や動画の再生を行いたいと考えています。

調べると「S3 署名付きURL」らしいのですが、その場合どのような設定をすればよいでしょうか?

profile picture
質問済み 5ヶ月前364ビュー
15回答
0
承認された回答

以下の部分をCloudFrontディストリビューションのドメインに変更すればアクセスができる (正常に設定ができていれば) と思います。
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/distribution-web-testing.html

https://manga-lp.mieux.◯◯/バケットのフォルダ/画像名
profile picture
エキスパート
回答済み 5ヶ月前
  • 出来ました! ありがとうございます!

0

署名付きURLを発行するだけであれば以下のブログの手順で可能です。
ただし、署名付きURLは期限があるので恒久的に表示するといったことであればプログラムコードで署名付きURLを取得するような処理が必要です。
https://qiita.com/dayjournal/items/c827a17917127bff3906#%E6%8C%87%E5%AE%9A%E6%9C%9F%E9%96%93%E3%81%AE%E3%81%BF%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%85%AC%E9%96%8B
https://ex-ture.com/blog/2023/09/25/s3_presigned_url/

特別、公開を制限しているようなものでなければCloudFrontとS3で静的Webサイトとして公開してそのURLをフロントエンドのコードに埋め込めばよいと思います。
https://note.com/vast_curlew334/n/nb6ab3a6a4f59

profile picture
エキスパート
回答済み 5ヶ月前
0

ありがとうございます。

以下が該当するので、ドキュメントに従って進めています。

特別、公開を制限しているようなものでなければCloudFrontとS3で静的Webサイトとして公開してそのURLをフロントエンドのコードに埋め込めばよいと思います。 https://note.com/vast_curlew334/n/nb6ab3a6a4f59

途中で

CloudFrontディストリビューション作成後のコンソール画面です。「S3バケットポリシーを更新する必要があります」と表示されるため、「ポリシーをコピー」のボタンでバケットポリシーをコピーします。 「S3バケットの権限に移動してポリシーを作成する」のリンクをクリックすることで、該当するS3バケットのポリシー編集画面に移動します。

の箇所があるのですが、 「ポリシーをコピー」のボタン がどうしても見つけられませんでした。 画面スクショ ↑ どこからポリシーのコピーを行えばよろしいでしょうか?

profile picture
回答済み 5ヶ月前
0

「ポリシーをコピー」のボタン がどうしても見つけられませんでした。

こちらはディストリビューション (CloudFront) 作成後に行う作業なので、まずはCloudFrontを作成してみてください。

profile picture
エキスパート
回答済み 5ヶ月前
0

こちら出来たと思います。

新規に作ったS3バケットにファィルを設置して試そうと思い、"Resource"セクションに新しいS3バケットのARNを追加しようと思ったのですが、エラーとなってしまいます。 エラー

構文の書き方が間違っていますでしょうか? ※以下は元々の内容です。

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Effect": "Allow",
			"Action": [
				"s3:GetBucketLocation",
				"s3:ListBucket"
			],
			"Resource": "arn:aws:s3:::mieux-dl"
		},
		{
			"Effect": "Allow",
			"Action": [
				"s3:DeleteObject",
				"s3:GetObject",
				"s3:PutObject"
			],
			"Resource": "arn:aws:s3:::mieux-dl/*"
		}
	]
}
profile picture
回答済み 5ヶ月前
0

IAMポリシーの"Resource"セクションを複数登録するには以下のようにリストにする必要があります。

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Effect": "Allow",
			"Action": [
				"s3:GetBucketLocation",
				"s3:ListBucket"
			],
			"Resource": [
				"arn:aws:s3:::mieux-dl",
				"arn:aws:s3:::sns-img"
			]
		},
		{
			"Effect": "Allow",
			"Action": [
				"s3:DeleteObject",
				"s3:GetObject",
				"s3:PutObject"
			],
			"Resource": [
				"arn:aws:s3:::mieux-dl/*",
				"arn:aws:s3:::sns-img/*"
			]
		}
	]
}
profile picture
エキスパート
回答済み 5ヶ月前
0

ありがとうございます。

リストに変更してエラーが解消されました! 早速以下の設定でアクセスしようと思ったのですが、なぜかうまくいきません。 設定 接続エラー

ディレクトリの取得に失敗しているようなのですが、何か根本的な認識が間違っていますでしょうか?

profile picture
回答済み 5ヶ月前
0

画像のアクセスキーをマスクするようにしてください。
Access Deniedなので権限エラーです。
アクセスキーを発行しているIAMユーザーが正しいのかご確認ください。

profile picture
エキスパート
回答済み 5ヶ月前
0

確認いたしました。

このユーザで現在 arn:aws:s3:::mieux-dl/ には正常にアクセス出来ますので、問題ないと考えおります。

今回このユーザに "arn:aws:s3:::sns-img" を追加しただけなので、同一のアクセスキーで接続できると考えおりました。。。

profile picture
回答済み 5ヶ月前
0

このユーザで現在 arn:aws:s3:::mieux-dl/ には正常にアクセス出来ますので、問題ないと考えおります。

誤ったIAMユーザーのIAMポリシーを編集していたりS3バケット名が誤っていたり、S3バケットポリシーで拒否されているとアクセスができないです。
IAMポリシーの内容自体は正しいと思いおますので上記の内容を確認していただく必要があります。

profile picture
エキスパート
回答済み 5ヶ月前
0

ありがとうございます。

IAMユーザのIAMポリシーが間違っていたようです。 アクセスコードと一致するユーザを選択し、以下のように変更しました。

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Effect": "Allow",
			"Action": [
				"s3:GetBucketLocation",
				"s3:ListBucket"
			],
			"Resource": [
				"arn:aws:s3:::mieux-dl/*",
				"arn:aws:s3:::sns-img/*"
			],
			"Condition": {
				"StringLike": {
					"s3:prefix": "01/*"
				}
			}
		},
		{
			"Effect": "Allow",
			"Action": [
				"s3:DeleteObject",
				"s3:GetObject",
				"s3:PutObject"
			],
			"Resource": [
				"arn:aws:s3:::mieux-dl/*",
				"arn:aws:s3:::sns-img/*"
			]
		}
	]
}

この変更で次へ、とすると以下の注意事項が表示されますが、スルーして変更保存しても大丈夫でしょうか? 注意画面

profile picture
回答済み 5ヶ月前
0

以下のIAMポリシーにしてみてください。
「s3:GetBucketLocation」と「arn:aws:s3:::sns-img」はバケットレベルのアクションなので"Resource"セクションで「/*」を設定できません。

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Effect": "Allow",
			"Action": [
				"s3:GetBucketLocation",
				"s3:ListBucket"
			],
			"Resource": [
				"arn:aws:s3:::mieux-dl",
				"arn:aws:s3:::sns-img"
			],
			"Condition": {
				"StringLike": {
					"s3:prefix": "01/*"
				}
			}
		},
		{
			"Effect": "Allow",
			"Action": [
				"s3:DeleteObject",
				"s3:GetObject",
				"s3:PutObject"
			],
			"Resource": [
				"arn:aws:s3:::mieux-dl/*",
				"arn:aws:s3:::sns-img/*"
			]
		}
	]
}
profile picture
エキスパート
回答済み 5ヶ月前
0

ありがとうございます。

ご指摘のとおり「/*」を除外してみました。 上書き 次へとすると、先程と同様な画面 注意事項 で注意事項が表示されますが問題ないでしょうか?

profile picture
回答済み 5ヶ月前
0

"Condition"セクションを削除してください。

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Effect": "Allow",
			"Action": [
				"s3:GetBucketLocation",
				"s3:ListBucket"
			],
			"Resource": [
				"arn:aws:s3:::mieux-dl",
				"arn:aws:s3:::sns-img"
			]
		},
		{
			"Effect": "Allow",
			"Action": [
				"s3:DeleteObject",
				"s3:GetObject",
				"s3:PutObject"
			],
			"Resource": [
				"arn:aws:s3:::mieux-dl/*",
				"arn:aws:s3:::sns-img/*"
			]
		}
	]
}
profile picture
エキスパート
回答済み 5ヶ月前
0

ありがとうございます。

無事成功いたしました。 やっと本題に入れるのですが、ここにアップした画像や動画をHP等からリンクを張って表示・再生させたいのですが、 https://note.com/vast_curlew334/n/nb6ab3a6a4f59 を見ますと、

OACの設定はこれで終了となります。試しにS3バケット直下に test.htmlというファイルを配置し、CloudFront経由でアクセスしてみました。

とあります。 ということは <a href="https://manga-lp.mieux.◯◯/バケットのフォルダ/画像名" target="_blank"> のような表記は出来なかったりするのでしょうか?

profile picture
回答済み 5ヶ月前

ログインしていません。 ログイン 回答を投稿する。

優れた回答とは、質問に明確に答え、建設的なフィードバックを提供し、質問者の専門分野におけるスキルの向上を促すものです。

質問に答えるためのガイドライン

関連するコンテンツ