서버 없이 AWS S3에 이미지 업로드
31892 단어 serverlesssaasawsjavascript
이 글의 목적은 백엔드 서비스를 어떻게 개발하는지 설명하는 것이다. 서버serverless가 없는 상황에서 코카콜라사가 개발한 serverless라는 프레임워크로 이미지(원본 이미지와 축소판)를 업로드하여 서버 없는 응용 프로그램을 더욱 빨리 만들 수 있도록 하는 것이다.위키백과에 따르면
서버 프레임워크가 없는 것은 Node로 작성된 무료, 소스 오픈 웹 프레임워크입니다.js.Serverless는 AWS Lambda에서 응용 프로그램을 구축하는 데 사용되는 첫 번째 프레임워크입니다. AWS Lambda는 Amazon이 Amazon 웹 서비스의 일부로 제공하는 서버 없는 계산 플랫폼입니다.
다음 몇 가지 단계에서 AWS S3에서 이미지 처리와 업로드를 할 수 있는 서비스 없는 응용 프로그램을 구축하도록 안내합니다. 코드here에 직접 들어가고 싶으면.
주의: Api Gateway 및 Lambdas의 일부 제한으로 인해 Lambdas를 사용하여 파일을 업로드하는 것을 권장하지 않습니다. 그럼에도 불구하고 그것을 원한다면 이 블로그는 당신을 위해 준비한 것입니다.
필요한 도구
1. AWS CLI 설치(명령줄 인터페이스)
AWS CLI는 여러 AWS 서비스를 명령줄에서 제어할 수 있는 AWS 서비스를 관리하는 통합 도구입니다.다운로드 후 해당 AWS account and credential 에 개인 정보를 추가합니다.
2. 서버 프레임워크 없음 설치
여기에 이 과정을 상세하게 설명하는 링크가 있다https://serverless.com/framework/docs/getting-started/.
3. 다음 명령을 실행하여 서버less를 사용하여 예시 코드를 생성합니다.
우선, 예를 들어 Servless upload image와 같은 폴더를 만들어야 합니다.
sls create --template hello-world
손잡이.js 파일에는 생성된 Hello 월드 코드가 포함되어 있습니다. 이것은 간단한 함수입니다. 상태가 200인 JSON 문서와 메시지를 되돌려줍니다.이 파일의 이름을 fileUploaderHome으로 변경합니다.js.
4. 종속성 설치
npm init -y
npm install busboy && uuid && jimp && aws-sdk
5. 다중 부분 / 폼 데이터 디코딩 함수 만들기
//formParser.js
const Busboy = require('busboy');
module.exports.parser = (event, fileZise) =>
new Promise((resolve, reject) => {
const busboy = new Busboy({
headers: {
'content-type':
event.headers['content-type'] || event.headers['Content-Type']
},
limits: {
fileZise
}
});
const result = {
files: []
};
busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
const uploadFile = {}
file.on('data', data => {
uploadFile.content = data
});
file.on('end', () => {
if (uploadFile.content) {
uploadFile.filename = filename
uploadFile.contentType = mimetype
uploadFile.encoding = encoding
uploadFile.fieldname = fieldname
result.files.push(uploadFile)
}
})
})
busboy.on('field', (fieldname, value) => {
result[fieldname] = value
});
busboy.on('error', error => {
reject(error)
})
busboy.on('finish', () => {
resolve(result);
})
busboy.write(event.body, event.isBase64Encoded ? 'base64' : 'binary')
busboy.end()
})
6, 이미지를 처리하고 S3에 업로드하는 기능
다음은 원본 이미지와 축소판을 S3에 업로드할 수 있는 코드입니다.
//fileUploaderHome.js
"use strict";
const AWS = require("aws-sdk")
const uuid = require("uuid/v4")
const Jimp = require("jimp")
const s3 = new AWS.S3()
const formParser = require("./formParser")
const bucket = process.env.Bucket
const MAX_SIZE = 4000000 // 4MB
const PNG_MIME_TYPE = "image/png"
const JPEG_MIME_TYPE = "image/jpeg"
const JPG_MIME_TYPE = "image/jpg"
const MIME_TYPES = [PNG_MIME_TYPE, JPEG_MIME_TYPE, JPG_MIME_TYPE]
module.exports.handler = async event => {
try {
const formData = await formParser.parser(event, MAX_SIZE)
const file = formData.files[0]
if (!isAllowedFile(file.content.byteLength, file.contentType))
getErrorMessage("File size or type not allowed")
const uid = uuid()
const originalKey = `${uid}_original_${file.filename}`
const thumbnailKey = `${uid}_thumbnail_${file.filename}`
const fileResizedBuffer = await resize( file.content, file.contentType, 460)
const [originalFile, thumbnailFile] = await Promise.all([
uploadToS3(bucket, originalKey, file.content, file.contentType),
uploadToS3(bucket, thumbnailKey, fileResizedBuffer, file.contentType)
])
const signedOriginalUrl = s3.getSignedUrl("getObject", { Bucket: originalFile.Bucket, Key: originalKey, Expires: 60000 })
const signedThumbnailUrl = s3.getSignedUrl("getObject", { Bucket: thumbnailFile.Bucket, Key: thumbnailKey, Expires: 60000 })
return {
statusCode: 200,
body: JSON.stringify({
id: uid,
mimeType: file.contentType,
originalKey: originalFile.key,
thumbnailKey: thumbnailFile.key,
bucket: originalFile.Bucket,
fileName: file.filename,
originalUrl: signedOriginalUrl,
thumbnailUrl: signedThumbnailUrl,
originalSize: file.content.byteLength
})
}
} catch (e) {
return getErrorMessage(e.message)
}
}
마지막으로 모든 작업이 성공적으로 수행되면 처리된 이미지에 대한 정보가 포함된 JSON이 반환됩니다.
const getErrorMessage = message => ({ statusCode: 500, body: JSON.stringify( message })})
const isAllowedFile = (size, mimeType) => { // some validation code }
const uploadToS3 = (bucket, key, buffer, mimeType) =>
new Promise((resolve, reject) => {
s3.upload(
{ Bucket: bucket, Key: key, Body: buffer, ContentType: mimeType },
function(err, data) {
if (err) reject(err);
resolve(data)
})
})
const resize = (buffer, mimeType, width) =>
new Promise((resolve, reject) => {
Jimp.read(buffer)
.then(image => image.resize(width, Jimp.AUTO).quality(70).getBufferAsync(mimeType))
.then(resizedBuffer => resolve(resizedBuffer))
.catch(error => reject(error))
})
#serverles.yml
service: file-UploaderService-foqc-home
custom:
bucket: lambda-test-foqc-file-home
provider:
name: aws
runtime: nodejs12.x
region: us-east-1
stackName: fileUploaderHome
apiGateway:
binaryMediaTypes:
- '*/*'
iamRoleStatements:
- Effect: "Allow"
Action:
- "s3:PutObject"
- "s3:GetObject"
Resource:
- "arn:aws:s3:::${self:custom.bucket}/*"
functions:
UploadFileHome:
handler: fileUploaderHome.handler
events:
- http:
path: upload
method: post
cors: true
environment: Bucket: ${self:custom.bucket}
resources:
Resources:
StorageBucket:
Type: "AWS::S3::Bucket"
Properties:
BucketName: ${self:custom.bucket}
다음 몇 줄은 매우 중요합니다. 우리의Api 게이트웨이가 바이너리 파일을 지원할 수 있도록 합니다.apiGateway 부분을 설명해야 합니다. 이 부분의 값 중 하나는'*/*', 이것은 다중 부분/폼 데이터와 같은 이진 형식을 정의하는 어댑터입니다.그리고 사용자 정의 부분 ${self.custom.bucket}에 정의된 S3 bucket에 접근할 수 있도록 권한을 정의합니다.
우리의 함수 이름은 UploadFileHome입니다. 이것은 HTTP POST 이벤트에서 호출된 것입니다. 이 이벤트는 필요에 따라 시작하고 CORS를 허용하는 경로에 있습니다. 이 이벤트는 우리의 프로세서 함수에 의해 처리됩니다. 이 함수는 파일 *fileUploaderHome에서 실행되었습니다.
sls deploy --stage=test
이미지가 업로드되면 서비스는 처리된 이미지의 정보, 예를 들어 키, 이름, 원본 파일의 URL, 축소 이미지 등을 포함하는 JSON을 되돌려줍니다.
한 마디로 하면 서비스를 삭제해야 한다면 다음 명령을 실행하십시오.
sls remove --stage=test
결론
이 서비스는 모든 외부 응용 프로그램이나 서비스가 필요에 따라 사용할 수 있습니다. 업무 논리에 결합되지 않기 때문입니다. 또한 코드를 재구성하여 일반 파일을 업로드할 수 있습니다. 이미지뿐만 아니라 httppost 이벤트의 일부분으로 저장된 파일을 수신하는 저장통의 디렉터리(경로)로 고정된 디렉터리를 사용하지 않도록 합니다.그러나 설교의 방식으로, 그것은 더욱 건장하고 설정 가능한 서비스를 만드는 기초이다.
나는 며칠 동안 이 글을 기록하고 쓰는 데 시간을 썼다. 나는 매우 만족한다. 나는 이 정보들이 너에게 유용하길 바란다.
정말 감사합니다.
Reference
이 문제에 관하여(서버 없이 AWS S3에 이미지 업로드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/foqc/uploading-images-to-aws-s3-with-serverless-1ae0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
