Introduction

In this tutorial, we will explore the importance of caching images from IPFS (InterPlanetary File System) and demonstrate how to set up a basic IPFS image caching service using the repository called ipfs-cache-server (https://github.com/pvolnov/ipfs-cache-server). Caching images from IPFS can greatly improve performance and reduce bandwidth usage, especially in scenarios where the same images are frequently accessed

Why we need to cache IPFS images?

IPFS is a distributed file system that allows storing and sharing content using cryptographic hashes. While IPFS provides a decentralized and resilient way to store and retrieve files, accessing files directly from IPFS can sometimes introduce performance challenges, especially when dealing with large files or high-demand scenarios. By caching IPFS images, we can alleviate some of these challenges by storing the frequently accessed images closer to the users, reducing the need for repeated network requests.

Lets go

1. Create a folder for image caching:

mkdir /var/www/cache

2. Configure image share via nginx:

Install and configure Nginx to serve the cached images. Add the following Nginx configuration to the appropriate server block in your Nginx configuration file (e.g., /etc/nginx/sites-available/default or /etc/nginx/conf.d/default.conf):

location /ipfs/ {
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Host $http_host;
    proxy_pass http://127.0.0.1:7001;
}

location /cache/ {
    alias /var/www/cache/;
    expires 30d;
}

In this configuration, requests to /ipfs/ will be proxied to the ipfs-cache-server running on 127.0.0.1:9090, while requests to /cache/ will serve the cached images directly from the /var/www/cache/ directory.

3. Setup cache server

git clone https://github.com/pvolnov/ipfs-cache-server
cd ipfs-cache-server

Open the config.yml file and update the following configuration parameters:

• folder_size: The maximum cache size in MB.
• cache_folder: The path to the cache folder (default is ./cache).
• image_server_prefix: web link to ngnix server to share images from cache folder
• max_size: The maximum number of images in the cache folder. Set cache folder path in docker-compose.yml:

5. Add cache folder path

Open the docker-compose.yml file and update the volume mapping to your desired cache folder path:

volumes:
  - /var/www/here-storage/cache:/workdir/cache

6. Run

docker-compose up

How to use

Make all requests via cache server, create url https://<image server>/url?sz=XXX

Example

• server-url: https://image.herewallet.app
• ipfs url: https://nftstorage.link/ipfs/bafybeieboqph4qqf2n7lasq4ehn6snke2nhdqzde4i4hlywwd3dd7mcjma/U1307.png
• ipfs id: nftstorage.link/ipfs/bafybeieboqph4qqf2n7lasq4ehn6snke2nhdqzde4i4hlywwd3dd7mcjma/U1307.png
• size: 512*512

Result:
https://image.herewallet.app/nftstorage.link/ipfs/bafybeieboqph4qqf2n7lasq4ehn6snke2nhdqzde4i4hlywwd3dd7mcjma/U1307.png?sz=512

Conclusion:

Caching IPFS images can significantly enhance performance and reduce network overhead when serving frequently accessed images. In this tutorial, we explored the importance of image caching from IPFS and demonstrated how to set.

P.S. Add ⭐️ for https://github.com/pvolnov/ipfs-cache-server