AWS S3 이미지 업로드하다 생긴일...

생각보다 너무 쉽게 구현되서, 까먹을까봐 기록!

회사 입사한지 딱 한달째 되가네 우와
개발팀 OJT 차원에서 진행하고있는 프로젝트가 하나있다.
나중에 언젠간 써먹을거같은 CMS 페이지를 하나 만드는 중인데, 요구사항이
AWS S3에 이미지 업로드 해야하는거 외에.. 어려운거 많지만 일단 해낸것부터 정리하려고 한다.

AWS S3용 계정이 따로있나보다. IAM인가? 이걸 계정이라고 하는게 맞는지도 잘모르겠다
난 AWS 바보...🥲

팀장님께서 발급해주신 사용자이름, 액세스키, 시크릿키, 리전 으로 뚝딱뚝딱 퍼블리싱한 페이지에서
Dropzone을 이용해 사진을 올리고, 등록버튼 클릭 시 S3에 업로드 되는 형식이다!

장차 회사 프로그램이 될 수 있기때문에 private한 내용이라 전체 코드는 비공개지만, 중요한 코드 일부와 구현하다가 만난 이슈에 대해 정리한다.

구현한 코드 일부 정리

내 경우엔 보안을 위해 .env에 발급받은 액세스키와 시크릿키 작성하고 가져다 쓰는 형식으로 했다. 액세스키와 시크릿키 외부노출 절 대 금 지!!!🔥

const ACCESS_KEY = process.env.REACT_APP_ACCESS_KEY;
const SECRET_ACCESS_KEY = process.env.REACT_APP_SECRET_ACCESS_KEY;
const REGION = "ap-northeast-2";
const S3_BUCKET = 'S3버킷이름쓰면된다';
 
AWS.config.update({
  accessKeyId: ACCESS_KEY,
  secretAccessKey: SECRET_ACCESS_KEY
});

const myBucket = new AWS.S3({
  params: { Bucket: S3_BUCKET },
  region: REGION,
});

s3에 통신하는 설정부분인데, 위는 정해진 형식같으니 이렇게 쓴다고 생각하자.

const params = {
  ACL: 'private',
  Body: file,
  Bucket: S3_BUCKET,
  Key: "upload/" + file.name
};
myBucket.putObject(params)
     .on('httpUploadProgress', (e) => {
  //  버킷에 업로드할 때 하고싶은걸 하면된다.
  })
  .send((err) => {
     if (err) console.log(err)
})

AWS S3 파일 업로드 이슈 해결법

1. 403 Forbidden error : 서버에 요청이 전달되었지만, 권한때문에 거절된 경우.

s3 파일 업로드 경우에, putObject 호출에서 acl 옵션(액세스 제어목록)을 퍼블릭으로 설정했었는데 private로 변경하여 해결했다.
예제대로 하다가 나처럼 바보되지 말고, 지금 내가 통신하는 환경이 어떤지 확인하고 acl 옵션을 설정해야 한다!

const params = {
  ACL: 'private', // 여기가 나는 public-read 였음
  Body: file,
  Bucket: S3_BUCKET,
  Key: "upload/" + file.name // upload 폴더안에 파일이 올라간다
};

참고 : ACL(액세스 제어 목록) 개요

2. cors error

이 경우엔 s3 에서 cors 설정을 하면 된다. 팀장님이 업데이트 하셨는데 어떤 내용인지 확인을 못했다. 나중에 여쭤보고 업데이트 해야겠다!

유튜브 동영상 강의를 한번 보면 전체적인 코드 흐름을 알 수 있다!
너무 정리가 잘 되있고 나같은 초보도 이해하기 쉬운 코드라서 내마음속에 저장 💜

참고사이트 : https://codegear.tistory.com/7