본문 바로가기

Dot Computer Science/Cloud

[AWS] Lambda로 image resizing하기

react-next.js + node.js로 풀스택 개발을 하던 도중

이미지를 줌인 했을 때 리사이징을 하고 싶어서 AWS lambda를 사용해보겠다.

1. 최상위 루트에 lambda폴더 생성

 

| --- back

|

|--- front

|

|--- lambda

 

 

 

2. lambda 관련 라이브러리를 설치

$ npm i aws-sdk sharp // sharp는 일반적인 형식의 큰 이미지를 더 작게 리사이징해주는 모듈이다.
 

sharp

High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images

www.npmjs.com

 

3. /lambda/index.js 파일 생성 및 AWS 연동

Key에는 decodeURIComponent로 감싸줘서 한글로 이름이 되어있는 파일을 업로드 할 경우 파일 이름의 인코딩이 깨지지 않게 해준다.

ext 확장자 이름에는 PNG, png 이렇게 다를 수 있어서 toLowerCase() 메소드로 확장자 이름의 스타일을 통일 시켜준다.

const AWS = require('aws-sdk');
const sharp = require('sharp');

const s3 = new AWS.S3();


exports.handler = async (event, context, callback) => {
    const Bucket = event.Records[0].s3.bucket.name; // react-nodebird-loosie
    const Key = decodeURIComponent(event.Records[0].s3.object.key); // original/123123123_abc.png
    console.log(Bucket, Key);

    const filename = Key.split('/')[Key.split('/').length - 1];
    const ext = Key.split('.')[Key.split('.').length - 1].toLowerCase();
    const requiredFormat = ext === 'jpg' ? 'jpeg' : ext;

    console.log('filename : ', filename, 'ext', ext);

    try{
        const s3Object = await s3.getObject({ Bucket, Key }).promise();
        console.log('original', s3Object.Body.length);

        const resizedImage = await sharp(s3Object.Body)
            .resize(400, 400, { fit: 'inside'})
            .toFormat(requiredFormat)
            .toBuffer();
        await s3.putObject({
            Bucket,
            Key: `thumb/${filename}`,
            Body: resizedImage,
        }).promise();
        console.log('put', resizedImage.length);
        
        return callback(null, `thumb/${filename}`);
    } catch (error){
        console.error(error);
        return callback(error);
    }
}

 

 

 

 

 

4. 우분투 ec2에 접속 후 git pull을 통해 해당 람다 파일들을 zip 압축

하기 전에 일단 먼저 zip을 설치해주자.

$ sudo apt install zip

 

그 다음 람다 파일 압축

/lambda$ sudo zip -r aws-upload.zip ./*

$ ls를 한 후 aws-upload.zip 파일이 생겼으면 압축 성공

 

 

 

 

5. Linux에 AWS CLI 버전 2 설치

ec2에서 s3로 lambda 압축 파일을 보내기 위해 aws cli를 설치한다.

 

awscli-exe-linux-x86_64.zip을 받아와서 awscliv2.zip이름으로 저장한다.

$ sudo curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"

-> $ ls를 한 후 awscliv2.zip 파일이 생겼으면 성공

 

다운받은 파일을 압축해제한다.

$ sudo unzip awscliv2.zip

 

설치 프로그램을 실행한다

$ sudo ./aws/install

 

그럼 아래와 같이 aws 명령어가 사용가능해진다.

 

 

 

Linux에서 AWS CLI 버전 2 설치, 업데이트 및 제거 - AWS Command Line Interface

결과에서 경고가 예상되지만 문제가 되지는 않습니다. 이 경고는 개인 PGP 키(보유한 경우)와 AWS CLI PGP 키 사이에 신뢰 체인이 없기 때문에 발생한 것입니다. 자세한 내용은 Web of trust를 참조하십

docs.aws.amazon.com

 

 

 

 

6. ec2에서 s3로 lambda 압축 파일 전송

해당 명령어 실행 후 설정을 입력한다

$ aws configure 

AWS Access Key ID [None] : 자신의 S3 Access 키 값 입력

AWS Secret Access Key [None]:  자신의 S3 Secret  키 값 입력

Default region name [None]: 자신의 aws 지역 입력 (ex. ap-northeast-2)

Default output format [None]: json

 

 

설정이 완료되었으면 S3로 압축 파일을 cp(카피)한다

$ aws s3 cp "aws-upload.zip" s3://[S3 버컷 이름]

 

해당 S3버킷에 가서 아래와 같이 압축 폴더가 있으면 성공!

 

 

 

 

 

7. AWS Lambda 함수 생성

1) 함수 이름은 알아서 지어주고 파일을 생성해준다.

 

람다 함수 생성

 

2) 함수가 생성되었으면 함수 코드로 가서 작업 > Amazon S3에서 파일 업로드를 클릭해준다.

 

 

그리고 아래와 같이 경로를 입력해주고 저장한다

 

https://[S3 버킷이름].s3.[지역 이름].amazonaws.com/[압축 파일 이름]

 

S3에서 압축 파일 업로드

 

함수를 호출 할 수 있다고 뜨면 적절하게 불러온 것이다

 

 

 

마지막으로 기본설정에 들어가서 몇 가지 수정한다

 

1. 메모리 256mb 올리기 (넉넉하게)

2. 제한시간 30초로 올리기 (넉넉하게)

3. 그리고 AWS 정책 템플릿에서 새 역할 생성을 클릭 한 후 S3객체 읽기 전용 권한을 선택 (역할 이름은 아무거나 ex. s3-read)

 

기본설정 편집

 

 

 

 

 

8. Lambda > S3 트리거 생성

lambda는 S3에 업로드될 때 사용할 것이기 때문에 S3 트리거를 추가해야 한다.

 

1) 버킷은 자신의 S3를 선택

 

2) 접두사 필수! S3 이미지가 저장되는 폴더이름을 입력하면 된다 (나는 original/ 로 설정해놔서 아래와 같이 입력한다.)

    해당 폴더에 들어가게 되면 lambda가 시작되게 설정하는 것이다.

 

S3 트리거 생성

 

그러면 아래와 같이 S3트리거가 생성된 것을 볼 수 있다.

 

S3 트리거 생성 완료

 

 


 

✔︎  react + next.js 코드 부분 수정은 해당 프로젝트 깃헙을 확인해보면 된다

 


출처

인프런 제로초 개발자님 - 노드버드 클론강의