If you add a domain to your R2 bucket and serve images from it directly, are they cached at the edge

B

boldpix•12/4/24, 6:10 AM

We've created a private bucket and want to access files within it using PHP code and an interface. It's crucial that users can only access these files through that interface, and we want the link validity to be limited to 1 minute. Is it possible to still have file caching in this setup? Will the files be cached automatically?

SStephen If you add a domain to your R2 bucket and serve images from it directly, are the...

M

Matt•12/4/24, 6:54 AM

You don't need to put a worker in front of it, but you do need to create a cache rule for the domain

MMatt You don't need to put a worker in front of it, but you do need to create a cache...

S

StephenOP•12/4/24, 6:55 AM

Ah thank you!

Original message was deleted

B

boldpix•12/4/24, 8:47 AM

Thanks, for my own information, I want to know what things are being cached?

Original message was deleted

B

boldpix•12/4/24, 9:27 AM

Thank you, I understand.

S

sungod•12/4/24, 2:00 PM

Hello guys I have setup R2 and want to configure cloud connector with it and i am having trouble setting it up.

S

sungod•12/4/24, 2:06 PM

We need example for R2 here https://developers.cloudflare.com/rules/cloud-connector/examples/

Cloudflare Docs

Examples · Cloudflare Rules docs

S

sungod•12/4/24, 2:08 PM

I can access the object at https://apac.example.com/images/mobiles/product.webp

S

sungod•12/4/24, 2:09 PM

But i have Setup the cloud connector as https://example.com/cdn-3/images/mobiles/product.webp

S

sungod•12/4/24, 2:09 PM

I am getting a 404

S

sungod•12/4/24, 2:09 PM

Notice the R2 is at subdomain apac

S

sungod•12/4/24, 2:10 PM

and i have added a cdn-3 in the Cloud connector as https://example.com/cdn-3/*

S

sungod•12/4/24, 2:10 PM

I am certain i am making a mistake in cloud connector part

