S3에 파일이 있는지 없는지 확인하는 방법 How to check a file is in AWS S3.

s3에 내가 원하는 이미지가 존재하는지 하지 않는지 확인해야 하는 경우가 생겼다.
검색해 보니 두가지 방법 정도로 보였다.

첫번째는 서버를 통해 확인하는 방법이다. AWS에서 제공하는 SDK를 설치하고 key를 설정하게 되면 원하는 동작을 할 수 있었다.
다만 나는 프론트를 개발하는 상황이었고 이미지 존재 여부를 알기 위해 새로운 API를 만들고 설정하는 것은 일정상으로도, 그리고 현재 해야하는 일의 목표치와 비교해서도 좀 과하다는 생각이 들었다. 최대한 프론트에서만 처리하길 원했다. 그렇다고 프론트에서 AWS 키를 세팅할 수는 없었다.

그래서 찾은 두 번째 방법이다. 백엔드도 필요없고 따로 AWS 키를 세팅할 필요도 없다.

AWS S3 세팅
이미지가 있는 버킷 -> 권한 설정으로 이동 후 CORS 부분을 설정한다.

[{
  "AllowedHeaders": [ "*" ],
  "AllowedMethods": [ "HEAD", "GET" ],
  "AllowedOrigins": [
    "http://localhost:*"
  ],
  "ExposeHeaders": [],
  "MaxAgeSeconds": 3,
 }]

그리고 saga에서 fetch를 통해 API호출을 한다.

fetch(
  'https://aws-s3-file-img-path,
  { method: 'HEAD' }
)
.then((resp) => { ... })
.catch((error) => { ... });

이미지가 있는 경우 200 응답이 전달되고 이미지가 없는 경우 403이 전달된다.

브라보를 외치고 여기서 끝날 줄 알았으나…

이슈:
되는 경우도 있고 안 되는 경우도 있다. 그러니까 HEAD를 통해 해당 이미지 존재 여부를 판단했으나 실제로 이 이미지를 가지고 오려고 하면 CORS Error가 발생했다. 분명 CORS 관련 설정을 다 해줬음에도 에러가 생긴다. 검색을 한 건 아닌데 때마침 올라왔던 화해 기술 블로그 글을 보고 힌트를 얻어 수정할 수 있었다.

Reference:
화해 블로그:
http://blog.hwahae.co.kr/all/tech/tech-tech/5412/

stock overflow:
https://stackoverflow.com/a/18678677

블로그
https://www.enteroa.com/2020/11/05/s3-버킷-cors-설정-json/