質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

受付中

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

k_z.soon
k_z.soon

総合スコア0

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

1回答

0評価

0クリップ

196閲覧

投稿2022/05/05 04:31

編集2022/05/07 11:20

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

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

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

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

該当のソースコード

JavaScript:routes/images.js

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;

html

<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を直接取得し、ビューに表示させました。

html

// 特定の1つの画像を表示することはできた <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/

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。