[s3-example] 4. S3 이미지 불러오기

퍼블릭화한 S3 버킷의 객체 URL은 https://[버킷명].s3.[버킷리전].awazonaws.com/[객체]로 되어있다. ex) https://doromo-example.s3.ap-northeast-2.amazonaws.com/blackberry.png

즉, https://[버킷명].s3.[버킷리전].awazonaws.com/는 고정이므로 [객체]에 해당하는 값만 S3로 부터 받아오면 된다.

1. App.tsx가 마운트될 때, GET 요청한다.

 const fetchDataAndSetState = () => {
   getImages().then(res => setImages(res));
 };
 const fetchDataAndSetState = () => {
   getImages().then(res => setImages(res));
 };

 export const getImages = async () => {
   return await (await fetch('http://localhost:4000/image')).json();
};
 export const getImages = async () => {
   return await (await fetch('http://localhost:4000/image')).json();
};

2. 서버에서 ListObjectCommand 함수로 버킷의 객체 값들을 받아와서 map함수로 Key값을 return 한다.

 router.get('/', async (req, res) => {
   try {
     const data = await s3.send(new ListObjectsCommand(listObjectsBucketParams()));

     res.status(200).send(data.Contents.map(item => item.Key));
   } catch (e) {
     res.status(400).send({ error: '이미지 Key 값 가져오기 실패' });
   }
});
 router.get('/', async (req, res) => {
   try {
     const data = await s3.send(new ListObjectsCommand(listObjectsBucketParams()));

     res.status(200).send(data.Contents.map(item => item.Key));
   } catch (e) {
     res.status(400).send({ error: '이미지 Key 값 가져오기 실패' });
   }
});

 // data.Contents
 [
  {
    Key: 'blackberry.png',
    LastModified: 2023-07-23T11:14:41.000Z,
    ETag: '"1d7574cec637df80c4d2f655d1b9d4ab"',
    Size: 114134,
    StorageClass: 'STANDARD',
    Owner: {
      ID: 'abace78f1184a2d17b5263c958aebe70f87e65870555540c9427abdbda012264'
    }
  },
  {
    Key: 'cherry.png',
    LastModified: 2023-07-23T11:27:42.000Z,
    ETag: '"d364f3aaf8d8e816baaf597b0de6cfe8"',
    Size: 98100,
    StorageClass: 'STANDARD',
    Owner: {
      ID: 'abace78f1184a2d17b5263c958aebe70f87e65870555540c9427abdbda012264'
    }
  },
 ]
 // data.Contents
 [
  {
    Key: 'blackberry.png',
    LastModified: 2023-07-23T11:14:41.000Z,
    ETag: '"1d7574cec637df80c4d2f655d1b9d4ab"',
    Size: 114134,
    StorageClass: 'STANDARD',
    Owner: {
      ID: 'abace78f1184a2d17b5263c958aebe70f87e65870555540c9427abdbda012264'
    }
  },
  {
    Key: 'cherry.png',
    LastModified: 2023-07-23T11:27:42.000Z,
    ETag: '"d364f3aaf8d8e816baaf597b0de6cfe8"',
    Size: 98100,
    StorageClass: 'STANDARD',
    Owner: {
      ID: 'abace78f1184a2d17b5263c958aebe70f87e65870555540c9427abdbda012264'
    }
  },
 ]

3. 받아온 Key 값들을 state에 저장하고 화면에 출력한다.

 const [images, setImages] = useState<string[]>();

 const fetchDataAndSetState = () => {
   getImages().then(res => setImages(res));
 };

 useEffect(() => {
   fetchDataAndSetState();
 }, []);

 ...

 return (
     <div className="ImageContainer">
        {images &&
           images.map(data => (
              <div className="ImageBox" key={data}>
                 <img alt="fruits" src={`https://doromo-example.s3.ap-northeast-2.amazonaws.com/${data}`} />
                 <div className="InfoBox">
                    <p>{data}</p>                     
                 </div>
              </div>
           ))}
     </div>
 )
 const [images, setImages] = useState<string[]>();

 const fetchDataAndSetState = () => {
   getImages().then(res => setImages(res));
 };

 useEffect(() => {
   fetchDataAndSetState();
 }, []);

 ...

 return (
     <div className="ImageContainer">
        {images &&
           images.map(data => (
              <div className="ImageBox" key={data}>
                 <img alt="fruits" src={`https://doromo-example.s3.ap-northeast-2.amazonaws.com/${data}`} />
                 <div className="InfoBox">
                    <p>{data}</p>                     
                 </div>
              </div>
           ))}
     </div>
 )