본문 바로가기

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 코드 부분 수정은 해당 프로젝트 깃헙을 확인해보면 된다

     


    출처

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