Cloudflare Developers•15mo ago

I have bought a domain on CloudFlare and created an R2 bucket, but I am lost in config...

Hello everyone, I hope you are great, Please I need some help, I am completely lost... I have bought a domain on CloudFlare and created an R2 bucket, I added an html page that serves as a welcome page, now I want to link the R2 Bucket and be able to access other files of the bucket through my domain, but that's not working? I have about 400 MB files, so I can't upload it through pages, since 25 mb is the max, my only option is to upload to bucket and somehow link my bucket to my website... But it's been 5 hours straight of reading everything, and I feel like I am just wasting my quota by repeating operations and not achieving my objective... If i open the website, it would show welcome screen, if i open a certain link (path), i should be downloading a file from R2 bucket... Please tell me what to do... Thank you for your time, Regards, Dante

11 Replies

zegevlier•15mo ago

but that's not working?

Did you link the domain to your R2 bucket on the bucket -> Settings -> Custom Domains? Does it show "Active"? What do you get when you visit the domain?

I have about 400 MB files

The limit for Pages is 25mb per file. If all your files are smaller than 25mb individually, it doesn't matter if they're over 25mb in total. You could also consider putting only the large files on your R2 bucket, and the small ones on Pages. This would save you R2 reads. R2 isn't really designed for hosting a website, so if you want to view the file in your R2 bucket at index.html, you have to go https://[your R2 domain]/index.html. I believe there is a way to bypass this with rules, but I'm not sure how

daringsoulOP•15mo ago

If i set my pages to custom domain, linking DNS, the url works but I can't access R2 without exposing it (I am putting a budget to have everything from one place, without needing APIs and without needing to expose anything...) This is already done, 400 MB of large files exceeding 25 MB are on R2, I'd like to somehow reach my R2 bucket without exposing it...

zegevlier•15mo ago

I'd like to somehow reach my R2 bucket without exposing it...

What do you mean by exposing? It is impossible by definition to reach a bucket that's not accessible. You can't have both pages and R2 on the same domain. You could add functions to your pages site to read from the R2 bucket, or you can put the R2 bucket on a subdomain

daringsoulOP•15mo ago

That's why I said I am lost and I have been deleting and uploading and creating everything over and over Could you please tell me how? is there a video i can follow step by step or maybe a guide

zegevlier•15mo ago

For what? Adding a subdomain to R2?

daringsoulOP•15mo ago

how do i have R2 bucket and pages both on same url

daringsoulOP•15mo ago

I am looking at this: https://github.com/longern/FlareDrive Is this right?

GitHub

GitHub - longern/FlareDrive: Free file hosting service using CloudF...

Free file hosting service using CloudFlare R2. Contribute to longern/FlareDrive development by creating an account on GitHub.

zegevlier•15mo ago

You would need to make a function (https://developers.cloudflare.com/pages/platform/functions/get-started/) to access the R2 bucket. You can probably base it off of that, but I don't think you could just use that

daringsoulOP•15mo ago

this is not a client side code?

zegevlier•15mo ago

No, it would run on Workers, so inside Cloudflare's datacenters

daringsoulOP•15mo ago

is there a video that shows from A to Z how to do a simple website host with R2 bucket link to download files or so? Also, if i create a function, will i be able to download a file using a URL path, not a button on page to download?

export default {
  async fetch(request: Request, env: any) {
    // For example, the request URL my-worker.account.workers.dev/image.png
    const url = new URL(request.url);
    const key = url.pathname.slice(1);
    // Retrieve the key "image.png"
    const object = await env.MY_BUCKET.get(key);
    
    if (object === null) {
      return new Response('Object Not Found', { status: 404 });
    }

    const headers = new Headers();
    object.writeHttpMetadata(headers);
    headers.set('etag', object.httpEtag);

    return new Response(object.body, {
      headers,
    });
  },
};

export default {
  async fetch(request: Request, env: any) {
    // For example, the request URL my-worker.account.workers.dev/image.png
    const url = new URL(request.url);
    const key = url.pathname.slice(1);
    // Retrieve the key "image.png"
    const object = await env.MY_BUCKET.get(key);
    
    if (object === null) {
      return new Response('Object Not Found', { status: 404 });
    }

    const headers = new Headers();
    object.writeHttpMetadata(headers);
    headers.set('etag', object.httpEtag);

    return new Response(object.body, {
      headers,
    });
  },
};

if my domain is example.work so according to CloudFlare documentation about functions How do i get to: example.work/folderA/folderB/folderC/someFile I'm so sorry but I'm a noob and new to this thing @zegevlier let's forget for a second about this whirlpool... Domain can link to either Pages or bucket, but not both, if i link to Bucket, i must use full paths, if i enter domain url, i will have invalid page or 404? If i link domain to pages with bucket, i will not have direct access to bucket because workers do not have a direct link, rather they just prepare method to be called from UI, did i read this correctly...? EX: some-domain.example -> With R2, i must provide full path some-domain.example/path/to/file.extension and entering "some-domain.example" returns 404 because no interface for R2... -> with Pages only index.html works and workers are ready for backend functions... there is no direct path to bucket, i have to call worker function to access bucket So here is what I did, connect to bucket, put the index.html there, redirect url to index.html If there is a better way, let me know, but this is probably the best what I can do...

Gaming

Programming

I have bought a domain on CloudFlare and created an R2 bucket, but I am lost in config...