はじめに

今回、容量の大きいサイズのファイル(約1GB)を公開すべく、S3を使用してみました。

なぜ、今回S3を使用するといった経緯についてですが、大きく2点ありました。　

① VS Codeからgit hubにpushできる最大容量が100MiB

(以下の記事に記載されています)
https://docs.github.com/ja/repositories/working-with-files/managing-large-files/about-large-files-on-github

② Git LFSを使用してみたものの、描画されるまで時間がかかってしまう

こちらのGit LFSを使用すると、　無料プランだとファイルの最大サイズが2GBまでpushできるようになります。
https://docs.github.com/ja/repositories/working-with-files/managing-large-files/about-git-large-file-storage

解決策

AWS S3を使用する

AWS コンソールにアクセスしてS3バケットを作成します。

一般的な設定をします。

バケットタイプについて、汎用バケットはS3 Express One Zone を除くすべてのストレージクラスに保存されたオブジェクトを含めることができ、ほとんどのユースケースとアクセスパターンに推奨されているバケットタイプです。

ディレクトリバケットは、一つのアベイラビリティゾーン内でのデータ処理を高速化させ、低レイテンシーを実現したいユースケースに推奨されていて、S3 Express One Zoneストレージクラスに保存されたオブジェクトのみを許可します。

今回は汎用バケットを選択しました。
次にオブジェクト所有者を設定します。

ACLとはAmazon S3 バケットおよびオブジェクトに対するアクセス制御を管理するための機能で、バケットやオブジェクトに対する特定のユーザーやアカウントへのアクセス権を制御します。

ACLが無効になると、バケットやオブジェクトに対するアクセス制御は他の手段で行う必要があります。
具体的には

バケットポリシーでの設定
IAMロールでのアクセス制御
など

今回はACL無効を選択します。
ブロックパブリックアクセスはこちらを設定しました。

次にバケットポリシーを以下のように編集します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": { "AWS": "arn:aws:iam::YOUR_ACCOUNT_ID:user/YOUR_USER_NAME" }, //必要なIAMユーザーに対してのみ権限を許可
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::hoge/hoge.mp4"
        }
    ]
}

"hoge"という名前のS3バケット内のすべてのオブジェクト全てのオブジェクトに対して、誰でも読み取りアクセスが可能な権限を提供
今回は、1GBを超える動画ファイルをアセットとしてweb上で表示したいだけなので、このように設定しています。

Version

"Version": "2012-10-17": このフィールドはポリシーのバージョンを指定します。この例では、IAM ポリシーの基本的な構造が定義された 2012-10-17 のバージョンが指定されています。

Statement:

"Statement": 許可または拒否するアクションとリソースを指定します。複数のステートメントを含むことができます。

ステートメント (Statement) の中身:

"Sid": "PublicReadGetObject": ステートメントにはオプションで識別子 (Sid) を設定できます。この例では PublicReadGetObject という名前を付けています。

"Effect": "Allow": ステートメントがアクセスを許可するか (Allow) または拒否するか (Deny) を指定します。ここでは Allow となっており、S3 オブジェクトへの読み取りアクセスを許可しています。

"Principal": { "AWS": "arn:aws:iam::YOUR_ACCOUNT_ID:user/YOUR_USER_NAME" }: このポリシーが適用されるIAMユーザーを示しています。ここでは特定のIAMユーザーを指定しています

"Action": "s3:GetObject": ステートメントが許可するアクションを指定します。ここでは s3:GetObject アクションが許可しており、これは S3 オブジェクトの読み取りを許可しています

"Resource": "arn:aws:s3:::hoge/hoge.mp4": このポリシーが適用されるリソースを示します。ここでは特定のS3オブジェクトが指定されています

URLを取得

AmazonS3 ＞バケット＞ hoge ＞ hoge.mp4で開くとオブジェクトの概要が表示されます。

表示

<video 
    class="hoge"
    src="S3から取得したURL"
    autoplay
    loop
    muted
    playsinline
>
</video>

おわり。

Amazon S3を使用して容量の大きいファイルを静的サイトで閲覧する