S3 + Lambda + ffmpeg (supports heic)

Достаточно частая задача веб разработчика - нарезать картинки. Предлагаю вашему вниманию готовое решение, используя Serverless framework + Lambda + S3.

Лямбда функция слушает событие загрузки файла в S3 и запускается. На входе функции мы можем извлечь имя S3 и ключ файла. Далее алгоритм такой: скачиваем файл в лямбду, нарезаем изображения и загружаем их в другой S3. Очень важно загружать в другой, потому что при загрузке в тот же S3 вызовется лямбда опять и будет нарезать уже нарезанные картинки (бесконечная рекурсия, за которую нужно будет заплатить). Это все в теории. Переходим к практике. 

Для нарезки изображений будем использовать ffmpeg. Вот пример как можно сделать изображение уменьшенное и обрезанное до 300х300px: 

ffmpeg -i source.jpg -filter:v "scale=300:-1,crop=300:300:0:0" -y crop300x300.jpg

Таким образом мы получили первый thumb:

Все замечательно работает локально, но в лямбде нет ffmpeg. Поэтому нужен бинарник для лямбды, который положим в лямбда слой. Чтобы запустить консольную команду из JavaScript воспользуемся child_process:

const childProcess = require('child_process')
spawnPromise(command, argsarray, envOptions) {
    return new Promise((resolve, reject) => {
      const childProc = childProcess.spawn(command, argsarray, envOptions || { env: process.env, cwd: process.cwd() }),
        resultBuffers = []
      childProc.stdout.on('data', buffer => {
        resultBuffers.push(buffer)
      })
      childProc.stderr.on('data', buffer => console.log(buffer.toString()))
      childProc.on('exit', (code, signal) => {
        if (code || signal) {
          reject(`${command} failed with ${code || signal}`)
        } else {
          resolve(Buffer.concat(resultBuffers).toString().trim())
        }
      })
    })
  }

Также нам надо будет взять мета информацию из картинки: ширину, высоту, угол поворота (необходим, для правильного поворота картинки если делать снимок на телефон). Для этого воспользуемся ffprobe. Также, разместим бинарник в лямбда слое. И сделаем функцию, которая будет доставать эти данные:

async getResolution(inputFile) {
    try {
      let rotate = await this.spawnPromise(
        config.FFPROBE,
        [
          '-v', 'error',
          '-select_streams', 'v:0',
          '-show_entries',
          'stream_tags=rotate',
          '-of', 'default=nw=1:nk=1',
          inputFile],
      )
      rotate = rotate || 0
      const str = await this.spawnPromise(
        config.FFPROBE,
        [
          '-v', 'error',
          '-select_streams', 'v:0',
          '-show_entries',
          'stream=width,height',
          '-of', 'csv=s=x:p=0',
          inputFile],
      )

      let [width, height] = String(str).split('x')

      if (String(rotate) === '90' || String(rotate) === '-90' || String(rotate) === '270' || String(rotate) ===
        '-270') {
        [width, height] = [height, width]
      }
      return { width, height, rotate }
    } catch (e) {
      console.log('ffprobe error', e)
      return { width: 1080, height: 1920 }
    }
  }

Теперь, зная мета информацию о файле, можно сделать основную функцию конвертации:

