이미지 업로드 질문있습니다 (이미지 확장 가능 thumb 생성 X... - 인프런

[리뉴얼] React로 NodeBird SNS 만들기

카카오톡 공유하기 & 강좌 마무리

이미지 업로드 질문있습니다 (이미지 확장 가능 thumb 생성 X)

작성

629

강의 따라서 진행하고 aws s3에 aws-upload.zip 파일을 becket name에 복사한 뒤에

Amazon S3 링크 URL도 저장했습니다.

그런데 이미지 업로드 시 위와 같이 여전히 나옵니다.

lambda/index.js 소스코드도 문제가 없습니다.

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

const s3 = new AWS.S3();

exports.handler = (event, context, callback) => {
const Bucket = event.Records[0].s3.bucket.name; // react-nodebird-s3
const Key = decodeURIComponent(event.Records[0].s3.object.key); // original/12312312_abc.png, decodeURIComponent: 한글 깨짐현상 해결
console.log('Bucket: ', Bucket, 'Key: ', Key);
const filename = Key.split('/')[Key.split('/').length - 1]; // 파일이름 추출
const ext = Key.split('.')[Key.split('.').length - 1].toLowerCase(); // 확장자 추출.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);
}
};
 
// ImagesZoom/index.js
<img src={`${v.src.replace(/\/thumb\//, '/original/')}`} alt={v.src} />
 
// routes/post.js
router.post('/images', isLoggedIn, upload.array('image'), (req, res, next) => {
console.log(req.files); // 업로드가 어떻게 됬는지 정보들이 담겨있음
res.json(req.files.map((v) => v.location.replace(/\/original\//, '/thumb/'))); // original에서 thumb 이미지를 가져옴
// location 자체에 주소가 담겨있음, PostFrom에 image src에 그대로 전달(backURL 필요 X)
});
 
그리고 S3 bucket에 thumb 파일이 생성이 되지 않았습니다.
lambda 함수에서 모니터링을 해보니 실패라고 떠 있습니다.
무엇이 문제인지 파악이 되지 않아 질문을 올립니다.

Next.js express nodejs redux react

답변 7

Ko Yun Hyuk

질문자

삽질하며 살펴보니 node_modules에도 aws_sdk만있고 sharp는 없었습니다 ㅎㅎ

sudo npm i 할 때 sharp가 설치가 안된다고 에러가 떠서 다 찾아보니 결국 버전이 문제였습니다

sudo su 통해 권한 높은 상태에서 node 버전을 16.13.1로 바꾸니 해결됬습니다!!

제가 너무 기뻐서 말씀드립니다ㅋㅋ.. 버전이 문제였습니다 ..

Ko Yun Hyuk

질문자

감사합니다!!

Ko Yun Hyuk

질문자

구글링 통해 stackover flow 보니 문제점이 최신 node 버전에서는 sharp가 지원이 안된다는 이슈가 있었습니다. node 버전은 다운시키라는데 혹시 sharp 말고 쓸수 있는 다른 라이브러리가 있을까요? npm trands에서 sharp 검색해보니 다른 라이브러리도 있던데 추천해주실수 있을까요...?