This app supports uploading, delivering and manipulating images (resizing on the fly with cache)
granny-server-backend - Backend service with API exposed to upload and serve/manipulate images
granny-js-client - Client library that works both in nodejs and browser. Makes API calls easier
granny-server-frontend - Frontend APP that uses client to manage your CDN domains and settings
granny-server-cron - Utility app
Let's say tou have new avatar to upload, and you want it to be avialable at path /users/sergio.jpeg
After you upload an image via API, the image is avialable at path cdn.example.com/i/users/sergio.jpeg
And now magic begins. Lets modify it! cdn.example.com/i/height=100,width=100/_/users/sergio.jpeg is of course resize on fly with cache
Resized image will be in cover mode. You can provide only one dimension too
- width || w: Number
- height || h: Number
- resize || r: String (100x100 || 100, 100x200)
Progressive image. Supported by jpeg, png
- progressive || pr: No value
Quality. Supported by jpeg, png, webp
- quality || q: Number [1-100]
Format to convert
- format || f: String [jpg|jpeg|png|webp]
Black and white
- bw: No value
Blur. Gaussian if number provided
- blur: No value or Number [1-1000]
- MongoDB
- Nginx
- S3 or Minio instance
#port app will be launched at
const APP_PORT = process.env.APP_PORT || 3000
#mongo connection string
const MONGO = process.env.DEBUG || 'mongodb://localhost/js_cdn'
#S3 connection data
const S3_HOST = process.env.S3_HOST || '127.0.0.1'
const S3_PORT = process.env.S3_PORT || 9000
const S3_ACCESS_KEY = process.env.S3_ACCESS_KEY || 'minioadmin'
const S3_ACCESS_SECRET = process.env.S3_ACCESS_SECRET || 'minioadmin'
#start logging
const DEBUG = process.env.DEBUG || false
docker run -p 3000:3000 --name granny-server-backend \
-e MONGO='mongodb://user@password:example.com/granny' \
assorium/granny-server-backend:latest
This an example Nginx config for all CDN.* subdomains All you need is to point your DNS A record to server IP and add domain via API or granny-server-frontend app This is only an example. I recommend to use real CDN service such as free CloudFlare before your app, and it will serve and cache all your images across the globe.
server {
listen 80;
charset UTF-8;
server_name cdn.*;
client_max_body_size 60m;
location / {
proxy_pass http://127.0.0.1:3000;
proxy_set_header Host $host;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-NginX-Proxy true;
}
}