BBnael Hi, I also face issues with R2, anyone else does? S3ServiceException [Interna...

박

박수찬•12/4/24, 2:21 PM

I'm still getting errors on r2.head within worker, am I the only one?

Original message was deleted

S

sungod•12/4/24, 3:05 PM

I will try to find the root cause for this with trial and error, @Space I agree . I firmly believe a comprehensive example / working example with R2 is a must.

S

sungod•12/4/24, 3:06 PM

@Leo the cdn-3 prefix is required so that i can use different R2 for different regions with different Urls for Same content.

S

sungod•12/4/24, 3:07 PM

so e.g. for NA region i can have a subdomain naws.example .com and cdn-1 prefix

S

sungod•12/4/24, 3:08 PM

so maybe one needs to put cdn-1 folder inside r2 bucket

Original message was deleted

S

sungod•12/4/24, 3:08 PM

Bingo this is what i will do now

S

sungod•12/4/24, 3:08 PM

Dude Space you are spot on , i will try it soon.

S

sungod•12/4/24, 3:11 PM

@Leo @Space this worked, making a folder inside R2 bucked named cdn-3

S

sungod•12/4/24, 3:12 PM

Ssungod Bingo this is what i will do now

H

harshil1712•12/4/24, 3:47 PM

hey, I tried it myself and ran into the same confusion. I have passed on the feedback to the PM. Let's see if it's need some documentation, we will add it

G

GoodluckH•12/4/24, 9:08 PM

I'm trying to upload images to my R2 bucket:

export const action: ActionFunction = async ({ request, context }) => {
    const formData = await request.formData();
    const image = formData.get('image') as File;
    if (!image) throw new Response("No image uploaded", { status: 400 });

    const buffer = await image.arrayBuffer();
    const { put } = context.cloudflare.env.BUCKET;
    await put(image.name, buffer);

    return new Response("OK", { status: 200 });

}

export const action: ActionFunction = async ({ request, context }) => {
    const formData = await request.formData();
    const image = formData.get('image') as File;
    if (!image) throw new Response("No image uploaded", { status: 400 });

    const buffer = await image.arrayBuffer();
    const { put } = context.cloudflare.env.BUCKET;
    await put(image.name, buffer);

    return new Response("OK", { status: 200 });

}

export const action: ActionFunction = async ({ request, context }) => {
    const formData = await request.formData();
    const image = formData.get('image') as File;
    if (!image) throw new Response("No image uploaded", { status: 400 });

    const buffer = await image.arrayBuffer();
    const { put } = context.cloudflare.env.BUCKET;
    await put(image.name, buffer);

    return new Response("OK", { status: 200 });

}

export const action: ActionFunction = async ({ request, context }) => {
    const formData = await request.formData();
    const image = formData.get('image') as File;
    if (!image) throw new Response("No image uploaded", { status: 400 });

    const buffer = await image.arrayBuffer();
    const { put } = context.cloudflare.env.BUCKET;
    await put(image.name, buffer);

    return new Response("OK", { status: 200 });

}

However, while I can see Class A/B operations on the dashboard, there's no images.

when I do

list()

list()

, I can see

ProxyStub { name: 'HeadResult', poisoned: false }

ProxyStub { name: 'HeadResult', poisoned: false }

ProxyStub { name: 'HeadResult', poisoned: false }

ProxyStub { name: 'HeadResult', poisoned: false }. But I cannot see the image on the dashboard. am i missing any steps?

I'm using Remix btw

G

GoodluckH•12/4/24, 9:40 PM

wdym i shouldn't do { put }?

G

GoodluckH•12/4/24, 9:40 PM

when i

list

list

list

list the bucket, i can see objects being returned to the console

G

GoodluckH•12/4/24, 9:41 PM

and maybe it has something to do with local development mode? I'm not running anything like

wrangler dev

wrangler dev

GGoodluckH wdym i shouldn't do { put }?

H

Hard@Work•12/4/24, 9:59 PM

Remove this line:

const { put } = context.cloudflare.env.BUCKET;

const { put } = context.cloudflare.env.BUCKET;

const { put } = context.cloudflare.env.BUCKET;

const { put } = context.cloudflare.env.BUCKET;

and just do

await context.cloudflare.env.BUCKET.put(image.name, buffer);

await context.cloudflare.env.BUCKET.put(image.name, buffer);

await context.cloudflare.env.BUCKET.put(image.name, buffer);

await context.cloudflare.env.BUCKET.put(image.name, buffer);

H

Hard@Work•12/4/24, 9:59 PM

Or destructure at the

env

env

instead

G

GoodluckH•12/4/24, 10:24 PM

so to display the image, i need to do something like BUCKET_URL/image.png right? what would the url be if im on local dev env?

GGoodluckH so to display the image, i need to do something like BUCKET_URL/image.png right?...

H

Hard@Work•12/4/24, 11:42 PM

You would have to create a different Worker route to serve it. The S3 API/Custom Domains aren't supported in local mode

HHard@Work You would have to create a different Worker route to serve it. The S3 API/Custom...

G

GoodluckH•12/4/24, 11:57 PM

how do you "serve" it? This is my loader function:

export const loader: LoaderFunction = async ({ context }) => {
  try {
    const { env } = context.cloudflare;
    const { objects } = await env.BUCKET.list();

    return { objects };
  } catch (e) {
    console.log(e);
    return new Response("Error", { status: 500 });
  }
};

export const loader: LoaderFunction = async ({ context }) => {
  try {
    const { env } = context.cloudflare;
    const { objects } = await env.BUCKET.list();

    return { objects };
  } catch (e) {
    console.log(e);
    return new Response("Error", { status: 500 });
  }
};

export const loader: LoaderFunction = async ({ context }) => {
  try {
    const { env } = context.cloudflare;
    const { objects } = await env.BUCKET.list();

    return { objects };
  } catch (e) {
    console.log(e);
    return new Response("Error", { status: 500 });
  }
};

export const loader: LoaderFunction = async ({ context }) => {
  try {
    const { env } = context.cloudflare;
    const { objects } = await env.BUCKET.list();

    return { objects };
  } catch (e) {
    console.log(e);
    return new Response("Error", { status: 500 });
  }
};

This is to get the objects. Do you have any resources on serving the images?

GGoodluckH how do you "serve" it? This is my loader function: ``` export const loader: Loa...

H

Hard@Work•12/5/24, 12:03 AM

Like,

env.BUCKET.get()

env.BUCKET.get()

env.BUCKET.get()

env.BUCKET.get()?

P

PlutoIsBlue•12/5/24, 5:28 AM

hi guys can someone help me out? i need help getting my worker to return presigned image urls from my r2 storage
i keep getting internal server error

H

Hybris•12/5/24, 6:45 AM

hello !

did anyone know the datacenters location for each r2 location hint ?

i would like to route my traffic to the closest r2 bucket using longitude and latitude given in the metadata of my clients request

T

TheGrindstone•12/6/24, 5:41 AM

Hello,

We have created a couple of plugin for integration of cloud storage to wordpress websites.
Now, we are looking to create a wordpress plugin for cloudflare R2 storage because we have received a lot of request from users.

We are not getting the option to rename or delete files from R2 storage.
If it can be done through APIs, please share the link or resources. Any help or advice is much appreciated.

TTheGrindstone Hello, We have created a couple of plugin for integration of cloud storage to w...

H

Hello, I’m Allie!•12/6/24, 6:15 AM

Renaming isn’t(directly) a thing, but deleting should be available. Are you using an S3-compatible library?

A

Ashgreninja55555•12/6/24, 7:01 AM

Hey guys, I generated presigned urls to upload some images in r2 using the key=${bookmarkId}/${fileName};
now I want to get the presigned urls of items in the bookmarkId folder, so I use the key=${bookmarkId}/. But it gives the error: specified key doesnt exist

HHello, I’m Allie!Renaming isn’t(directly) a thing, but deleting should be available. Are you usin...

T

TheGrindstone•12/6/24, 7:24 AM

Yes, we are using S3-compatible library. We just wanted to make sure if it is possible to allow copy & paste and rename operations or not.

Thank for taking the time to reply.

A

Ashgreninja55555•12/6/24, 7:31 AM

@Space Yes, I tried it using :
const listCommand = new ListObjectsV2Command({
Bucket: bucketName,
Prefix: "244/",
});

const response = await s3.send(listCommand);
but it gives error, specified key doesnt exist.
But when I do :
// const getObjectCommand = new GetObjectCommand({
// Bucket: "newboard-storage",
// Key: "244/1733392891348-244", // Replace with a valid key from your bucket
// });

// const signedUrlTest = await getSignedUrl(s3, getObjectCommand, { expiresIn: 3600 });
// console.log("Signed URL:", signedUrlTest);
it works

B

boldpix•12/6/24, 8:22 AM

I created a bucket in R2 for testing purposes without any objects inside. However, after checking it a couple of hours later, the Operations counter showed some numbers. How is this counted when there are no objects in the bucket?

Original message was deleted

B

boldpix•12/6/24, 8:59 AM

Besides the dashboard, could there be other ways that requests might be sent to this bucket? I've only refreshed the dashboard three times in this period, but the operation A counter has already increased to 11.

Original message was deleted

B

boldpix•12/6/24, 9:12 AM

I understand, but to gain a deeper understanding, isn't class A specifically designed for writing and deleting operations? So, why is the operation A counter also increasing? no clients are currently accessing this bucket to write or delete data, and no objects have been added via the dashboard.

Original message was deleted

B

boldpix•12/6/24, 10:30 AM

Thanks

C

Clément•12/6/24, 2:55 PM

Hello, if I want to retrieve a file via URL after uploading it using a pre-signed URL, do I need to make my R2 bucket public?

Original message was deleted

C

Clément•12/6/24, 3:39 PM

Thank's a lot

R

ryantg•12/6/24, 4:06 PM

Since starting to use R2 last month, we've received a handful of messages from users saying the assets are not loading on their work networks. We're using a domain managed by CF for the assets. We didn't turn on those extra protection things that CF has. I'm not sure if this is a common issue with R2, or is something specific to our settings/DNS.

R

ryantg•12/6/24, 4:10 PM

Thanks. We are using a custom domain.

R

ryantg•12/6/24, 4:10 PM

That's what I meant - sorry, wasn't clear.

If you add a domain to your R2 bucket and serve images from it directly, are they cached at the edge

Similar Threads

Similar Threads

Similar Threads