[AWS a3] 웹에서 사용하는 이미지들은 어디에 저장해둘까?

 

사용자가 웹에서 이미지를 보내면 -> 서버에서 이미지를 DB에 저장 & 다른 주소에서 이미지 사용

이렇게 진행이 가능한 줄 알았지만,

 

크고 많은 파일의 이미지를 사용하는 웹을 개발하다보니

용량과 속도의 **한계점**에 닿게 되었던 것이다

 

따라서, 알아본 결과!

대부분의 실무에서는 이미지를
S3 같은 오브젝트 스토리지(Object Storage) 에 따로 저장한다고 한다.

 

AWS S3 “파일 저장 전용 서버” 를 사용하여 이미지를 저장하는 방식을 택했다!

이미지 파일은 → S3 (파일 서버)
이미지 주소(URL) 만 → DB (텍스트)

 

 

이런식으로 구조를 분리해서 사용하는 것이다.

 

// S3에 업로드 → 이미지 URL 생성
const imageUrl = 'https://s3.amazonaws.com/mybucket/image123.png';

// DB에는 URL만 저장
await db.collection('posts').insertOne({
  title: req.body.title,
  content: req.body.content,
  image: imageUrl
});

 

 

이러한 코드를 server.js 파일에 삽입하여 사용하면

DB는 텍스트만 관리하니까 빠르고,
이미지는 S3가 알아서 파일 관리해줌 (용량제한, CDN, 백업 등 포함).

app.post('/add', upload.single('img1'), (요청, 응답) => {
  console.log(요청.file)
  (생략)
})

 

원하는 곳에서 upload.single() 라고 미들웨어를 추가해주면

이제 img1 이런 name속성을 가진 이미지가 들어올 때 마다 S3에 자동으로 업로드

 

+페이지 코드는

        <form class="form-box" action="/write" method="POST" enctype="multipart/form-data">
            <!-- enctype 해놔야 파일이 서버로 잘 전송됨 -->
            <h4>글쓰기</h4>
            <input name="title" type="text" />
            <input name="content" type="text" />
            <input name="img1" type="file" accept="image/*" />
            <!-- 서버에서 이미지가 맞는지 확장자 검사 한 번 더 필요 -->
            <!-- 서버에서 업로드한 파일 다루려면 multer/formidable 라이브러리 사용하면 쉽게 관리 -->
            <!-- npm install multer multer-s3 @aws-sdk/client-s3 -->
            <button type="submit">전송</button>
        </form>

 

   ** 이미지 여러장 업로드 원하면 accept 속성 뒤에 multiple만 적어주면 됨! 

 

 

 

Amazon S3를 사용해 버킷을 만들어준 뒤
위의 코드를 통해 서버/DB와 연동시켜 사용해주면

이렇게 이미지등록이 잘 되는 것을 확인할 수 있다!

---

+ 서버에서 multer나 formidable이라는 라이브러리를 쓰면

업로드한 파일같은걸 좀 쉽게 다룰 수 있음!

npm install multer multer-s3 @aws-sdk/client-s3

설치 후

서버파일 상단에

const { S3Client } = require('@aws-sdk/client-s3')
const multer = require('multer')
const multerS3 = require('multer-s3')
const s3 = new S3Client({
  region : 'ap-northeast-2',
  credentials : {
      accessKeyId : 'IAM에서 발급받은 액세스키',
      secretAccessKey : 'IAM에서 발급받은 시크릿키'
  }
})

const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: '버킷이름',
    key: function (요청, file, cb) {
      cb(null, Date.now().toString()) //업로드시 파일명 변경가능
    }
  })
})

**엑세스키 등은 .env파일에 따로 저장해두어 보안유지 필수**