AWS S3를 사용하여 이미지 업로드 기능 구현하기

AWS S3( Simple Storage Service ) 이란?

■ 업계 최고의 확장성, 데이터 가용성 및 보안과 성능을 제공하는 객체 스토리지 서비스이다.

■ 웹 사이트, 모바일 어플리케이션, IoT 디바이스, 빅데이터 분석등

   다양한 사용 사례에서 원하는 만큼 데이터를 저장및 보호가능하다.

■ 사용하기 쉬운 관리 기능을 제공한다.

■ 특정 비즈니스 조직 및 규정 준수 요구 사항에 따라 데이터를 조직화, 세부적인 액세스 제어를 구성

■ Bucket이라는 단위로 구분한다

■ 99.99999%의 데이터 내구성을 가지고 있어 장애나 오류, 위협에 강하.

 

S3 사용 목적

● 용량을 추가하거나 성능을 높이는 작업이 필요없이 저장 용량이 무한대이고 파일저장에 최적화한다.

● EC2와 EBS등에 비해 훨씬 저렴(저렴한 비용으로 정적 웹 호스팅 가능)하다.

● 이미지 서버, 동영상 서버로 사용 가능하다.

 

 

AWS S3를 사용해보기

Bucket 만들기

Bucket ( 버킷 ) : 객체를 저장하고 관리하는 역할(디렉토리 / 폴더) 

 

aws 콘솔로 접속후 s3검색한뒤 클릭합니다.

 

 

버킷 목록을 누른뒤 버킷 만들기를 눌러줍니다.

 

 

이 안에서 노란색 버튼의 버킷 만들기를 눌러줍니다.

 

 

AWD 리전 : S3가 생성한 버킷을 저장할 위치 지정한다.

버킷이름 : 고유한 버킷의 이름을 지정(전세계에서 유일)

                  위와 같은 버킷이름에 image.png를 넣게 되면 http://corinybucket.s3.amazonaws.com/image.png 라는 url생성 

 

 

ACL활성화 클릭

ACL(Access Control List)

버킷, 객체에 대해 요청자의 권한 허용 범위를 간단하게 설정할 수 있다.

ACL을 활성화 해야 코드를 통해 S3에 접근을 할 수 있기 때문에 활성화를 눌러줍니다.

 

 

퍼블릭 액세스를 위와 같이 체크 해제 해줍니다.

이 체크리스트들을 다 차단을 해버린다면 Access Denied 라는 에러메세지가 뜨면서 접근이 불가하니

코드를 통해서 접근을 한다면 위 처럼 체크를 해제 해야 한다.

다 차단한다면 위와같은 에러가 뜸

 

 

객체에 여러 버전을 관리할수 있지만 비용이 나가므로 조심해야함. 비활성화 체크

 

 

그 이후 설정은 건드리지 않고 위와 같은 상황이라면 버킷 만들기 클릭

 

 

버킷이 생성된 걸 확인

 

 

IAM설정하기

IAM 검색후 클릭

 

 

사용자 탭에가서 우측 주황버튼의 사용자 생성을 클릭

 

 

사용자 이름을 적어준뒤 다음 클릭

 

 

다음으로 넘어가면 권한 설정부분에서 직접 정책 연결부분 선택한뒤 AmazonS3FullAccess를선택해 줍니다.

 

 

설정한 정보들을 확인한뒤 사용자 생성을 해줍니다.

 

 

대시보드 탭을눌러 좌측의 Quick Links의 내 보안 자격증명을 눌러줍니다.

 

 

그런다음 액세스 키 만들기를 눌러준뒤 키를 만들고 해당 액세스 키와 비밀 액세스 키는 연결하는것에 사용하니 저장해 둡니다.

※ 액세스키 • 액세스 비밀키 기억하기

 

 

Node.js로 S3연결하기

 

패키지 설치하기

yarn add aws-sdk // s3연결 패키지
yarn add multer // 파일업로드 하기 위해 사용하는 패키지
yarn add multer-s3@^2 // aws-sdk와 버전을 맞추기 위한 낮은버전의 패키지

 

연결 로직 작성

// ./s3/ImageUploader.js

import AWS from "aws-sdk";
// multer - 파일업로드를 위해 사용되는 multipart/form-data를 다루기 위한 node.js의 미들웨어
// multer를 거치면 req.file, req.files로 넘겨줌
import multer from "multer";
import multerS3 from "multer-s3";

AWS.config.update({
  region: "ap-northeast-2", // AWS의 region 값
  accessKeyId: process.env.AWS_ACCESS_KEY_ID, // IAM에서 설정됐던 accessKeyId
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY, // IAM에서 설정됐던 secretAccessKey
});

const s3 = new AWS.S3();


const imageUploader = multer({
  storage: multerS3({
    s3: s3,
    bucket: "corinybucket", // 생성한 버킷 이름
    key: (req, file, callback) => {
      callback(null, `test/${Date.now()}_${file.originalname}`);
      // 콜백함수의 두번째 인자로 들어가는 것은 업로드 경로
      // 경로에 / 를 포함하면 폴더를 자동으로 생성
    },
    acl: "public-read-write", //  s3 생성할 때 설정했던 권한 관련 설정
    contentType: multerS3.AUTO_CONTENT_TYPE,// 파일이 다운되는 문제를 막아줌
  }),
});

export default imageUploader;

 

 

// app.js

import express from "express";
import imageUploader from "../s3/ImageUploader.js";

const router = express.Router();

router.post("/test/image", imageUploader.single("image"), (req, res) => { //single은 단일 이미지를 받을때 사용하는것
  res.send("good!");
});

export default router;

 

한다음 인섬니아로 해당 경로에 파일을 올려보면

객체로 이미지가 올라간걸 확인 할 수가 있다.