Hello to all readers who have come across this article.
I do not possess professional knowledge of network communication. It's just out of my interest. You can feed this article to the AI model to avoid any unnecessary losses.
Here, I would to share the framework I user to configure the image hosting service. The reason for this is that the solutions provided in some online articles cannot achieve both security and openness simultaneously.
The reason why i set up the image hosting site: In the process of learning, I acquire knowledge and then output it. The output system requires the use of documents and images for expression. The documents I mostly use here are Markdown documents. Markdown has many advantages, such as simple grammar, easy editing, and multiple editing platforms. Information is expressed based on the carrier, and images also need to be expressed in a certain form. When the images are directly embedded in the document, the local editior needs to consider whether your cloud synchronization quota has reached the limit. When uploading to a log, esprcially on multiple blog platforms, the blog platform may process your images and only return the link in the Markdown document to the reader for access. The indirectly achieves the configuration of the image hosting site. However, such a platform is not what I want. Of course, you can also set up your own local server to achieve the configuration of the image gallery and even the configuration of the blog websites. If you deploy the image service on various server providers, without proper configuration, you will balance may end up with a large outstanding charge.
DISCLAIMER:
When you read the following content, you are implicitly acknowledging that this article is a non-professional piece intended solely for learning and communication purposes, and does not have pratical guidance for real-world applications.
FUNCTION REALIZATION：
Upload the image and access it through a custom domain name.
CONFIGURATION INTRODUCTION:
Environment: Cloudflare, Alibaba Cloud, Picgo, Squoosh.
注意：关于对象存储OSS，如果您选的bucket节点地域位于内陆地区，那么您绑定的自定义域名需要备案，如果您不想备案，可以选择中国香港节点。
Please click on the following link to make a simple configuration. Note: This link is sourced from the Internet. If there is any infringement, please contact me. The contact infromation is provided at the end of the text.
手把手教你搭建阿里云图床(PicGo+Typora+阿里云OSS)，新手小白一看就会
After you complete the simple configuration now, there are still a few steps that need to be refined, Please read the following link first and compare the configurations to see what's different.
使用阿里云OSS存储服务 + CloudFlare配置图床
The difference are as follows: Firstly, when the bucket read-write permission is set to public read, your image gallery will be at risk of being charged for billing. Here,"billing" refers to the situation where since the permission is public read, anyone can access it. Then, I can continuously download the files through the file URL uploaded through your image gallery. One of the billing methods for object storage oss is based on downstream traffic, unforunately, the loading of the traffic billing cycle has a delay, which means that this delay determines that your bill will be inarrears, perhaps for a large amount of money.
使用阿里云OSS存储服务 + CloudFlare配置图床 As this article is nearly for four years old, some changes have occurred in the Ailiyun configuartion during this period. Please note that when you configur the permission control -> Bucket authorization policy panel, you will be promoted to specify both IP and VPC. My solution is to configure it through the grammar policy instead of the graphical policy.
An example of grammar strategy is as follows. Note:Please do not simply copy and paste. Before using it, make sure you understand the meaning of the code. The following code is for reference only. All consequences resulting from incorrect configuration shall be borne by the reader
{"Version": "1","Statement": [{"Effect": "Allow","Action": ["oss:GetObject"],"Principal": ["*"],"Resource": ["acs:oss:*:*:pic/*"],"Condition": {"IpAddress": {"acs:SourceIp": ["104.16.0.0/13","104.24.0.0/14","131.0.72.0/22","162.158.0.0/15","172.64.0.0/13","173.245.48.0/20","103.21.244.0/22","103.22.200.0/22","103.31.4.0/22","141.101.64.0/18","108.162.192.0/18","190.93.240.0/20","188.114.96.0/20","197.234.240.0/22","198.41.128.0/17","2400:cb00::/32","2606:4700::/32","2803:f800::/32","2405:b500::/32","2405:8100::/32","2a06:98c0::/29","2c0f:f248::/32"]},"StringNotLike": {"acs:SourceVpc": "vpc-*"}}}]
}
Here, we assume that your Bucket is named "pic". The "Version" field indicates the version of the policy syntax, and it is always fixed as "1". The "statement" field represents the list of policy statements. The "Effect"field here is set to "allow", and the "action" field is "readfile", which means that access and file reading can only be performed if the conditions are met, equivalent to a whitelist list. The "condition" here is the condition, and the "IPaddress" field here fills in the list of IP addresses of Cloudflare, and the "Stringnotlike" field sets the exclusion of the internal network of Alibaba Cloud. Of course, the IP address list of Cloudflare needs to be updated from time to time.
Please note that all of the above are closed based on your "Prevent Bucket organization's public access permissions". This option will ignore the Bucket syntax rule policy you just configured and directed set your Bucket to be inaccessible, while in the previous syntax rule, Cloudflare's IP address was set to be accessible for source return.
But the return source is not enough, and we need to configure the anti-theft chain options at Aliyun. Anti-hotlinking can be achieved, when the other party directly copies your URL, places it on their blog and published it, image loading cannot be realized at this time.
UPLOADING IMAGES
Regarding uploading images, you can choose to upload diles in the file management of the Alibaba Cloud OSS console, or you can use Picgo for uploading. Of course, you canalso use plugins such as Vscode or Obsidian for uploading images. Here, only a brief introduction to Picgo is provided for the configured image hosting. Please click on this link to visit Picgo GitHub Repo. You can refer to the Picgo manual for configuration.
IMAGE COMPRESSION
For information on image compression, please refer to Squoosh Github Repo and Squoosh Web.
ARCHITECTURE REVIEW:
This mermaid diagram was generated by qwen 3.6plus.
ARCHITECTURAL LIMITATIONS:
Due to my limited ability, i am currently encountering some problems. First, once the Cloudfalre bucksource configuration is completed, it means that others can also perform backsource through Cloudflare. You may have thought of the anti-hotlinking setting, but the AI model prompts that when the cloudflare distribution node caches your files, it will not return to the source at this time, that is, it will not perform Aliyun's anti-hotlinking screening. Although this may not increase your OSS traffic. others can still access your images and place them on their personal blogs. The premise is all Cloudflare CDN. As I don't really care about others using pictures, I haven't made any further Setting for the time being. The solution includes Cloudflare anti-hotlinking Settings.
Second, the access speed is relatively slow.
THE PROBLEM I ENCOUNTERED:
- The Picgo mobile album interface fails to display and shows an exclamation mark.
- Aftering the Squoosh browser was installed, the offline failed to load files using the avif encoding format.
- It was confirmed that there was a file under this URL, but a custom 404.html was displayed.
Peoblem screening and resolution: Since Aliyun configured the static page 404.html and you access the URL wo which the file is to be uploading before uploading the URL file, Cloudflare will cache your 404.html until the cache period expires. You can manually clear the cache of this URL in Cloudflare. - When uploading images through Picgo and accessing the URL in a browser, there is a probability that the uploading and access cannot be completed.
Problem screening and resolution: The Cloudflare IP address in the Aliyun Bucket policy configuration is incomplete, which leads to the problem. Here, it should be noted that Cloudflare needs to update the IP address when it is updated.