如何打造理想图床系统以及OSS相关思考 | How To Build Your Ideal Image Hosting System And Think About OSS
关于OSS About OSS
R2简介以及别的OSS的区别 Introduction to R2 and Differences from Other OSS
R2是一个Cloudflare提供的在线对象存储功能,API兼容AWZ S3。
和类似的服务对比,具备全球范围内节点极多、出口免费与极高的免费使用量(足以支撑小型业务)这三个极为重要的特性,使其成为一个非常热门的选择。
对象存储(以下简称OSS)是一个在线的文件系统,一般可以通过api进行上传、下载、删除等操作,往往提供与CDN联动的外部访问机制。
R2 is an online object storage solution provided by Cloudflare, with an API that is fully compatible with AWS S3.
Compared to similar services, R2 has three significant advantages that make it a popular choice: numerous global nodes, free egress traffic, and a generous free usage tier (enough to support small-scale projects).
Object storage (hereafter referred to as OSS) is essentially an online file system that allows uploading, downloading, deleting, and other operations via its API. It often also provides mechanisms to link with a CDN for external access.
存储上云的优劣以及使用场景 Pros and Cons of Moving Storage to the Cloud and Use Cases
相较于文件直接存放在服务器上,OSS具备以下优势
- 几乎不受限的理论上限(如果你的金钱也是不受限的),服务器加磁盘就算是再有钱也是有上限的
- 单位体积数据价格更低
- 相较于分布式存储,架构的建设更为简单
- 可以节约出口服务器的费用
当然也具备以下劣势
- 对比直接读取硬盘的数据,时延、成本、可靠性、灵活性都具备数量级上的差距
- 服务直接接入需要本地文件系统的基础设备(数据库等)
- 相对于自建分布式存储,更为不灵活,也难以应对需要复杂操作文件的业务
综上可得,使用OSS开展业务相较传统方案在任何业务量和场景下都各有利弊。
但是如果数据由用户上传,后端继续不对数据进行频繁操作。同时用户需要频繁地仅用户端地使用数据,那就特别适合使用这个服务。
这里敏感的读者一定发现的,这几乎就是(展示用)图片和视频服务。不过处于一些安全的考虑,视频流往往考虑切片隐藏分发,比较复杂。对于我们个人开发者或者博客创作者来说,可以使用OSS来搭建个人的图床系统,从而打造我们的博客图片系统。
Compared to storing files directly on a server, OSS offers the following advantages:
- Virtually unlimited scalability (as long as you have the budget), whereas even with a lot of money, server storage has limits.
- Lower cost per unit of data.
- Easier to implement compared to building a distributed storage architecture.
- Can save costs on egress traffic for servers.
However, it also comes with the following disadvantages:
- Compared to directly reading data from local disks, OSS has higher latency, higher cost, lower reliability, and less flexibility.
- Direct integration into applications requires local filesystems and underlying infrastructure (e.g., databases).
- Less flexible than self-built distributed storage, and not suitable for complex file operations.
In summary, using OSS has both advantages and disadvantages compared to traditional solutions, depending on the scale and context of your business.
However, if the data is uploaded by users, and the backend does not perform frequent operations on it, while users primarily use the data on the client-side, OSS becomes particularly suitable.
Astute readers may have noticed that this use case is particularly suited for image and video hosting services. However, due to security considerations, video streaming often involves slicing and complex distribution mechanisms. For us, individual developers or blog creators, OSS is a great way to build a personal image hosting system.
图片系统的技术选型 Technical Choices for an Image Hosting System
图床的选型 Image Hosting Options
图床除了使用CF+图床插件外也有很多可选项。
类型 | 优点 | 缺点 |
---|---|---|
GITHUB+图床插件 | 免费,一般人都有GITHUB账号 | 这是一种滥用行为,似乎不太道德,国内访问状况很差甚至不可达 |
国内腾讯、阿里云+图床插件 | 国内的节点,速度极快快 | 价格比较贵,没有免费用量,容易被盗刷流量 |
AWS+自搭建 | 更为专业、服务更好 | 贵,国内访问状况差 |
SM.MS | 免费,免账号,易用 | 国内访问状况差,似乎专业性差,不便于进行图片管理 |
HALO等博客框架中自带的 | 绝对的可靠性与易于迁移 | 安全取决于个人的技术水平,同时花的是自己的流量费(笑) |
一般来说,免费=国内访问差。
对比之下Cloudflare具备以下优势
- 仅使用api创建、修改、查看文件收费且免费使用额度极大,被恶意攻击情况下,也会豁免费用
- 因为出口流量不计费,所以不存在被盗刷的情况下。就算存在滥用行为最多也就封号
- Cloudflare的网络资源丰富,服务的可用性很好,甚至在中国也还行
- 支持和Cloudflare别的服务联动,例如Image
接下来我记录下使用Cloudflare搭建图床的流程
There are many options for image hosting systems besides Cloudflare combined with an image hosting plugin.
Type | Advantages | Disadvantages |
---|---|---|
GitHub + image hosting plugin | Free, most people have GitHub accounts | Considered misuse and unethical; poor or even inaccessible access from China. |
Domestic services like Tencent Cloud, Alibaba Cloud + image hosting plugins | Domestic nodes with very fast speeds | Expensive, no free tier, vulnerable to traffic misuse/abuse. |
AWS + self-hosted solution | More professional, better services | Expensive, poor access conditions in China. |
SM.MS | Free, no account required, easy to use | Poor access conditions in China, less professional, not convenient for managing images. |
Built-in image hosting in blogging platforms like Halo | Highly reliable and easy to migrate | Reliability and security depend on personal technical skills; you bear all egress traffic costs. |
Generally speaking, free solutions often mean poor accessibility in China.
In contrast, Cloudflare has the following advantages:
- Charges only for API-based creation, modification, and viewing of files, with a large free usage tier. Even under malicious attacks, your free tier is not affected.
- No egress traffic fees, so there's no risk of abuse. In the worst case, the account might get banned for misuse.
- Cloudflare has abundant network resources with excellent service availability, even in China.
- Supports integration with other Cloudflare services, such as Cloudflare Image.
Below, I’ll document the process of building an image hosting system using Cloudflare.
Cloudflare相关 Cloudflare Setup
首先最好你有一个域名挂在Cloudflare,没有也可以,但是支撑业务的时候会有一定瓶颈(对于个人来说问题不大)。
选择R2对象存储,选择创建存储桶,类型选择标准。
First, it’s best if you have a domain connected to Cloudflare. Although not strictly necessary, it helps avoid bottlenecks when scaling (this is less of a concern for individual users).
Go to R2 Object Storage and create a bucket. Choose the "Standard" type.
创建后选择设置->公开访问,将桶连接到域名,如果没有域名选择启动R2.dev子域。
After creation, go to Settings -> Public Access, and connect the bucket to your domain. If you don’t have a domain, you can enable the R2.dev subdomain.
之后可以在控制台创建一张图片,然后使用公开访问的域名/文件名访问。
测试正常后,选择管理R2 API令牌。
You can then upload an image via the console and access it using the public domain name and file path.
Once testing is complete, navigate to Manage R2 API Tokens.
选择创建API令牌,创建时权限选择“对象写”。
Create an API token with “Object Write” permissions.
记录下以下三个值。
Record the following three values:
图床插件的选择 Choosing an Image Hosting Plugin
因为我们不可能每一次传图片都去控制台,所以我们需要选择一个主流的图床软件、插件。中国的开发者一般会选择Picgo和Piclist。后者似乎是前者的加强版。相较于原版,后者支持云同步配置、更多默认的插件以及更加强大的上传配置,此处选择Piclist为例。
在图床中选择AWS S3
Since uploading images manually via the console isn't practical, you'll need an image hosting tool or plugin. Among Chinese developers, Picgo and Piclist are popular choices. Piclist is generally considered an enhanced version of Picgo, offering cloud-synced configurations, more built-in plugins, and more advanced upload configurations. For this tutorial, we'll use Piclist.
In Piclist, select AWS S3 as the image hosting option.
这里有几个必填的地方
- 图床配置名
- AccessKey对应Cloudflare中的令牌值
- SecretAccessKey对应访问秘钥ID
- Bucket选择之前创建的存储桶的名字
- 设定上传路径建议填入{year}/{month}/{md5}.{extName}。这样便于在Cloudflare中像文件夹一样管理
- 自定义节点填入Cloudflare中的终结点
- 自定义域名填入连接的公共域名
- 代理填入代理应用的本地局域网代理端口(不便展开)
Fill in the following fields:
- Name of the image hosting configuration.
- AccessKey: Use the token value from Cloudflare.
- SecretAccessKey: Use the Access Key Secret from Cloudflare.
- Bucket: Enter the name of the bucket you created earlier.
- Upload Path: It’s recommended to use
{year}/{month}/{md5}.{extName}
for easier organization in Cloudflare. - Custom Endpoint: Enter the endpoint from Cloudflare.
- Custom Domain: Enter your public domain.
- Proxy: Set this to your local proxy port (if applicable).
之后回到上传界面,选择图片处理
After setting it up, go to the upload interface and configure image processing options.
建议选择压缩质量为80。在实践经验中这基本不损失图像质量。同时开启移除EXIF(图片元信息,包括位置定位等)。
It is recommended to set the compression quality to 80, which generally doesn’t affect image quality. Also, enable removal of EXIF metadata (which includes sensitive information like geolocation).
Typora的相关配置 Typora Configuration
根据上面的配置流程后,当你在piclist上传一张照片后,会自动得到一个
![](路径)
的链接,我们将其复制进Typora就好。但是如果我们希望所有的Typora中的图片都上传到CF,可以选择为Typora关联piclist
不推荐的情况:笔记中记录敏感图片、图片仅个人使用。
With the above setup, when you upload an image via Piclist, you’ll automatically receive a link in the format:
![](path)
Copy-paste this link into Typora. Alternatively, if you want all images in Typora to be automatically uploaded to Cloudflare, you can configure Piclist to work directly with Typora.
Scenarios where this is not recommended: if your notes have sensitive images or if the images are for personal use only.
此时我们在博客中粘贴图片就会自动命名并上传到Cloudflare。
Now, when you paste an image into your blog written in Typora, it will automatically be named and uploaded to Cloudflare.
杂记 Miscellaneous Notes
写到一半,很有趣地发现和我早期一篇博客梦幻联动了,不经感慨时光荏苒。
OSS容易被盗刷这个现象需要感谢我朋友的提醒,这里是他的案发现场,希望使用HALO作为图床的可以参考下他的这篇文章。
前阵子发现我的博客越来越冗长,废话越来越多,简直是跟着心流得意识流写法西瓜皮踩到哪写到哪,写到后面人都浮躁了,所以这次弄了个大纲果然有条理多了,而且写起来也不浮躁了。
While writing this, I found it amusing that it aligns with an earlier blog post of mine about embedding images quickly in Hexo without plugins. Time flies, doesn’t it?
I'd also like to thank a friend for reminding me about the risks of OSS being exploited for traffic theft. Here’s their experience, and for those using Halo as an image host, you might find this article helpful.
Recently, I noticed my blogs are becoming unnecessarily verbose—like a stream-of-consciousness style where I ramble wherever my thoughts take me. Writing this with an outline made the process much smoother and more organized.