Store and Deliver images with Cloudflare R2 backend Cloudflare Workers with IPFS CID integration.
- Deploy r2-image-worker to Cloudflare
- Make a base64 string from the image file such as
.png
,jpg
, orgif
. PUT
the base64 strings to ixo-r2-image-worker.- Image binary will be stored in Cloudflare R2 storage.
- r2-image-worker will respond the key of the stored image.
abcdef.png
- r2-image-worker serve the images on
https://ixo-r2-image-worker.username.workers.dev/abcdef.png
- Images will be cached in Cloudflare CDN.
- Images can also be uploaded to IPFS Storage via the ipfsupload endpoint
User => Image => base64 => r2-image-worker => R2
User <= Image <= r2-image-worker <= CDN Cache <= R2
User <= Image <= r2-image-worker <= CID <= IPFS
- Cloudflare Account
- Cloudflare R2 access
- Web3Storage Account
- Wrangler CLI (v2)
- Custom domain (* Cache API is not available in
*.workers.dev
domain)
Create R2 bucket:
wrangler r2 bucket create cdn-images
Copy wrangler.example.toml
to wrangler.toml
:
cp wrangler.example.toml wrangler.toml
Edit wrangler.toml
.
Secret variables are:
AUTHKEY
- Auth Token for basic security
Develop
yarn dev
Test
yarn test
Deploy
yarn deploy
Prebuild
yarn build
Add your Web3storage Secret key housed in the secret manager tool of cloudflare.
wrangler secret put IPFS_WORKER_TOKEN
Header:
To pass the Basic Auth, add the AUTHKEY to your Bearer Auth section of Authorization
header.
Authorization: Bearer ...
Body: Base64 string of image binary.
{
"body": "Base64 Text..."
}
- Grab any common image with common extension type.
- Upload to upload endpoint.
echo '{"body" : "'"$( cat /tmp/1.jpg | base64)"'"}' | curl -XPUT -H "Content-Type: application/json" -d @- https://ixo:ixo@https://ixo-r2-cloud-worker.ixo-api.workers.dev/upload -vvv
- Visit the image
https://change_user_here:change_pass_here@change_url_here/image_returned_in_step2
Andrew Margetts https://github.com/demondayza
MIT