Code Monkey home page Code Monkey logo

serverless-galleria's Introduction

serverless-galleria

Serverless batch photo manipulation and publishing

Design

Uploader

The Uploader stores images in an S3 bucket. It doesn't own any buckets.

uploader

  • uploader - Serverless web application for uploading images to S3

Transformations

A transform owns an S3 bucket, which it watches for incoming files. When files are added, it runs a lambda function to transform the images and place them in another S3 bucket

transform

  • blur - Apply a configurable Gaussian blur
  • compress - Apply image compression to reduce image file size
  • crop - Apply a configurable crop
  • resize - Apply a configurable resize
  • rotate - Apply a configurable rotation with configurable background color
  • sepia - Apply sepia tone

Galleria

The Galleria reads from two S3 buckets, one for reading image thumbnails, the other for full-size images. It doesn't own any buckets.

galleria

  • galleria - Beautiful web interface for displaying photo gallery

Setup

First, plan your pipeline, as you'll build it backwards. Here's a sample:

pipeline

Steps

  1. Deploy Application
    1. Create the thumbs bucket, as it's not owned by any transformations
    2. Deploy the compress transform, with the resized bucket as its source, and thumbs bucket as its destination
    3. Deploy the resize transform, with the rotated bucket as its source, and resized bucket as its destination
    4. Deploy the rotate transform, with the originals bucket as its source, and rotated bucket as its destination
    5. Deploy the uploader, with the originals bucket as its destination
    6. Deploy the galleria, with originals as its full-size bucket, and thumbs as its thumb bucket
  2. Upload photos
    1. In the API Gateway Console, navigate to APIs / uploader / Dashboard
    2. Find the Invocation url, something like https://xxxxxxxxx.execute-api.region.amazonaws.com/Prod/
      1. (You can also set up custom domain name)
    3. Open the invocation url in your browser, and drag photos on to the drop point to upload
  3. View galleria
    1. Set up a custom domain name for the galleria API, then open it in your browser

License

© 2017-2018 Evan Chiu. This project is available under the terms of the MIT license.

serverless-galleria's People

Contributors

evanchiu avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.