react-next.js + node.js로 풀스택 개발을 하던 도중
이미지를 줌인 했을 때 리사이징을 하고 싶어서 AWS lambda를 사용해보겠다.
1. 최상위 루트에 lambda폴더 생성
| --- back
|
|--- front
|
|--- lambda
2. lambda 관련 라이브러리를 설치
$ npm i aws-sdk sharp // sharp는 일반적인 형식의 큰 이미지를 더 작게 리사이징해주는 모듈이다.
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 명령어가 사용가능해진다.
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/[압축 파일 이름]
함수를 호출 할 수 있다고 뜨면 적절하게 불러온 것이다
마지막으로 기본설정에 들어가서 몇 가지 수정한다
1. 메모리 256mb 올리기 (넉넉하게)
2. 제한시간 30초로 올리기 (넉넉하게)
3. 그리고 AWS 정책 템플릿에서 새 역할 생성을 클릭 한 후 S3객체 읽기 전용 권한을 선택 (역할 이름은 아무거나 ex. s3-read)
8. Lambda > S3 트리거 생성
lambda는 S3에 업로드될 때 사용할 것이기 때문에 S3 트리거를 추가해야 한다.
1) 버킷은 자신의 S3를 선택
2) 접두사 필수! S3 이미지가 저장되는 폴더이름을 입력하면 된다 (나는 original/ 로 설정해놔서 아래와 같이 입력한다.)
해당 폴더에 들어가게 되면 lambda가 시작되게 설정하는 것이다.
그러면 아래와 같이 S3트리거가 생성된 것을 볼 수 있다.
✔︎ react + next.js 코드 부분 수정은 해당 프로젝트 깃헙을 확인해보면 된다
출처
인프런 제로초 개발자님 - 노드버드 클론강의
'Dot Computer Science > Cloud' 카테고리의 다른 글
[Cloud] S3와 Cloudflare를 사용하여 웹 성능 개선하기 (CDN, 정적 콘텐츠 웹 호스팅) (0) | 2022.04.26 |
---|---|
[Cloud] CDN에 대해 알아보자 (AWS CloudFront vs Cloudflare 비교) (0) | 2022.04.21 |