TIL | NestJS_TypeScript_AWS_S3

https://velog.io/@suasue/NestJS-AWS-S3-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C

NestJS | AWS S3 이미지 업로드

Using npm

npm install aws-sdk

이 명령은 프로젝트에서 JavaScript 용 SDK를 프로젝트에 설치하고package.jsonSDK를 프로젝트 종속성으로 나열할 수 있습니다. npm 웹 사이트에서 "aws-sdk"를 검색하여 이 패키지에 대한 정보를 찾을 수 있습니다.

npm

npm install uuid

 

 

Using home-brew in MacOS

brew install awscli

AWS 버전 확인

aws --version

AWS S3 리스트 확인

aws s3 ls

참고 : https://medium.com/@shamnad.p.s/how-to-create-an-s3-bucket-and-aws-access-key-id-and-secret-access-key-for-accessing-it-5653b6e54337

How to create an S3 Bucket and AWS Access Key ID and Secret Access Key for accessing it.

---

https://velog.io/@suasue/NestJS-AWS-S3-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C

파일 업로드 S3로 설정하기 위한 종속성 설치

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

타입스크립트 multer 설치

npm install --save-dev @types/multer

루트 디렉토리에 .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

---

일단 공식문서는 봐도 이해하기 힘들었다...

https://velog.io/@suasue/NestJS-AWS-S3-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C

NestJS | AWS S3 이미지 업로드

https://johnmarc.tistory.com/48

[NestJS] AWS S3 Image Upload

 

찾아낸 방법 1. @nestjs/platform-express의 FileFieldsInterceptor, FileInterceptor 사용

일단, 작동원리를 이해하기 힘들었고,,, Service단의 코드는 작성되어있지 않아, 적용해볼 수 없었다.

 

 @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);

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";
  }
}

다른 방법을 찾아보자!!!

찾아낸 방법 2. 

 

구글링의 도움을 많이 받았으며, 결정적으로는 git hub의 오픈 소스들을 통해 문제를 해결하게 되었다.

https://github.com/jun-ho-Kim/podspike-backend/blob/ce1dc0272f78f2510b19da8f83a3c10d7925ee7e/server/uploads/uploads.controller.ts

GitHub - jun-ho-Kim/podspike-backend: 팟캐스트 애플리케이션 - 벡엔드

마지막에 도움을 줬던 코드 S3에 파일을 생성하는 것과 함께 url을 만들어 return 시키고 있다.

 

@Controller("uploads")
export class UploadController {
    @Post()
    @UseInterceptors(FileInterceptor("file"))
    async uploadFile(@UploadedFile() file) {
        AWS.config.update({
            credentials: {
                accessKeyId: process.env.AWS_S3_ACCESSKEYID,
                secretAccessKey: process.env.AWS_S3_SECRETACCESSKEY,
            }
        });
        try {
            const objectName = `${Date.now()}_${file.originalname}`;
            const upload = await new AWS.S3()
            .putObject({
                Key: objectName,
                Body: file.buffer,
                Bucket: BUCKET_NAME,
                ACL: 'public-read',
            }).promise();
            const url = `https://${BUCKET_NAME}.s3.amazonaws.com/${objectName}`
            console.log("upload", upload);
            console.log("file", file);
            console.log("url", url)
            return { url };
        } catch(error) {
            console.log(error)
        }
    }

---

@Post('upload') 
    @UseInterceptors(FileInterceptor('file'))
    async uploadFile(@UploadedFile() file) {
        AWS.config.update({
                credentials: {
                accessKeyId: process.env.AWS_ACCESS_KEY_ID,
                secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
            }
        });
         try {
            const objectName = `${Date.now()}_${file.originalname}`;
            const upload = await new AWS.S3()
            .putObject({
                Key: objectName,
                Body: file.buffer,
                Bucket: 'flip-test2',
                ACL: 'public-read',
            }).promise();
            const url = `https://${'flip-test2'}.s3.amazonaws.com/${objectName}`
            console.log("upload", upload);
            console.log("file", file);
            console.log("url", url)
            return { url };
        } catch(error) {
            console.log(error)
        }
    }

서버로 요청을 보낸 파일을 콘솔에 찍어보면 다음과 같이 파일을 정보를 볼 수 있다.

파일 업로드시 생성되는 ETag, buffer, size의 단위에 대해 공부해봐야겠다. 

그리고 추가로 시간이 된다면,  파일의 사이즈를 제한 하는 것도 구현해봐야겠다.

 

자 이제 그럼 컨트롤러에 있는 파일을 service로 옮겨보자!!!