Cloudflare Developers•8mo ago

Serving static files to squarespace domain with R2 bucket

Hey there! I'd like to use an R2 bucket to host static website files and then use a worker to directly serve the HTML pages to my squarespace domain. Sorry if some of this is basic stuff, I'm completely new to website configuration so all the terms are a little confusing 😅 I've tried changing the SSL/TLS encryption mode, and on Off or Flexible, my site gives an ERR_TOO_MANY_REDIRECTS. On Full or Full (Strict) my site just returns the default under construction squarespace page. So far I've done a few things: 1. As seen in the included image, I replaced the squarespace DNS defaults on their website with the one provided in the DNS tab of the cloudflare site I set up. In the included pic I replaced the IP from that page with X just for confidentiality. 2. I set up a worker for routing the R2 to the domain, with the following setup. I'll be totally honest, I was looking for a quick and dirty approach to it and decided to use GPT4 to give me scripts and config, so I can see what it's doing since I've spent some time with web servers in python, but don't have the knowledge at the moment to understand how to make changes to it on my own. I realize this is bad practice for asking for help, but I wasn't able to find any resources after some pretty extensive googling on how to do this, so if anyone can provide me with a way to get started I'm more than happy to dive into some learning. wrangler.toml:

name = "my-worker"
type = "javascript"

account_id = "put_your_account_id_here"
zone_id = "put_your_zone_id_here"  # This is optional

# Define the R2 bucket binding
r2_buckets = [
  { binding = "myBucket", bucket_name = "name_of_your_r2_bucket" }
]

compatibility_date = "(compatibility date)"

name = "my-worker"
type = "javascript"

account_id = "put_your_account_id_here"
zone_id = "put_your_zone_id_here"  # This is optional

# Define the R2 bucket binding
r2_buckets = [
  { binding = "myBucket", bucket_name = "name_of_your_r2_bucket" }
]

compatibility_date = "(compatibility date)"

index.js:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  const path = url.pathname

  const bucketUrl = 'https://your-r2-bucket.r2.cloudflarestorage.com' + path
  const response = await fetch(bucketUrl)

  if (!response.ok) {
    return new Response('File not found', { status: 404 })
  }

  return new Response(response.body, {
    headers: { 'content-type': response.headers.get('content-type') }
  })
}

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  const path = url.pathname

  const bucketUrl = 'https://your-r2-bucket.r2.cloudflarestorage.com' + path
  const response = await fetch(bucketUrl)

  if (!response.ok) {
    return new Response('File not found', { status: 404 })
  }

  return new Response(response.body, {
    headers: { 'content-type': response.headers.get('content-type') }
  })
}

I've made sure to fill in the fields I'm supposed to in these files with the proper information from my site. If anyone has some sort of hunch for how to fix this, that would be much appreciated, cheers ✌️

17 Replies

Chaika•8mo ago

Trying to understand the root of your question

On Full or Full (Strict) my site just returns the default under construction squarespace page.

Full (Strict) is the only one you should want/ever use, if Squarespace isn't supposed to give the under construction page that'd be something on their end

I set up a worker for routing the R2 to the domain, with the following setup.

You don't need a Worker if you just want to serve the contents of your bucket. Just go into your R2 bucket -> Settings -> Connect Domain and input a subdomain you want your bucket to be reachable via, ex: cdn.example.com, and then you can just take your object keys and prefix them with the domain to reach them (or click on a file in your bucket and it'll show you the path to it on the custom domain) You should just throw away that worker, it makes no sense, is using outdated syntax, binding to the bucket to then use the auth-required s3 api, it would never work and although you can setup a worker to serve assets from your bucket, the custom domain way is better as you don't pay for worker invocations

danny boyOP•8mo ago

Absolute godsend, just did that now so hopefully it'll be working in a few minutes. Thanks! ❤️ Can't believe I didn't see that button when I was mucking around in the R2 settings, that's actually insane haha It worked, tysm!! Is there any way I can point the root of the site to the index.html?

Chaika•8mo ago

You can use a transform rule: You can find Transform Rules under your website/zone in the Cloudflare dash, then Rules -> Transform Rules -> Rewrite URL. Then, "Create Rule". Here's a magic link to go straight to creating a new one: https://dash.cloudflare.com/?to=/:account/:zone/rules/transform-rules/rewrite-url/new Your rule should look something like this: Where hostname is your r2 bucket custom domain, ex if you input cdn.example.com, it'd be that, or if you put it on your root/apex of your site, example.com

Chaika•8mo ago

transform rule rewrite urls are server-side, they wouldn't see a redirect or anything

danny boyOP•8mo ago

Man - gonna be sticking with cloudflare for a while with stuff like this hahaha That's so cool! Makes total sense :)

Chaika•8mo ago

there's a lot of cool stuff you can do, wish they were a bit more user friendly though

danny boyOP•8mo ago

Yeah definitely the docs aren't the clearest to read through Pricing and features are by far better than anything I've seen so far though One last question if it's cool, if I wanted to remove the file extension from other pages, for example go to mywebsite.com/page-2 instead of mywebsite.com/page-2.html, would I have to rename page-2.html so that it didn't have a file extension in the r2 bucket at all, or would there be a way to auto remove it in the URL?

Chaika•8mo ago

the thing is it'd be more like adding then auto removing, as you're asking for the user to visit /page-2 and then the server to request page-2.html def possible with transform rules though, although might cause false positive sometimes, for example if you actually had an extensionless file, we would try to add .html (when it might not be)

danny boyOP•8mo ago

True that's a really good point If i ever had a page-2.jpg or page-2.js or whatever it would spaz out

Chaika•8mo ago

well you could have it not do anything on files with extensions

danny boyOP•8mo ago

Noted, I'll just remove the file extensions no prob 👍

Chaika•8mo ago

but if page-2 was a jpg with no extension, we would assume it's html and add that extension

danny boyOP•8mo ago

oh gotcha

Chaika•8mo ago

R2 buckets are more meant to be dumb object storage, if you were looking for more a full featured web environment like Github Pages, any reason why you wouldn't use Cloudflare Pages? Unlimited bandwidth/static asset requests, only real limit is max 25 MB per file

danny boyOP•8mo ago

Yep large image files 😂 I'm gonna have a photography portfolio on there where people can download images so that's an unfortunate limitation

Chaika•8mo ago

you could potentially split it so pages.dev has all the html/css/js and r2 has all the images, but would be more complex

danny boyOP•8mo ago

Yeah honestly I'd just rather go with a set and forget approach But removing the file extensions is no problem for me. Thanks so much for the help! Totally appreciate it

Gaming

Programming

Serving static files to squarespace domain with R2 bucket

Did you find this page helpful?