二叉树树的xLog

This article is a remake of: https://xfeed.app/notes/71448-15

Result Image#

Principle#

The image source is hosted by Cloudflare R2, which connects to R2 through two Workers to display random landscape/portrait images. The static page references the Workers' URL to achieve the above interface.

Creating a Cloudflare R2 Bucket#

R2 is essentially an object storage. Cloudflare offers 10GB of free storage and 10 million free accesses per month.

1. Go to the Cloudflare Dashboard, and navigate to the R2 page, as shown in the image .

2. Select to create a bucket .

3. Name your bucket and then click create .

4. You will see the following page, indicating that the creation is complete .

5. Return to the R2 homepage. Since we will need to use the API for file transfers later, create your R2 API token by clicking on Manage R2 API Tokens .

6. Click to create an API token, as shown .

7. Since we need this API to manage individual R2 buckets, select Object Read and Write, with detailed configuration as shown .

8. After creating the API token, a new page will display the token details, it will only be shown once!!! Keep this page open until you have securely saved all the information; do not close the interface, otherwise, you will need to rotate the API token to disable the previous old key, as shown .

9. Ensure you have securely saved your R2 API token, then proceed to the next step.

Adding Files to Your Bucket#

Since transferring files via the web interface is slow and does not support files larger than 300MB, we will use a locally deployed AList to connect to your R2 bucket for high-speed uploads.

1. The author uses Windows. Go to AList - Github Release to download the latest executable for Windows, as shown .

2. Extract the downloaded zip file and place alist.exe in an empty folder.

3. Click the search box, type cmd, and press Enter, as shown .

4. In cmd, type alist.exe server and do not close the window. It should run successfully, as shown .

5. Open your browser and enter localhost:5244 to access the AList console, as shown .

6. Username: admin Password: in the cmd window, as shown. You can select content in the terminal with the left mouse button and then right-click to copy .

7. Note that in cmd, clicking or dragging the cmd terminal interface with the left mouse button will cause it to enter selection mode, blocking the program by the system. You need to right-click in the terminal interface to release it. If the process is blocked, the cmd process name will have an additional selection; please be aware. The image shows an example of the program being blocked; right-click in the terminal interface to release it .

8. Now, you have successfully logged into AList as an administrator .

9. Click on Manage at the bottom .

10. You will enter the interface shown in the image. Although AList runs locally, it is recommended to change your username and password .

11. Change your account and password, then log in again with the new credentials .

12. Enter the console and then click on Storage, as shown .

13. Select Add, as shown .

14. Detailed configuration as shown. The mount path is the display path for AList, it is recommended to use /R2/your_bucket_name, the region is auto, and the root folder path is / (the image is filled in incorrectly, Orz) .

15. Return to the homepage, as shown .

16. Try uploading a file, as shown .

17. You can see that the speed is very fast .

18. Create directories for your image hosting to categorize landscape and portrait images, etc., for later use with Workers to connect to R2. I will use /ri/h as the directory for random landscape images and /ri/v as the directory for random portrait images.

Creating Workers to Connect to R2#

1. Go to the Cloudflare Dashboard, and navigate to the Workers and Pages page, as shown .

2. Click Create, select Create Workers, name it as you wish, and click Deploy .

3. Select Edit Code .

4. Paste the code (to create random landscape images):

export default {
  async fetch(request, env, ctx) {
    // R2 bucket configuration
    const bucket = env.MY_BUCKET;

    try {
      // List all objects in the /ri/h directory
      const objects = await bucket.list({ prefix: 'ri/h/' });

      // Randomly select an object from the list
      const items = objects.objects;
      if (items.length === 0) {
        return new Response('No images found', { status: 404 });
      }
      const randomItem = items[Math.floor(Math.random() * items.length)];

      // Get the selected object
      const object = await bucket.get(randomItem.key);

      if (!object) {
        return new Response('Image not found', { status: 404 });
      }

      // Set appropriate Content-Type
      const headers = new Headers();
      headers.set('Content-Type', object.httpMetadata.contentType || 'image/jpeg');

      // Return image content
      return new Response(object.body, { headers });
    } catch (error) {
      console.error('Error:', error);
      return new Response('Internal Server Error', { status: 500 });
    }
  },
};

5. Click the file icon on the left .

6. Fill in wrangler.toml with:

[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "114514"

7. Save the changes and click Deploy in the upper right corner .

8. In Settings - Variables, find the R2 bucket binding, and add your bucket; the variable name is the aforementioned MY_BUCKET .

9. In Settings - Triggers, add your custom domain name for access .

10. The access effect is different every time you refresh .

You can achieve the initial effect by using the HTML tag#

For example: <img src="your domain" alt="">