微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

将不同的图像格式转换为webp时,如何解决原始响应中的lambda边缘函数中的503错误?

如何解决将不同的图像格式转换为webp时,如何解决原始响应中的lambda边缘函数中的503错误?

我正在尝试转换我们网站中的所有图像(目前正在测试设置中进行转换) 并且对于云编程来说是非常新的知识),请根据本文https://medium.com/nona-web/converting-images-to-webp-from-cdn-9433b56a3d52到webp。这是我的查看器请求功能,可以正常运行

const userAgent = require('useragent')
const path = require('path')

exports.handler = async (event,context,callback) => {
  const request = event.Records[0].cf.request
  const headers = request.headers
  const userAgentString = headers['user-agent'] && headers['user-agent'][0] ? headers['user-agent'][0].value : null
  const agent = userAgent.lookup(userAgentString)

  const browsersToInclude = [
    { browser: 'Chrome',version: 23 },{ browser: 'Opera',version: 15 },{ browser: 'Android',version: 53 },{ browser: 'Chrome Mobile',version: 55 },{ browser: 'Opera Mobile',version: 37 },{ browser: 'UC browser',version: 11 },{ browser: 'Samsung Internet',version: 4 }
  ]

  const supportingbrowser = browsersToInclude
    .find(browser => browser.browser === agent.family && agent.major >= browser.version)

  if (supportingbrowser) {
    const fileFormat = path.extname(request.uri).replace('.','')
    request.headers['original-resource-type'] = [{
      key: 'Original-Resource-Type',value: `image/${fileFormat}`
    }]

    const olduri = request.uri
    const newuri = olduri.replace(/(\.jpg|\.png|\.jpeg)$/g,'.webp')
    request.uri = newuri
  }

  return callback(null,request)
};

。这是我的原点响应lambda函数

const path = require('path')
const AWS = require('aws-sdk')

const S3 = new AWS.S3({
  signatureversion: 'v4',})

const Sharp = require('sharp')
const BUCKET = 'webp-test'
const QUALITY = 75

exports.handler = async (event,callback) => {

  let response = event.Records[0].cf.response

  let request = event.Records[0].cf.request;

  const headers = response.headers

  const request_headers = request.headers

  const originalKey = request_headers.originalkey[0].value
  const { uri } = request

if (path.extname(uri) == ".webp") {
    if (parseInt(response.status) === 404) {

         // read the required path. Ex: uri /images/100x100/webp/image.jpg
        let path = request.uri;

        // read the S3 key from the path variable.
        // Ex: path variable /images/100x100/webp/image.jpg
        let newKey = path.substring(1);

        // Ex: file_name=images/200x200/webp/image_100x100.jpg
        // Getting the image_100x100.webp part alone
        let file_name = path.split('/').slice(-1)[0]

        // get the source image file

        try {
        
            let requiredFormat = file_name.split('.')[1]

            const bucketResource = await S3.getobject({ Bucket: BUCKET,Key: originalKey }).promise()

            // perform the resize operation

            const sharpImageBuffer = await Sharp(bucketResource.Body)
            .webp({ quality: +QUALITY })
            .toBuffer()

            // save the resized object to S3 bucket with appropriate object key.
            await S3.putObject({
            Body: sharpImageBuffer,Bucket: BUCKET,ContentType: 'image/webp',CacheControl: 'max-age=31536000',Key: newKey,StorageClass: 'STANDARD'
            }).promise()

            // generate a binary response with resized image
            response.status = 200;
            response.body = sharpImageBuffer.toString('base64');
            response.bodyEncoding = 'base64';
            response.headers['content-type'] = [{ key: 'Content-Type',value: 'image/' + requiredFormat }];
            callback(null,response);
        
        } catch (e) {
            console.error(e)
        }
    } else {
        headers['content-type'] = [{
        'value': 'image/webp','key': 'Content-Type'
        }]
    }
}
  callback(null,response)
 }

我附加了自定义角色webp-lambda-origin,图像中附加了您的策略

attached policies

。而我的s3存储桶策略是

{
    "Version": "2008-10-17","Id": "PolicyForCloudFrontPrivateContent","Statement": [
        {
            "Sid": "1","Effect": "Allow","Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E32ESA4CLC4W9Z"
            },"Action": "s3:Getobject","Resource": "arn:aws:s3:::webp-test/*"
        },{
            "Sid": "2","Principal": {
                "AWS": "arn:aws:iam::704637355350:role/webp-lambda-origin"
            },"Action": [
                "s3:PutObject","s3:Getobject"
            ],"Resource": "arn:aws:s3:::webp-test/*"
        }
    ]
}

对于示例图像,出现https://d2ktfm3el1x4to.cloudfront.net/uploads/Dream_layer_results_annotate_650.jpg 503错误。我也尝试了这些建议,但没有成功How to fix 503 error with resize image lambda edge functions on cloudfront?。关于如何解决此问题有任何见解?谢谢

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。