AWS :: S3 연결하기

현재 백엔드 서버에 이미지를 올리고 있기 때문에,

스케일링할 때 이미지가 여러 서버로 복사가 된다.

이로인해 서버자원 낭비가 발생한다.

 

S3에 이미지를 저장하여 이 문제를 해결해주자.

 

 

S3 버킷 만들기

 

AWS의 S3으로 들어간다.

버킷만들기 클릭

 

버킷이름을 만들고 버킷 세부사항을 설정한다.

다른 설정을 그대로 가되, 퍼블릭액세스를 차단하지 않는다.

모든 객체가 퍼블릭상태가 되도록 허락한다.

 

그 후 만들어진 버킷이름을 클릭하여 권한 설정으로 들어간다.

스크롤을 내리면 버킷정책이 있다.

{
  "Statement": [
    {
     "Sid": "AddPerm",
     "Effect": "Allow",
     "Principal": "*",
     "Action": [
       "s3:GetObject",
       "s3:PutObject"
     ],
     "Resource": "{내 버킷 arn}/*"
    }
  ]
}

이렇게 버킷정책을 바꿔주자.

GetObejct, PutObject의 권한을 허용해준다.

 

그럼 버킷관련 설정은 끝난다.

 

 

액세스키 발급받기

보안자격증명에 들어간다.

액세스키 만들기를 누르면, 액세스키가 만들어진다.

이 액세스키와 액세스 시크릿키는 .env에 저장하여, 외부로 노출되지 않도록한다.

 

**실무에서는 access key 보다는 IM 방식으로 더 많이 사용한다고 한다.

access key는 권한이 너무 강력해서 노출되면 보안에 큰 문제가 생길 수 있다.

 

 

백서버 설정하기

 

multer-s3과 aws-sdk를 설치한다.

multer-s3: multer를 통해 s3로 올릴 때 사용.

aws-sdk: s3 접근 권한을 얻을 때 사용.

 

 

이미지 업로드 기능을 사용할 routes/post.js에 들어가 

multer-s3과 aws-sdk를 import 한다.

AWS.config.update({ accessKeyId, secretAccessKey, region });

AWS 설정을 한다. region은 내가 미리 설정해놓은 지역설정. AWS 버킷 페이지에서 확인 할 수 있다.

이 설정을 통해 사용자를 찾는다.

 

이전에 백 서버에 저장할 때는 upload 폴더로 사용했던 부분을 multerS3으로 바꿔주면된다.

const upload = multer({

storage: multerS3({ // multerS3에 저장

s3: new AWS.S3(), // s3설정,

bucket: {내 버킷 이름},

key(req, file, cb) {

cb(null, 저장할파일이름)

} )

 

저장할 파일이름앞에 폴더명/를 사용하면 폴더를 만들거나 찾아서 거기에 저장할 수 있다.

즉 스크린샷의 original은 폴더이름이다.

 

또한 s3에는 location에 file주소가 저장되므로,

location으로 응답하면된다.

 

 

프론트서버 설정하기

파일 주소가 저장되기 때문에, backUrl을 붙일 필요가 없다.

img src에 있는 backUrl을 모두 없애주자.

 

 

 

---

 

 

업로드 후 이미지 주소를 확인해보자.

 

내 s3에 original폴더 안에 타임스탬프+파일이름으로 주소가 저장된 것을 확인할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

location에 s3주소자체가 들어있음.