1

DropzoneS3Uploader を使用して画像を S3 にアップロードするサーバーレス React アプリ (開発に npm を使用) を構築しています。ファイルを S3 バケットにアップロードする前に、署名付き URL をリクエストするために API Gateway (Lambda がサポート) を使用するように設定しています。

const uploadOptions = {
		s3Path: '/<folder>/',		
		signingUrl: 'https://<my-api>.eu-west-1.amazonaws.com/Prod/<api>',
		signingUrlMethod: 'POST',
		accept: 'image/*',
		autoUpload: true	
};

render メソッドは、次のようにコンポーネントを返します...

<div>
		  <DropzoneS3Uploader
			onFinish={this.handleFinishedUpload}
			s3Url='http://<my-bucket>.s3-website-eu-west-1.amazonaws.com'
			upload={uploadOptions}
			/>		
</div>

これが実行されると、署名付き URL の生成に成功します。

リクエスト URL: https://.eu-west-1.amazonaws.com/Prod/?objectName=&contentType=image%2Fjpeg リクエスト方法: POST ステータス コード: 200

{"signed_url":"https://<my-bucket>.eu-west-1.amazonaws.com/<some_image.jpg>?X-Amz-Algorithm=AWS4-HMAC-....X-Amz-Signature=...&X-Amz-SignedHeaders=host"}

ただし、そこから直接 404 になります (以下のスタック トレース)。npm がイメージを一時ファイルとしてキャッシュしようとするかどうか疑問に思っています。S3へのPUTリクエスト中にサーバー/イメージを参照できないように見える問題が何であれ...

リクエスト URL: http://localhost:3000/undefined リクエスト方法: PUT ステータス コード: 404 Not Found

http://localhost:3000/undefined 404 (見つかりません) ./node_modules/react-dropzone-s3-uploader/node_modules/react-s3-uploader/s3upload.js.S3Upload.uploadToS3 @ s3upload.js:171 (匿名) @ s3upload.js:108 XMLHttpRequest.send (非同期) ./node_modules/react-dropzone-s3-uploader/node_modules/react-s3-uploader/s3upload.js.S3Upload.executeOnSignedUrl @ s3upload.js:113 ./node_modules/react -dropzone-s3-uploader/node_modules/react-s3-uploader/s3upload.js.S3Upload.uploadFile @ s3upload.js:178 (匿名) @ s3upload.js:53 ...

DropzoneS3Uploader アップロード オプションの一部として「サーバー」オプションがあります。空白のままにすると、このエラーが発生し、他の人が入力され、エラーが言及したサーバー URL に置き換えられます。前述のように、私はこのサーバーレスを実行する予定なので、言及するサーバーはありません。

他の誰かがこれを前に見ましたか、何か提案がありますか?

Dropzone に切り替えて axios を使用すると問題なく動作するので、DropzoneS3Uploader が実装コードを抽象化しすぎて、この動作を制御できないのではないかと考えています。

ありがとう！

4

0 に答える 0