S3 Image Manager

S3 Image Manager allows you to:

• Optimize images with Sharp
  • Change quality
  • Change format
  • Resize
  • Clone (to create multiple versions of the same image)
• Download processed images
• View images stored in S3
• Upload images to S3
• Search images in S3
• Delete images in S3

Run it on localhost to optimize and upload images to S3. Retrieved links of uploaded images point to Cloudfront and can be used in production.

Preview

Modification

• Change quality
• Change format
• Resize
• Clone (to create multiple versions of the same image)

Upload/Download

• Download processed images
• Set S3 namespace for the image
• Upload images to S3

S3 for serving images

• View images stored in S3
• Upload images to S3
• Search images in S3
• Delete images in S3

S3 for storing images

• View images stored in S3
• Upload images to S3
• Search images in S3
• Delete images in S3

Pre-requisites

1. Setup two AWS S3 buckets - one is for serving images (server-bucket) via Cloudfront distribution (CDN) and second is for storing raw images (storage-bucket)
   • S3 bucket for storage is optional
   • Make sure to enable versioning in your S3 buckets, otherwise you might accidentally delete your images
   • How to setup a Cloudfront distribution
2. Create IAM user with following policy (replace "server-bucket-name" and "storage-bucket-name" with your actual bucket name)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:GetObject",
                "s3:PutObject",
                "s3:DeleteObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::server-bucket-name",
                "arn:aws:s3:::server-bucket-name/*",
                "arn:aws:s3:::storage-bucket-name/*",
                "arn:aws:s3:::storage-bucket-name/*"
            ]
        }
    ]
}

How to setup

1. Download or git clone this repo
2. Create .env file based on .env.example and place it in the root of the project
   • The region needs to be us-east-1 for Cloudfront to work (Cloudfront is a global service, but according to AWS it has to be configured in us-east-1)
3. Run npm run install or yarn install or pnpm install (I use pnpm, but other package managers should work too)
4. Run npm run dev or yarn dev or pnpm dev to start the server
5. Open your browser and go to http://localhost:3010

How to use

1. Run it on localhost:3010
2. Modify images (change quality, format, resize, clone)
3. Upload images to S3 (set S3 namespace for the image)
4. Download processed images
5. Manage images in S3
   • View images stored in S3
   • Search images in S3
   • Delete images in S3

Notes

• Animations / GIFs are not supported aws s3api delete-objects --bucket blazing-peon-images --delete "$(aws s3api list-object-versions --bucket blazing-peon-images --query='{Objects: Versions[].{Key:Key,VersionId:VersionId}}')" --output=json
• Fun command to delete all objects in a bucket permanently, including versions - I suggest you don't use this a
  • aws s3api delete-objects --bucket <replace-this-with-bucket-name> --delete "$(aws s3api list-object-versions --bucket <replace-this-with-bucket-name> --query='{Objects: Versions[].{Key:Key,VersionId:VersionId}}')" --output=json > /dev/null 2>&1