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

署名付き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

ありがとうございます。

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

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

途中で

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

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

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

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

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

新規に作った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/*"
		}
	]
}

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/*"
			]
		}
	]
}

ありがとうございます。

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

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

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

確認いたしました。

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

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

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

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

ありがとうございます。

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/*"
			]
		}
	]
}

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

以下の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/*"
			]
		}
	]
}

ありがとうございます。

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

"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/*"
			]
		}
	]
}

ありがとうございます。

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

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

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