async thumb(inputFile, outputFile, filterData, imageData = {}) {
    try {
      const isVertical = Number(imageData.width) < Number(imageData.height)
      let filter
      if (filterData.crop) {
        const newImageWidth = isVertical ? filterData.height : filterData.width
        const newImageHeight = isVertical ? filterData.width : filterData.height
        const resizeK = newImageWidth / imageData.width

        const x = parseInt(isVertical ? 0 : (resizeK * imageData.width / 2 - newImageWidth / 2))
        const y = parseInt(isVertical ? (resizeK * imageData.height / 2 - newImageHeight / 2) : 0)

        if (newImageWidth === newImageHeight) {
          // square
          filter = `scale=${isVertical
            ? `${newImageWidth}:-1`
            : `-1:${newImageWidth}`},crop=${newImageWidth}:${newImageHeight}:${x}:${y}`
        } else {
          filter = `scale=${isVertical
            ? `${newImageWidth}:-1`
            : `-1:${newImageWidth}`},crop=${newImageWidth}:${newImageHeight}:${x}:${y}`
        }
      } else {
        const newImageWidth = isVertical ? filterData.height : filterData.width
        filter = `scale=${newImageWidth}:-1`
      }

      if (Number(imageData.rotate) !== 0) {
        const times = Number(imageData.rotate) / 90
        for (let i = 0; i < times; i++) {
          filter += `,transpose=1`
        }
      }
      const callData = [
        '-v',
        'error',
        '-noautorotate',
        '-i',
        inputFile,
        '-filter:v',
        filter,
        '-y',
      ]
      return await this.spawnPromise(
        config.FFMPEG,
        [
          ...callData,
          outputFile],
      )
    } catch (e) {
      console.log('ffmpeg error', e)
    }

Я это делал для одного из своих проектов и первая проблема, с которой столкнулись пользователи, это загрузка картинок из iPhone. Так как Apple сделали свой формат изображений, который еще не все поддерживают. Пока единственное решение, которое я нашел это скомпилировать tifig бинарник и добавить его в слой для лямбды. К сожалению, все бинарники я компилировал для лямбды давно и о том, как скомпилировать tifig для лямбды не расскажу, но зато поделюсь готовыми бинарниками.

И добавим функцию конвертации heic в jpg:

heicToJpg(filePath, newFilePath) {
    return new Promise((resolve, reject) => {
      childProcess.exec(se([config.TIFIG, filePath, newFilePath]), { encoding: 'utf8' },
        function (error, stdout, stderr) {
          if (error) {
            console.error(stderr)
            return reject(error)
          }
          fs.unlinkSync(filePath)
          return resolve(true)
        })
    })
  }

Итак, основной код лямбды на самом высоком уровне выглядит вот так:

module.exports.handler = async (event) => {
  const s3Record = event.Records[0].s3
  const sourceKey = s3Record.object.key
  if (!file.isPhoto(sourceKey)) {
    return true
  }
  await file.download(s3Record.bucket.name, sourceKey,file.getDownloadName(sourceKey))
  const ext = file.getExt(sourceKey)
  const isHeic = file.isHeic(sourceKey)

  // convert iphone photo format to jpg
  if (isHeic) {
    await convert.heicToJpg(file.getDownloadName(sourceKey), file.getDownloadNameIfHeic(sourceKey, ext))
  }

  // create thumbs by config.RESOLUTIONS
  const { width, height, rotate } = await convert.getResolution(file.getDownloadNameIfHeic(sourceKey, ext))
  await Promise.all(config.RESOLUTIONS.map(r => createThumbAndUpload(s3Record, r, { width, height, rotate, ext })))

  // remove unnecessary files
  await file.remove(file.getDownloadName(sourceKey))
  if (isHeic) {
    await file.remove(file.getDownloadNameIfHeic(sourceKey, ext))
  }
  return true
}

При этом всем config.RESOLUTIONS это константа настройки, при помощи которой можно задать в какие форматы необходимо конвертировать изображения. Для примера я сделал несколько вариантов:

RESOLUTIONS: [  
{ name: '1920x1080', width: 1920, height: 1080 },  
{ name: '1280x720', width: 1280, height: 720 },  
{ name: 'crop600x400', crop: true, width: 600, height: 400 },  
{ name: 'crop300x300', crop: true, width: 300, height: 300 },
]

Развернем все в облаке. Итак подготовим конфиг деплоя Serverless Framework с поясняющими коментариями:

service: service-lambda-thumb-tifig
frameworkVersion: '2 || 3'
app: lambda-thumb-tifig

package:
  # исключаем лишние файлы из архива лямбды, чтоб уменьшить ее размер
  patterns:
    - '!node_modules/aws-sdk'
    - '!node_modules/@aws-cdk'
    - '!node_modules/serverless'
    - '!node_modules/serverless-lift'
    - '!.idea'
    - '!yarn.lock'
    - '!yarn.error.log'
    - '!README.md'
    - '!.gitignore'
    - '!package.json'
    - '!lib'
    - '!.git'

custom:
  name: 'lambda-thumb-tifig'
  environment: 'prod'
  region: 'us-east-1'
  lambda_prefix: ${self:custom.environment}-${self:custom.name}

# Отмечу что я использовал авто создание S3 для демо. 
# Но в реальности можно подключить уже раннее созданные S3.
# этот конфиг создает новые S3
constructs:
  sourceBucket:
    type: storage
  destinationBucket:
    type: storage


provider:
  name: aws
  lambdaHashingVersion: '20201221'
  environment:
    DESTINATION_BUCKET: ${construct:destinationBucket.bucketName}
    REGION: ${self:custom.region}
  region: ${self:custom.region}
  runtime: nodejs14.x
  iamRoleStatements:
    - Effect: "Allow"
      Action:
        - "s3:PutBucketNotification"
        - "s3:GetObject"
        - "s3:PutObject"
      Resource:
        Fn::Join:
          - ""
          - - "arn:aws:s3:::*"
    - Effect: "Allow"
      Action:
        - "rds:*"
      Resource: "*"

plugins:
  - serverless-lift

functions:
  # создаем лямбда-функцию
  ffmpeg-tifig:
    # Увеличиваем память и процессор лямбда функции 
    # для увеличения быстродействия
    # такие лямбды будут дороже, но так как в этом проекте 
    # я не выхожу за бесплатные лимиты в месяц - буду использовать 
    # самый быстрый вариант
    memorySize: 10240
    name: ${self:custom.lambda_prefix}
    handler: src/index.handler
    # Увеличиваем максимальное время выполнения функции
    timeout: 300
    # Подключим функцию к собитию загрузки файла в S3 Source
    events:
      - s3:
          bucket: ${construct:sourceBucket.bucketName}
          existing: true
    # Подключим слой Lib к лямбда-функции
    layers:
      - { Ref: LibLambdaLayer }

# Создадим лямбда слой и поместим в него все содержимое папки lib.
layers:
  lib:
    path: lib

Развернем это все в AWS:

sls deploy

В результате получаем лямбда функцию, подключенную к S3:

Проверим это все в AWS Console, загрузив несколько картинок в Source S3. И посмотрим в Destination S3:

Весь код доступен тут. Если у вас возникло желание каким-либо образом улучшить код - прошу сделать PR в этот репозиторий. Сделаем мир лучше вместе.