AWS S3 활용한 파일 및 이미지 업로드

S3란 무엇인가?

S3는 AWS에서 제공하는 '클라우드 스토리지 서비스'이다.

 

쉽게 말하면 AWS에서 제공하는 파일 저장 서비스이다.

 

S3의 사용 용도

• 이미지나 동영상 저장 및 제공
• 정적 웹사이트 호스팅
• CDN(CloudFront)과 연계해 빠른 콘텐츠 제공
• 백업 및 복원용 스토리지

백엔드 서버를 개발하다 보면 이미지나 동영상 업로드 기능을 구현해야 할때가 있다.

 

이때 사용자가 업로드 한 이미지를 S3에 저장하여 편리하게 사용 가능하다.

 

현업에서도 파일 업로드 기능을 구현할때 AWS S3를 많이 활용한다고 해서 공부하게 되었다.

 

 

---

그렇다면 어떠한 과정을 통해 S3를 활용할 수 있을까?

 

 

1. 사용자가 API를 통해 이미지나 동영상 업로드 요청
2. S3에 파일이 업로드
3. S3에서 파일이 저장된 URL을 리턴
4. DB에 파일 URL을 저장
5. 필요할때마다 DB에서 파일을 불러옴

 

🎯  왜 DB에 파일을 저장하여 사용하지 않고 S3에 저장하는게 좋을까?

1. 대용량 파일(Binary Data)를 DB에 저장하면 DB성능이 급격하게 떨어진다
따라서 파일 저장에 최적화 된 S3에 파일을 저장하고 URL을 DB에 저장하는 방식이 성능적으로 좋은 방법이다.

2. RDS에 대용량 파일을 저장하면 비용이 상대적으로 비싼 편이지만 S3에 저장하게 되면 훨씬 저렴한 가격으로 저장이 가능하다.

 

 

이제 S3를 통해 파일 업로드를 하는 방법에 대하여 알아보자.

 

---

 

1. S3 버킷 생성

 

버킷 생성전에 버킷과 객체가 무엇인지 알아야 한다.

 

🎯 버킷 : 깃헙(Github)을 보면 여러 개의 Repository를 만들 수 있다. S3에서도 여러 개의 저장소를 만들 수 있다. 여기서 하나의 저장소를 버킷(Bucket) 이라고 부른다.

 

🎯 객체(Object) : S3에 업로드한 파일을 보고, S3에서는 파일(File)이라 부르지 않고 객체(Object)라고 부른다. 즉, 객체(Object)란 S3 버킷에 업로드된 파일을 의미한다.

 

 

버킷을 생성할때 우선 버킷 이름을 작성해준다.

(버킷 이름은 유일해야 함)

 

 

나의 어플리케이션 서버에서 S3에 파일을 업로드하기 위해 퍼블릭 액세스 차단을 해제 해줘야 한다.

 

나머지는 다 기본값으로 해주고 '버킷 만들기'를 눌러준다.

 

 

2. 버킷 정책 추가

버킷 정책이란 무엇일까?

 

🎯 정책(Policy)이란 ?
권한(Permission)을 정의하는 JSON 문서를 의미한다. AWS는 기본적으로 대부분의 권한이 주어져있지 않다. AWS의 특정 소스에 접근하려면 권한을 허용해주어야 한다. 권한을 허용할 때 작성해야 하는 게 정책(Policy)이다.

 

 

 

 

 

 

 

버킷 이름과 *를 넣어줘야한다!

 

 

 

그리고 Principal 값을 *로 설정해주면 정책 설정 끝!

 

---

3. S3에 파일 업로드 할 수 있도록 IAM에서 액세스 키 발급받기

 

 

 

사용자 생성!

 

이름 설정하고 다음 클릭

 

 

 

권한 옵션을 "직접 정책 연결"로 설정하고 권한 정책에서 AmazonS3FullAccess 체크!

 

사용자 생성 클릭!

 

 

이제 애플리케이션 서버에서 파일 업로드 하기위한 Access Key를 받기 위해 액세스 키 생성을 해줘야 한다.

액세스 키 만들기 클릭!

 

AWS 외부에서 실행되는 애플리케이션 체크하고 다음 클릭!

 

액세스 키 만들기 클릭!

 

액세스 키 생성하기를 하면 액세스 키와 비밀 액세스 키가 생성되는데 

 

여기서 중요한건 이 두 정보를 모두 사용해야 하므로 꼭!!!! 메모장에 기록을 해서 개발할때 사용하도록 하자!

액세스 키 까지 발급받았다면 이제 모든 준비가 끝났다.

---

4. 애플리케이션 서버를 통해 S3에 사진을 업로드 해보자

 

https://github.com/yangwoohyeon/S3_Practice.git

GitHub - yangwoohyeon/S3_Practice: S3 파일 업로드 실습 코드

 

 

require('dotenv').config();

const { S3Client } = require('@aws-sdk/client-s3')

const express = require('express')

const multer = require('multer')

const multerS3 = require('multer-s3')

const app = express()

const port = 80;

const s3 = new S3Client({

  credentials: {

  accessKeyId: process.env.AWS_ACCESS_KEY,

   secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY

   },

   region: "ap-northeast-2"

  })

const upload = multer({

  storage: multerS3({

    s3: s3,

    bucket: process.env.AWS_S3_BUCKET,

    key: function (req, file, cb) {

      cb(null, file.originalname)

    }

  }),

})

app.post('/upload', upload.array('photos'), (req, res) => {

  res.send(req.files);

})

app.listen(port, () => {

  console.log(`Example app listening on port ${port}`)

})

const path = require('path');

app.get('/', (req, res) => {

  res.sendFile(path.join(__dirname, 'index.html'));

});

 

.env파일에 Access_Key와 Secret_Access_Key를 입력해줘야 한다!

 

 

 

Post 방식으로 이미지와 함께 호출을 하면 저장된 위치의 URL과 함께 S3버킷에 이미지 파일이 정상적으로 업로드 된것을 확인할 수 있다.

 

웹 페이지에서 S3에 저장된 이미지를 불러오기

 

 

 

 

S3 버킷에서 정상적으로 이미지가 불러와지는 것을 확인할 수 있다!!