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

zegevlier•9/3/23, 11:35 AM

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?

zegevlier•9/3/23, 11:37 AM

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

index.html

, you have to go

https://[your R2 domain]/index.html

https://[your R2 domain]/index.html

. I believe there is a way to bypass this with rules, but I'm not sure how

Zzegevlier > but that's not working? Did you link the domain to your R2 bucket on the bucke...

daringsoulOP•9/3/23, 11:50 AM

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...)

Zzegevlier > I have about 400 MB files The limit for Pages is 25mb per file. If all your fi...

daringsoulOP•9/3/23, 11:50 AM

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•9/3/23, 11:56 AM

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.

Ddaringsoul If i set my pages to custom domain, linking DNS, the url works but I can't acces...

zegevlier•9/3/23, 11:57 AM

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

Zzegevlier > I'd like to somehow reach my R2 bucket without exposing it... What do you mea...

daringsoulOP•9/3/23, 11:58 AM

That's why I said I am lost and I have been deleting and uploading and creating everything over and over

Zzegevlier You can't have both pages and R2 on the same domain. You could add functions to ...

daringsoulOP•9/3/23, 11:59 AM

Could you please tell me how? is there a video i can follow step by step

daringsoulOP•9/3/23, 11:59 AM

or maybe a guide

zegevlier•9/3/23, 11:59 AM

For what?

zegevlier•9/3/23, 11:59 AM

Adding a subdomain to R2?

daringsoulOP•9/3/23, 11:59 AM

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

daringsoulOP•9/3/23, 12:02 PM

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•9/3/23, 12:02 PM

You would need to make a function (https://developers.cloudflare.com/pages/platform/functions/get-started/) to access the R2 bucket.

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

zegevlier•9/3/23, 12:03 PM

You can probably base it off of that, but I don't think you could just use that

Zzegevlier You would need to make a function (<https://developers.cloudflare.com/pages/plat...

daringsoulOP•9/3/23, 12:04 PM

this is not a client side code?

zegevlier•9/3/23, 12:04 PM

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

daringsoulOP•9/3/23, 12:06 PM

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?

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

daringsoulOP•9/3/23, 12:16 PM

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

daringsoulOP•9/3/23, 12:30 PM

I'm so sorry but I'm a noob and new to this thing

daringsoulOP•9/3/23, 1:47 PM

@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

daringsoulOP•9/3/23, 5:25 PM

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...

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, }); }, };

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

Similar Threads

Similar Threads

Similar Threads