【Node.js】S3に保存した画像をブラウザに表示できない

Question

質問内容・実現したいこと

Node.js, Express を用いて、S3にアップロードした画像を表示したいと考えています。
アップロードはうまくいったのですが、それらの画像を一覧で複数表示する方法が分からず、詰まっています。

どの処理までうまく動いているのか

画像のアップロードは、AWSコンソールより成功が確認できています。
また、S3のデータオブジェクト取得はできており、中身は確認できる状態です。

該当のソースコード

const express = require('express');
const router = express.Router();

require('dotenv').config();
const aws = require('aws-sdk');
const s3 = new aws.S3({
  accessKeyId: process.env.accessKeyId,
  secretAccessKey: process.env.secretAccessKey,
  region: process.env.region,
});

const multer  = require('multer');
const multerS3 = require('multer-s3');

const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: 'node-image-app2',
    metadata: function (req, file, cb) {
      cb(null, {fieldName: file.fieldname});
    },
    key: function (req, file, cb) {
      cb(null, Date.now().toString())
    }
  })
})

// Get images
// ここで、S3から画像データ一覧を取得し、ビューに渡したい
router.get('/images', (req, res, next) => {
  if (req.isAuthenticated()) {
    const params = { Bucket: 'node-image-app2', MaxKeys: 10 };
    s3.listObjectsV2(params, function(err, data) {
      if (err) console.log(err, err.stack);
      else {
        console.log(data)
        res.render('images.ejs', {
          images: data.Contents,
        })
      }
    })
  }
})

// Create images
router.post('/images/upload', upload.single('image'), (req, res, next) => {
  if (req.file) {
    console.log('Image uploaded!');
    res.redirect('/images');
  }
  else {
    console.log('Image can not uploaded!')
    res.render('image.ejs');
  }
})

module.exports = router;

<div class="card-group">
        <% images.forEach(image => { %>
          <div class="card">
            <img src=<%= image %> class="card-image-top" alt="">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              </div>
                <div class="card-footer">
                  <small class="text-muted">Last updated 3 mins ago</small>
                </div>
              </div>
        <% }) %>

エラーから考えられる原因

現状、ビューのimagesには以下のようなオブジェクトが渡っています。

// console.log(data)の結果
// imagesにはContentsの部分が渡っています。
{
  IsTruncated: false,
  Contents: [
    {
      Key: '1651713720822',
      LastModified: 2022-05-05T01:22:02.000Z,
      ETag: '"3cde5fdfd55c16a46b6a14839fbedd8f"',
      ChecksumAlgorithm: [],
      Size: 3531593,
      StorageClass: 'STANDARD'
    },
    {
      Key: '1651717508819',
      LastModified: 2022-05-05T02:25:10.000Z,
      ETag: '"8c0850b99d34051342904d8b0bd66bdf"',
      ChecksumAlgorithm: [],
      Size: 14356,
      StorageClass: 'STANDARD'
    }
  ],
  Name: 'node-image-app2',
  Prefix: '',
  MaxKeys: 10,
  CommonPrefixes: [],
  KeyCount: 2
}

ビューで画像を表示するためには、画像のURLが必要であり、それが渡っていないことが原因と考えています。
<img src=<%= image %> class="card-image-top" alt="">のimageに画像のURLを渡す必要があると考え、以下のことを試しました。

試したこと

オブジェクトURLを渡す。

AWSコンソールにてオブジェクトURLを直接取得し、ビューに表示させました。

// 特定の１つの画像を表示することはできた
<img src='https://<project-name>.s3.amazonaws.com/<number>

オブジェクトURLが機能しており、表示自体ができることを確認しました。
またAWSのアクセス制限などの問題が解決していることを確認しました。
しかし、画像は表示されましたが、「一覧として表示する」ことはできませんでした。

オブジェクトURLをリストで取得する

これを受けて、バケット内のデータのオブジェクトURLを配列として取得する方法を探しました。
URLの配列があれば、ビューで画像を表示できると考えたためです。
しかしながら、上記のようなオブジェクトを取得できたものの、オブジェクトURLを取得できずに詰まっています。

URL以外の実装を考える

上記のオブジェクトのKey, ETagなどが使用できるのではと考え、調べましたが、いずれの値も画像の表示との関連が認められませんでした。

ご回答やご提案を頂ければ幸いです。
宜しくお願いします。

参考にしたURL

https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/s3-example-creating-buckets.html

https://www.isoroot.jp/blog/4611/

Answer 1

S3にアップロードした画像を表示させるにはいくつかの方法があります

1. S3にアップロードされた画像をサーバーで取得してサーバー上から表示する
2. S3バケットそのものかまたはアップロードされた画像を公開し、S3オブジェクトのURLにアクセスさせる
3. S3とCloudFrontを使い、CloudFront上から画像を表示させる
4. S3オブジェクトのpre-sign URL（期限付き一時URL）を発行し、そのURLにアクセスさせる

個人的には公開してもいい画像なら2か3、そうでないなら1か4（どちらかというと4）を推奨します。

それらのどの方法を取るにしても、S3上のファイル名が分かれば必要なURLが作れるはずなのでそれをビューに渡してやれば良いと思います。
ファイル名はKeyだと思うのですが、S3上のファイル名と一致していませんか？

一覧として表示させるのはビュー側に必要な情報が渡っていればできるはずで、そちらで色々実装するところなのでここでは触れていません。

Comments

[k_z.soon]

ご回答ありがとうございます。

現在、4の一時URLの発行を検討していたのですが、公開しても良い画像のため、ご紹介いただいた2.3の方法を確認してみます。

また、帰宅次第S3を確認してみます。