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

Question

강의 따라서 진행하고 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 함수에서 모니터링을 해보니 실패라고 떠 있습니다.
무엇이 문제인지 파악이 되지 않아 질문을 올립니다.

Answer

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

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

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

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

Answer

감사합니다!!

Answer

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

Answer

'Runtime.ImportModuleError: Error: Cannot find module 'sharp'', 모니터링 중 발견한 에러인데 package.json에 sharp가 없다는건가요? lambda에서 npm i 를 하고 EER! 가 뜨길래 권한주고 했는데 vim package.json 보니 있긴있습니다... [사진] [사진] 혹시나해서 https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/example-bucket-policies.html 참고해서 버킷 정책중 's3:PutObjectAcl'과 's3:GetObjectVersion'를 추가했습니다

Answer

감사합니다.

Answer

처음부터 차근차근 다시 확인하고 있는데 이번에 올렸던 이미지도 다 깨지고 모니터링도 똑같이 에러가 납니다.

근데 console로 찍은것도 모니터링에 보이지 않습니다..

thumb 파일 또한 생기지 않습니다...

commit - push 했고 pull 하고 프론트(빌드 후), 백 재시작했는데.. 뭐가 문제인지 파악이 어렵습니다..ㅠㅠ

index.handler도 제대로 들어가있습니다

Answer

exports.handler = async (...) => 입니다. async 빠뜨리셨습니다.

Ko Yun Hyuk

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

이 글과 비슷한 Q&A

local storage

list컴포넌트 생성하기

flask, react 로 개발한 웹앱을 모바일로 접속시 이미지가 안나오는 오류

npm run dev 연결이 안됩니다ㅜㅜ