はじめに

先日、S3 に AWS SDK 経由で画像を保存して、その画像を Chrome で表示しようとしたところ画像がダウンロードされてしまうという現象に遭遇しました。

コンソール上で手動で保存した画像だと問題なく表示されるのですが、 SDK 経由では何故かダウンロードされてしまうのです 🤔

結論

結論としては、putObject する際に Content-Type を設定していなかったことが原因でした 😅

putObjectCommand で Content-Type を設定せずにアップしたオブジェクトには application/octet-stream という未知のバイナリー形式のファイル向けの Content-Type が設定されていました。

そして、次の mdm web docs からも、この octet-stream は、セキュリティの観点で、ローカルディスクに保存するような挙動になるようです。だから、ダウンロードされていたのですね 💡

セキュリティ上の理由で、多くのブラウザーはこのようなリソースに既定のアクションを定義することを許可せず、リソースを使用するためにディスクへ保存することをユーザーに強制します。

正しい MIME タイプを設定することの重要性より

そこで、次のサンプルコードのように Content-Type を設定することで、ブラウザ上で表示できるようにしました 👍

1import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
2
3const s3 = new S3Client({ region: "ap-northeast-1" });
4
5const command = new PutObjectCommand({
6  Bucket: ${YOUR_BUCKET_NAME},
7  Key: ${YOUR_OBJECT_KEY},
8  Body: ${YOUR_OBJECT_BODY},
9  ContentType: "image/webp", // ここをオブジェクトに応じて適切に設定する！！
10});
11
12await s3.send(command);

また、コンソール上で手動で設定するとオブジェクトの Content-Type を自動で設定してくれるのですね 💡

おわりに

以前も実装したのに、改めてゼロベースで実装すると、何も覚えてなくて、妙に新鮮な気持ちになって、あぁコピペエンジニアだなぁと少し悲しくなりました 😅

とはいえ、問題解決の速度は上がっているので、パターン認識の精度を如何に上げるかだなとも感じたこの頃でした 👍