megrxu

Imagio: 以 S3 为存储的图床管理

Jun 25, 2024  「Web」  
Translated by LLM. If you want to view the original text, please switch to another language.

Preface

The reason for developing this project is primarily due to the lack of a platform that meets all these requirements:

  1. Store images on your own device (or any S3 platform);
  2. Support visual upload and deletion;
  3. Easily deploy;
  4. Try to make it Serverless as much as possible;
  5. Achieve automatic trimming and compression of images.

In fact, the previous experience was excellent with RoR’s Active Storage. Its image upload and modification APIs were very capable. However, it still requires managing a backend platform based on this, which also needs a long-term online backend. After NAS, the requirement for an online backend can be somewhat relaxed, but using Ruby to develop is still necessary. Eventually, we had to give up.

Another attempt was with Cloudflare Images. The focus here was on the automatic generation of variants without any distortion. However, its API was still not fully mature, requiring manual handling for many custom content. After trying it for a while (the early versions of Imagio, available at github.com/megrxu/imagio/tree/b417ff5aa6c68b01bc82a579a7b4ce7c544d1946, which were based on CF Images), it became evident that too much manual work was required. Additionally, the cost was prohibitive for individuals at 5 + 1 USD/month, leading us to abandon this project.

So, let’s move to a more versatile S3 solution (and then we can start薅 various Provider羊毛 🤣).

Running a Complete DEMO

Demosite: https://imagio.pages.dev/

Prerequisites

Generally, you need to manually deploy two components:

  1. Frontend (can be deployed on any platform supporting SvelteKit, such as Cloudflare Pages);
  2. Backend (needs to be publicly accessible and capable of hosting a Rust-based server or platform).

Additionally, you’ll need an S3 Bucket to store images and variant caches.

Deploying the Backend

Deploying the backend is straightforward: Clone the imagio-server repository and run:

1
2
3
4
5

cargo run --release -- --account_id <ACCOUNT_ID> \
  --store <IMAGES_PATH> --cache <CACHE_PATH>     \
  --bucket <BUCKET> --region <REGION>            \
  --endpoint <ENDPOINT>                          \
  --access-key-id <ACCESS_KEY_ID> --access-secret-key <ACCESS_SECRET_KEY>

Deploying the Frontend

For the frontend, ensure you have Node.js and npm installed on your system. Clone the project:

1
2
3

git clone https://github.com/megrxu/imagio.git
cd imagio/pages
npm install

Then start the server with:

1

npm start

Instructions

  1. Create an S3 Bucket: Go to AWS S3 and create a new bucket.
  2. Set up your account credentials for AWS S3 and IAM roles if necessary.
  • OpenDAL: A unified data access layer supporting multiple storage backends;
  • fast_image_resize: An open-source crate providing fast image trimming and compression;
  • image: A comprehensive library for image decoding and encoding.