https://github.com/ironexdev/s3-image-manager
AWS S3 Image Manager
https://github.com/ironexdev/s3-image-manager
aws-s3 image-format image-optimization resize-image responsive-images
Last synced: 10 months ago
JSON representation
AWS S3 Image Manager
- Host: GitHub
- URL: https://github.com/ironexdev/s3-image-manager
- Owner: ironexdev
- Created: 2024-08-17T21:59:55.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-08-29T18:29:28.000Z (almost 2 years ago)
- Last Synced: 2025-03-15T18:13:51.165Z (over 1 year ago)
- Topics: aws-s3, image-format, image-optimization, resize-image, responsive-images
- Language: TypeScript
- Homepage:
- Size: 2.56 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://www.youtube.com/watch?v=kbI7kRWAU-w)
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 --delete "$(aws s3api list-object-versions --bucket --query='{Objects: Versions[].{Key:Key,VersionId:VersionId}}')" --output=json > /dev/null 2>&1`