NestJS | AWS S3 이미지 업로드

Sua·2021년 4월 15일
5

NestJS

목록 보기
8/9
post-thumbnail

NestJS로 AWS S3에 여러 개의 이미지를 업로드하는 기능을 구현해보자.

AWS S3 버킷 만들기

AWS S3 버킷을 만들어 준다. 버킷 만드는 방법을 설명해놓은 곳이 많으니 직접 찾아서 만들면 된다.
개인적으로는 이 블로그를 참고했다.

NestJS에 적용

AWS S3를 NestJS에서 적용하는 코드를 찾아보니 다양한 방식들이 나왔다. S3를 처음 사용해보는 것이라 처음에는 혼란스러웠는데, 다양한 코드를 참고해 짜집기하며 구현해보았다.

나는 NestJS의 Multer 라이브러리Multer-S3, 그리고 NestJS의 FilesInterceptor() 데코레이터를 사용할 것이다.

필요한 패키지 설치

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

npm install --save aws-sdk multer multer-s3

typescript를 사용하니 @types/multer까지 설치한다.

npm install --save-dev @types/multer

코드 작성

우선 NestJS 프로젝트에 image라는 이름으로 이미지 업로드하는 모듈을 만들어 코드를 작성할 예정이다.
image라는 module, controller, service를 차례로 만들어 준다.

nest g mo image
nest g co image --no-spec
nest g s image --no-spec

--no-spec 옵션을 사용하면 테스트 파일인 spec 파일 없이 만든다.


루트 디렉토리에 .env 파일을 만들어서 액세스키와 같은 중요한 정보를 따로 보관한다.

// .env

AWS_S3_BUCKET_NAME=YourBucketName
AWS_ACCESS_KEY_ID=YoutAccessKeyId
AWS_SECRET_ACCESS_KEY=YourSecretAccessKey
AWS_REGION=YourRegion

process.env.변수명으로 불러와 사용할 수 있다.
.env 환경설정 파일을 로드하기 위한 dotenv모듈을 설치한다.

npm install --save dotenv
npm install --save -dev @types/dotenv

controller에 아래와 같이 작성한다.

// image.controller.ts

import { Controller, Post, UploadedFiles, UseInterceptors } from '@nestjs/common';
import { FilesInterceptor } from '@nestjs/platform-express';
import { ImageService } from './image.service';
import * as multerS3 from 'multer-s3';
import * as AWS from 'aws-sdk';
import 'dotenv/config';

const s3 = new AWS.S3()

@Controller('image')
export class ImageController {
  constructor (
    private readonly imageService: ImageService
  ) {}
  
  @Post()
  @UseInterceptors(FilesInterceptor('images', 3, {
    storage: multerS3({
      s3: s3,
      bucket: process.env.AWS_S3_BUCKET_NAME,
      acl: 'public-read',
      key: function(req, file, cb) {
        cb(null, file.originalname)
      }
    })
  }))
  async uploadImage(@UploadedFiles() files: Express.Multer.File) {
    return this.imageService.uploadImage(files);
  }
}

그리고 service에 아래와 같이 작성한다.

// image.service.ts

import { Injectable } from '@nestjs/common';
import * as AWS from 'aws-sdk';

AWS.config.update({
  "accessKeyId": process.env.AWS_ACCESS_KEY_ID,
  "secretAccessKey": process.env.AWS_SECRET_ACCESS_KEY,
  "region": process.env.AWS_REGION
})

const s3 = new AWS.S3();

@Injectable()
export class ImageService {
  async uploadImage(files) {
    return "SUCESS";
  }
}

NestJS 공식문서에 따르면 FileInterceptor()등 파일 업로드에 사용할 수 있는 다른 데코레이터가 있다. 나는 여러 개의 파일을 업로드 할 수 있는 FilesInterceptor()를 사용했다. 각자의 필요에 맞게 적용하면 될 것 같다.

참고사이트

https://docs.nestjs.com/techniques/file-upload
https://medium.com/@shamnad.p.s/image-upload-to-aws-s3-using-nestjs-and-typescript-b32c079963e1
http://www.nestjstutorials.com/nestjs-file-uploading-using-multer/
http://blog.naver.com/pjt3591oo/221852920854
https://studyingych.tistory.com/43
https://johnmarc.tistory.com/48

profile
Leave your comfort zone

1개의 댓글

comment-user-thumbnail
2022년 8월 8일

좋은 참고글 되었습니다. 감사합니다!!!

답글 달기