AWS 람다 사용하기

이번에는 S3에 올린 이미지를 리사이징한 후 줄어든 이미지를 다시 S3에 저장해보겠습니다.

사용자가 사이즈가 너무 큰 이미지를 올렸을 경우, 적절한 크기와 용량으로 이미지를 변경하는 것입니다.

이미지 리사이징은 CPU를 많이 사용하는 작업이어서 람다로 분리했습니다.

 

nodebird 폴더 외부에 aws-upload 폴더를 만든 후 package.json을 작성합니다.

 

handler 함수가 람다 호출 시 실행되는 함수입니다.

매개변수로 event와 context, callback이 주어집니다. 

event는 호출 상황에 대한 정보가 담겨 있고, context는 실행되는 함수 환경에 대한 정보가 담겨 있습니다.

직접 console.log해서 어떠한 정보들이 들어 있는지 확인해보는 것이 좋습니다. 

callback은 함수가 완료되었는지를 람다에 알립니다. 

callback의 첫 번째 인수는 에러 여부를 의미하고, 두 번째 인수는 반환값을 의미합니다.

event 객체로부터 버킷 이름(Bucket)과 파일 경로(Key)를 받아옵니다.

또한, 이를 통해 파일명(filename)과 확장자(ext)도 얻습니다.

s3.getObject 메서드로 버킷으로부터 파일을 불러옵니다. 

s3Object.Body에 파일 버퍼가 담겨 있습니다.

sharp 함수에 파일 버퍼를 넣고, resize 메서드로 크기를 지정합니다.

첫 번째와 두 번째 인수는 가로와 세로 너비를 의미합니다. 현재 200, 200으로 주어져 있습니다.

하지만 가로 200px, 세로 200px로 리사이징되는 것은 아니고, 세 번째 인수에 따라 리사이징합니다.

현재 fit: 'inside'를 주었습니다. 주어진 가로 세로 사이즈 안에 딱 맞게 이미지를 조정하라는 뜻입니다.

이외에도 다른 옵션이 더 있습니다. 다른 옵션을 설명한 공식 문서 링크를 16.6절에 준비해뒀습니다. 

toBuffer 메서드는 리사이징된 이미지 결과를 버퍼로 출력합니다

 s3.putObject 메서드로 리사이징된 이미지를 thumb 폴더 아래에 저장합니다.

성공적으로 저장했다면 callback 함수를 호출해 람다 함수가 종료되었음을 알립니다.

 

 

이제 람다에 배포할 차례입니다. Lightsail에서 빌드한 후 S3로 배포하고, 람다는 S3에서 배포된 파일을 가져와 함수로 만듭니다. Lightsail에서 빌드하는 이유는 sharp가 윈도용, 맥용, 리눅스용으로 나눠져 있기 때문입니다.

이 책은 윈도 환경에서 실습하므로 빌드를 하면 sharp가 윈도용으로 설치됩니다. 람다는 리눅스이므로 호환되지 않습니다.

 

깃허브에서 aws-upload 리포지터리를 생성합니다.

그 후 콘솔에서 aws-upload 폴더로 이동한 후 소스 코드를 깃허브에 push합니다.

git init
git add .
git commit -m "Initial commit"
git remote add origin https://아이디:토큰@github.com/아이디/aws-upload
git push origin master

이제 Lightsail 인스턴스 SSH에 접속해 깃허브 리포지터리를 clone받습니다.

git clone https://github.com/아이디caws-upload
cd aws-upload
npm i

 

clone받고 npm i까지 했다면 aws-upload 폴더 아래의 모든 파일을 압축해 aws-upload.zip 파일을 만듭니다.

 zip -r aws-upload.zip ./*
ls

aws-upload.zip index.js node_modules package.json package-lock.json

이제 Lightsail에서 S3로 파일을 업로드해봅시다.

먼저 aws-cli를 설치해야 합니다. 

aws configure 명령어를 입력한 후 발급받았던 키 파일 정보를 입력합니다.

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install
aws configure


AWS Access Key ID [None]: [키 아이디]
AWS Secret Access Key [None]: [시크릿 액세스 키]
Default region name [None]: ap-northeast-2
Default output format [None]: json

설정이 완료되었으면 aws-cli를 사용해 aws-upload.zip을 업로드하겠습니다.

 aws s3 cp "aws-upload.zip" s3://버킷명

추후 코드를 수정할 때마다 이렇게 zip 파일을 만들어서 S3로 업로드하면 됩니다. 단, zip 파일을 만들기 전에 기존 zip 파일은 지우세요.

 

이제 람다 서비스를 설정해보겠습니다. 상단 메뉴에서 서비스를 선택한 후, 컴퓨팅 섹션의 Lambda 메뉴로 들어갑니다.

함수 생성 버튼을 누릅니다.

함수명을 aws-upload로 하고 런타임은 Node.js 18.x로 설정합니다(람다는 지원하는 노드 버전에 제약을 두고 있습니다). 

함수 생성 버튼을 눌러 함수를 생성합니다.

함수 코드 섹션에서 업로드를 Amazon S3 위치로 선택합니다. 

Amazon S3 링크 URL은 https://버킷명.s3.ap-northeast-2.amazonaws.com/aws-upload.zip과 같은 형식으로 넣습니다.

핸들러는 반드시 실행할 파일명.함수명이어야 합니다.

이 책의 예제 파일명이 index.js이고, exports한 함수의 이름이 handler이므로 index.handler로 설정합니다.

우측 상단에 있는 Save 버튼을 눌러 소스 코드를 저장합니다.

이제 S3에 이미지를 업로드할 때 람다 함수가 동작되도록 해보겠습니다.

zip 파일을 업로드한 후 트리거 추가 버튼을 누릅니다.

 

이제 트리거 구성 섹션에서 트리거 설정을 하면 됩니다.

여러분의 버킷을 선택하고, 이벤트 유형을 All object Create events(모든 객체 생성 이벤트)로 설정합니다.

여러분의 버킷에 파일이 생성되면 함수가 호출됩니다.

단, original 폴더 안의 파일만 함수를 트리거하도록 할 것이므로 Prefix(접두사)에 original/을 적습니다.

설정이 끝났다면 추가 버튼을 누릅니다.

이제 NodeBird 앱의 코드를 수정해 NodeBird에서 람다 서비스를 이용할 수 있게 해봅시다.

기존 주소에서 original 폴더 부분을 thumb 폴더로 교체하는 코드입니다.

 

그런데 리사이징이 오래 걸려서 리사이징된 이미지가 일정 기간 동안 표시되지 않는 경우가 있습니다.

그럴 때는 img 태그에 onerror 속성을 붙여둬서 리사이징된 이미지를 로딩하는 데 실패하면 원본 이미지를 사용하도록 했습니다.

 

 

이미지 미리 보기 시에는 원본 이미지를 보여주고, 이미지를 저장한 후에는 리사이징된 이미지를 보여주도록 수정했습니다.

이미지 업로드와 이미지 리사이징 간의 시간차가 있으므로 이미지가 보이지 않을 수도 있는데, 그 문제를 해결하기 위한 방법입니다.

 

npm run dev로 서버를 실행한 뒤 http://localhost:8001에 접속합니다. 로그인 후 이미지를 업로드합니다.

이미지가 S3에 업로드된 후 람다 트리거에 따라 람다 함수가 실행됩니다.

따라서 이미지 리사이징도 자동으로 이뤄집니다.