업로드 되는 이미지를 리사이즈 하려면 AWS의 lambda
를 사용하면 된다.
그러기 위해서는 프로젝트 폴더에 lambda
폴더를 추가한 후에 다음과 같이 handler 함수를 작성한다.
const AWS = require('aws-sdk');
const Sharp = require('sharp');
const S3 = new AWS.S3({ region: 'ap-northeast-2' });
exports.handler = async (event, context, callback) => {
const Bucket = event.Records[0].s3.bucket.name;
const Key = decodeURIComponent(
event.Records[0].s3.object.key.replace(/\+/g, ' '), // 파일 명의 띄어쓰기를 공백으로 변환
);
const filename = Key.split('/')[Key.split('/').length - 1];
const ext = Key.split('.')[Key.split('.').length - 1];
console.log(Bucket, Key, filename, ext); // 로깅!!
const requiredFormat = ext === 'jpg' ? 'jpeg' : ext;
try {
const s3Object = await S3.getObject({
Bucket,
Key,
}).promise();
console.log('original', s3Object.Body.length; // 로깅!!
const resizedImage = await Sharp(s3Object.Body)
.resize(800, 800, {
fit: 'inside',
})
.toFormat(requiredFormat)
.toBuffer();
console.log('resized', resizedImage); // 로깅!!
await S3.putObject({
Bucket,
Key: `thumb/${filename}`,
Body: resizedImage,
}).promise();
console.log('put'); // 로깅!!
return callback(null, `thumb/${filename}`);
} catch (e) {
console.error(e);
return callback(e);
}
};
처음에 프로젝트 앱에 이미지를 업로드 하였는데 다음과 같은 에러가 발생하여 리사이즈 된 이미지를 생성하지 못하였다.
ERROR NoSuchKey: The specified key does not exist.
handler 함수의 Key를 로깅해보면 다음과 같이 파일 명이 뜨는 것을 알 수 있었다.
1586795932672nextjs+image.jpeg
이는 handler 함수에서 Key에 값을 할당할 때 파일명의 띄어쓰기를 +로 변환하기 때문이었다.
AWS S3에는 original/1586795932672nextjs image.jpeg
로 저장되어 있었기 때문에 Key를 못찾았던 것이다.
파일명의 띄어쓰기를 공백으로 처리할 수 있도록 정규표현식을 사용하여 해결할 수 있었다.
exports.handler = async (event, context, callback) => {
const Bucket = event.Records[0].s3.bucket.name;
const Key = decodeURIComponent( // 문제 해결 전
event.Records[0].s3.object.key,
);
const Key = decodeURIComponent( // 파일명의 띄어쓰기를 공백으로 처리
event.Records[0].s3.object.key.replace(/\+/g, ' '),
);
}
어떤 단계가 완료될 때 마다 로깅을 하여, AWS 모니터링 로그에서 어떤 상황인지 판단할 수 있도록 하는 것이 좋을 것 같다.
lambda handler 함수에서 console.log
를 하면 AWS CloudWatch
에서 다음과 같이 로그를 확인할 수 있다.
17:07:18
2020-04-13T17:07:18.839Z f8d84c8a-5123-44eb-809f-1584e5f089f7 INFO bigbroshin original/1586797636953debugging image.png 1586797636953debugging image.png png
17:07:18
2020-04-13T17:07:18.924Z f8d84c8a-5123-44eb-809f-1584e5f089f7 INFO original 11881
17:07:19
2020-04-13T17:07:19.843Z f8d84c8a-5123-44eb-809f-1584e5f089f7 INFO resized <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 03 20 00 00 01 b8 08 06 00 00 00 bd da 83 6f 00 00 00 09 70 48 59 73 00 00 0b 12 00 00 0b 12 01 ... 108463 more bytes>
17:07:19
2020-04-13T17:07:19.983Z f8d84c8a-5123-44eb-809f-1584e5f089f7 INFO put