CloudFront+S3の環境でS3にhttpsでPOSTしたい

CloudFront+S3の環境でS3にhttpsでPOSTしたい。

CloudFrontでhttpsでS3のバケットにPostしたいです。
CloudFrontを使うのはACMで証明書を使いたいというのと、基本認証を入れたいという目的があります。
（基本認証はまだいれてないです）

外側からHttpsでファイルがアップロードする環境を作ってます。
なるべく簡単な仕組みでS3にアップロードし、保存できる仕組みを作りたいと考えております。
（長期保存して○○の分析をしたいとかではなく、あくまで簡潔にアップロードできて保存できればよい）

Cloudfrontの許可されたHTTPメソッドは以下のようにしています。
GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE

S3のバケットのアクセスポリシーは以下の通りです。

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity HOGEHOGEHOGEHOGEHOGE"
            },
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::hogehogehoge-test.fugafugafugafuga.com/*"
        }
    ]
}

PUTだとファイルをアップロードすることができるのですが、CloudFrontでPOSTを許可しているのにアップロードすると405が出てしまい、失敗します。


* upload completely sent off: 14 out of 14 bytes
< HTTP/1.1 405 Method Not Allowed
< Content-Type: application/xml
< Transfer-Encoding: chunked
< Connection: keep-alive
< Allow: HEAD, DELETE, GET, PUT
< Date: Wed, 06 Apr 2022 05:31:09 GMT
< Server: AmazonS3
< X-Cache: Error from cloudfront
< Via: 1.1 907f35c342230a570151549d009005d8.cloudfront.net (CloudFront)
< X-Amz-Cf-Pop: NRT12-C5
< X-Amz-Cf-Id: bura-bura-bura-hogehogehogehoge_fugafugafuga==

ググるとS3はPOSTできないような記事が見つかりますが、CloudFrontを使ってもPOSTできないでしょうか？
あまり複雑な仕組みにはしたくなくて、CloudFrontを使う形でなくても簡単にできる仕組みがあればそれでもいいと思ってます。

お知恵を拝借できますでしょうか。

行動規範の内容に同意します

回答1件

POSTすることではなくあくまでS3へのアップロードを行いたいということであれば、CloudFrontを経由する必要はなくてクライアントからSDKでS3に直接アップロードさせれば良いと思います。

問題はどのように認証・認可を行うかですが、静的ファイルのみでやりたいのであれば、このようなケースの場合Cognitoを使ってユーザー認証及びS3へのアクセス許可を行うと良いかと思います。
Cognito自体の使い方に慣れる必要があるのが難点ではありますが。
調べるとサーバーサイドで動的にsignatureを作成しているケースが結構出てきますが、CloudFront+S3だけでやりたいなら現実的ではないように思えます。

直接やりたいことに該当するかは微妙ですが参考になりそうなものを貼っておきます。
ブラウザから Amazon S3 への写真のアップロード

Upload file(s) to AWS S3 bucket using temporary credentials via AWS Cognito-AWS SDK javascript in Angular application

AWS SDK for Javascriptを使ってブラウザーから画像をS3にアップロードする

また、過去別の質問に対する自分の回答にも参考になりそうなリンクが貼ってあります。
S3 の読み書きを Cognito で認証する方法

POSTでアップロードする例は公式ドキュメントにも一応載ってますが、間にサーバを置いてそこで動的に認証情報を生成して…みたいなことをやってるのでそちらのほうが少々面倒に感じます。
Lambdaを使ってサーバレスに行うこともやろうと思えばできるんでしょうけど。

投稿2022/04/06 06:53