7 ms·

Migrating from Netlify to Cloudflare Workers Sites for 2x Performance (2020)

101 points by indigodaddy 5y ago

trinovantes 5y ago
I don't know how much other FaaS have changed over the years but I really like CF Workers because it provides a local test server with live reload from my command line by simply running "wrangler dev" instead of pushing my code to a git repo or pasting changes into a web GUI.
aarondf 5y ago
Where are the images stored in a setup like this?
- aeyes 5y ago
  You could use Cloudflare R2 if you already are on Cloudflare.
  - samhw 5y ago
    R2 doesn't exist yet: https://www.cloudflare.com/en-gb/r2-storage/ https://www.cloudflare.com/en-gb/r2-storage/ (And, more importantly, it's not very clear when it will exist.)
    - celicaraptor 5y ago
      You can use Backblaze B2 with Cloudflare in front in the mean time.
    - jgrahamc 5y ago
      From the earnings call yesterday: "We're on track for R2 to progress to open beta in Q2 and then be generally available in the second half of 2022."
      - samhw 5y ago
        Oh, nice! Thanks for that tidbit, appreciate it :) Edit: I'm an idiot, you work for Cloudflare, lol - I thought you were just particularly sharp-eyed
    - dgb23 5y ago
      R2 is something I look forward to. I'm just imagining what would happen when would also provide managed Postgres in the same easy to handle and affordable manner as their other services.
      - samhw 5y ago
        For sure: Cloudflare is increasingly feeling like a better alternative to the 'bare cloud' providers, for most of my projects and I suspect also for the 99% of companies who are just building generic CRUD web/mobile app backends. Customisability is AWS/GCP's strong suit, but as a corollary they don't make it nearly as easy to 'paint within the lines' - which is an odd UX stance to take when, by definition, 99% of your customers fall within the 99%. Personally I would have designed it to be 'simple by default, configurable if you need it', but far be it from me to say what's best.
ewalk153 5y ago
Why use Cloudflare Workers for a Hugo site when they have Pages[1] that is specifically designed for static site build tools like Hugo, Jekyll, etc? [1] https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site https://developers.cloudflare.com/pages/framework-guides/dep...
- rmbyrro 5y ago
  Seems CloudFlare is really becoming a jack of all trades, which is cool because they are more and more a [developer friendly] replacement for those big cloud providers.
  - BeefWellington 5y ago
    > more and more a [developer friendly] replacement for those big cloud providers. They ARE a big cloud provider.
    - rmbyrro 5y ago
      Yeah they certainly are. But their services catalog only recently started to approach the: "hell, I can pull an entire commercial app just out of Cloudflare infra". There are still a few missing spots, but seems they'll close the gaps pretty soon. Excited to see.
- PinkPigeon 5y ago
  Pages doesn't allow for direct deployments. Has to go via git repo + webhooks. We make static sites with our CMS and don't really want to integrate another thing into our workflow. Lots of CF and git API calls to automate the whole thing reliably. Thus, we're sticking with workers sites for now. Pages is an attractive offering, however.
  - barake 5y ago
    Yeah, the totally managed deployment for Pages is great to get started, but not being able to run through our regular CI tool is a major bummer and has us also sticking with Worker sites.
colesantiago 5y ago
> When you deploy a site using Cloudflare Workers Sites, the entire Cloudflare network, with over 150 data centers around the world, effectively becomes your origin server. In comparison, Netlify’s global CDN only conists of 6 locations for free users and 12 locations for enterprise plans. I don't understand the value (or hype) of Netlify if Cloudflare has many PoP (Points of Presences) and is effectively way faster. Netlify looking similarly like an expensive Heroku (more PoP only on enterprise plans) which doesn't seem like a global network to me. Curious to know is anyone on Netlify considering moving or staying?
- ignoramous 5y ago
  Netlify has way more deployment knobs and integrations, but Cloudflare Pages (and not Workers Sites) is quickly catching up in that regard.
  - joao 5y ago
    One of the few grips I have with the more recent Cloudflare Pages is that the build times sometimes are 10x slower than Netlify. If you need to perform a fast update or rollback, it does take its time.
    - pier25 5y ago
      The Pages team said on Twitter yesterday they're working on supporting pre built deploy. Not sure if it will be via drag and drop or CLI though. Edit: See this thread where I lamented on being forced to deploy from Github: https://twitter.com/PierB/status/1491812373233119244 https://twitter.com/PierB/status/1491812373233119244
  - squaresmile 5y ago
    Using Github Actions, Worker Sites and the CF worker, I think the level of customization is quite high without too much work. For example, our hobby React SPA deploys on merge using Actions. It also has dynamic opengraph tags for pretty Discord embeds using CF worker.
- 5y ago
Jamie9912 5y ago
Getting a 403 for some of the assets on that site
rmbyrro 5y ago
Great post and tutorial. I wonder how performance would compare with an AWS S3 + CloudFront deployment.
miyuru 5y ago
The tradition of yearly blog host migration. The blog is on Vercel now. $ dig brianli.com @dns.google +short 76.76.21.21 (76.76.21.21 is Vercel's vanity IPv4 address)
- jve 5y ago
  https://brianli.com/2020/12/hosting-on-cloudflare-workers-sites-and-vercel/ https://brianli.com/2020/12/hosting-on-cloudflare-workers-si...
mritzmann 5y ago
This blogpost is from 2020. It seems that the author has since migrated the site to Vercel. It would be interesting to know why he has now chosen Vercel. $ dig +short brianli.com 76.76.21.21 $ whois 76.76.21.21 | grep OrgName OrgName: Vercel, Inc
- bla3 5y ago
  https://brianli.com/2020/12/hosting-on-cloudflare-workers-sites-and-vercel/ https://brianli.com/2020/12/hosting-on-cloudflare-workers-si...
  - fulafel 5y ago
    TLDR; He dual hosted on CloudFlare & Vercel for redundancy, then CloudFlare had an outage. Doesn't say if he dropped CF altogether after that or what.
- pictur 5y ago
  lol
ctvo 5y ago
> Long story short, it turns out that Workers KV also works for storing static sites generated by Hugo, Gatsby, and other SSGs. This makes complete sense if you think about it. When you access a static site, you point your browser to a unique URL, and the server returns a pre-generated static HTML file. In this model, the URL is the “key” and the contents of the HTML file is the “value”. Thus, a static site can be stored in a key-value data store like Workers KV. Why not just use Cloudflare's standard CDN? It makes no sense. By this logic, a file system is a perfect key value store, because ya know, the key is the full path and the file is the value.
- pjc50 5y ago
  > By this logic, a file system is a perfect key value store, because ya know, the key is the full path and the file is the value. They're not wrong. I'm still waiting for people to rediscover (fast)cgi as the "worker" interface.
  - afiori 5y ago
    cloudflare and others workers are almost literally fastcgi for javascript. The problem is that node is not a good cgi engine.
    - bastawhiz 5y ago
      Cloudflare doesn't use Node for Workers.
      - afiori 5y ago
        exactly, I think that no "workers" platform uses node as it is not feasible to use node for fastcgi, so javascript fastcgi need to use alternative runtimes. Since node is so dominant for serverside js, fastcgi with javascript is very uncommon. PS: I do not know whether deno is better for fastcgi, but it is unlikely that it would be good enough.
        5y ago
poisonborz 5y ago
Purely anecdotical, but moving to almost anywhere from Netlify (free tier) results in a major performance boost. A simple static site of mine went from 300ms to 80ms when I eventually transferred it to a cheap ssd webhost. Sure, free service, but know the strings attached.
- jamil7 5y ago
  Also anecdotal but I've also had the unpleasant experience of them suspending an account on the free tier through some automated system (still not 100% why, they didn't respond to our email). Account suspension results in all your sites getting immediately taken down without warning, if you host DNS there that also gets taken down. I wasn't hosting anything critical there so not a huge deal for me but I will never recommend them for anything serious.
bilater 5y ago
Nice - I'd be interested to hear about cases where sites that are not just static have been migrated over. Those really are the big use cases. For example can you move a Next.js site that leverages Incremental Static Generation to Cloudflare. I wonder if ISR is even possible out of the box without you having to setup complicated caching logic anywhere besides Netlify and Vercel.
roneythomas6 5y ago
I host bunch static sites and have done benchmarks around TFTB and general network performance. Netlify is fast and most people won't notice much difference since the web page will be cached after the first visit. Cloudflare is faster, you also get http3 over http2. Also Cloudflare has much better peering around the globe. When I do traceroute it's fewer hops compared to Netlify. I have tried vercel but haven't tested it extensively they use AWS and Cloudfront. If you use Github pages or Firebase hosting they both use Fastly. Fastly is also really good, in certain regions Fastly has better peering with ISP over Cloudflare. At Least where I am located Fastly is faster, but both Github pages and Firebase hosting doesn't have support for http3. On a fast network between h2 and h3 you won't find much difference. On a unstable or slow network h3 makes a big difference.
MaxLeiter 5y ago
Anecdotal, but I'm looking into migrating one of my projects websites to Vercel from Netlify (which it seems like the author ultimately did). Vercel deployed in 3 minutes and is 2-4x as fast to load for me: https://thelounge-github-io-jwd9o31su-mleiter.vercel.app/ https://thelounge-github-io-jwd9o31su-mleiter.vercel.app/ versus 7 minutes building/deploying on netlify: https://deploy-preview-259--thelounge.netlify.app/ https://deploy-preview-259--thelounge.netlify.app/

101 points by indigodaddy 5y ago

I don't know how much other FaaS have changed over the years but I really like CF Workers because it provides a local test server with live reload from my command line by simply running "wrangler dev" instead of pushing my code to a git repo or pasting changes into a web GUI.

aarondf 5y ago

Where are the images stored in a setup like this?

aeyes 5y ago
You could use Cloudflare R2 if you already are on Cloudflare.
- samhw 5y ago
  R2 doesn't exist yet: https://www.cloudflare.com/en-gb/r2-storage/ https://www.cloudflare.com/en-gb/r2-storage/ (And, more importantly, it's not very clear when it will exist.)
  - celicaraptor 5y ago
    You can use Backblaze B2 with Cloudflare in front in the mean time.
  - jgrahamc 5y ago
    From the earnings call yesterday: "We're on track for R2 to progress to open beta in Q2 and then be generally available in the second half of 2022."
    - samhw 5y ago
      Oh, nice! Thanks for that tidbit, appreciate it :) Edit: I'm an idiot, you work for Cloudflare, lol - I thought you were just particularly sharp-eyed
  - dgb23 5y ago
    R2 is something I look forward to. I'm just imagining what would happen when would also provide managed Postgres in the same easy to handle and affordable manner as their other services.
    - samhw 5y ago
      For sure: Cloudflare is increasingly feeling like a better alternative to the 'bare cloud' providers, for most of my projects and I suspect also for the 99% of companies who are just building generic CRUD web/mobile app backends. Customisability is AWS/GCP's strong suit, but as a corollary they don't make it nearly as easy to 'paint within the lines' - which is an odd UX stance to take when, by definition, 99% of your customers fall within the 99%. Personally I would have designed it to be 'simple by default, configurable if you need it', but far be it from me to say what's best.

ewalk153 5y ago

Why use Cloudflare Workers for a Hugo site when they have Pages[1] that is specifically designed for static site build tools like Hugo, Jekyll, etc? [1] https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site https://developers.cloudflare.com/pages/framework-guides/dep...

rmbyrro 5y ago
Seems CloudFlare is really becoming a jack of all trades, which is cool because they are more and more a [developer friendly] replacement for those big cloud providers.
- BeefWellington 5y ago
  > more and more a [developer friendly] replacement for those big cloud providers. They ARE a big cloud provider.
  - rmbyrro 5y ago
    Yeah they certainly are. But their services catalog only recently started to approach the: "hell, I can pull an entire commercial app just out of Cloudflare infra". There are still a few missing spots, but seems they'll close the gaps pretty soon. Excited to see.
PinkPigeon 5y ago
Pages doesn't allow for direct deployments. Has to go via git repo + webhooks. We make static sites with our CMS and don't really want to integrate another thing into our workflow. Lots of CF and git API calls to automate the whole thing reliably. Thus, we're sticking with workers sites for now. Pages is an attractive offering, however.
- barake 5y ago
  Yeah, the totally managed deployment for Pages is great to get started, but not being able to run through our regular CI tool is a major bummer and has us also sticking with Worker sites.

colesantiago 5y ago

> When you deploy a site using Cloudflare Workers Sites, the entire Cloudflare network, with over 150 data centers around the world, effectively becomes your origin server. In comparison, Netlify’s global CDN only conists of 6 locations for free users and 12 locations for enterprise plans. I don't understand the value (or hype) of Netlify if Cloudflare has many PoP (Points of Presences) and is effectively way faster. Netlify looking similarly like an expensive Heroku (more PoP only on enterprise plans) which doesn't seem like a global network to me. Curious to know is anyone on Netlify considering moving or staying?

ignoramous 5y ago
Netlify has way more deployment knobs and integrations, but Cloudflare Pages (and not Workers Sites) is quickly catching up in that regard.
- joao 5y ago
  One of the few grips I have with the more recent Cloudflare Pages is that the build times sometimes are 10x slower than Netlify. If you need to perform a fast update or rollback, it does take its time.
  - pier25 5y ago
    The Pages team said on Twitter yesterday they're working on supporting pre built deploy. Not sure if it will be via drag and drop or CLI though. Edit: See this thread where I lamented on being forced to deploy from Github: https://twitter.com/PierB/status/1491812373233119244 https://twitter.com/PierB/status/1491812373233119244
- squaresmile 5y ago
  Using Github Actions, Worker Sites and the CF worker, I think the level of customization is quite high without too much work. For example, our hobby React SPA deploys on merge using Actions. It also has dynamic opengraph tags for pretty Discord embeds using CF worker.
5y ago

Jamie9912 5y ago

Getting a 403 for some of the assets on that site

rmbyrro 5y ago

Great post and tutorial. I wonder how performance would compare with an AWS S3 + CloudFront deployment.

miyuru 5y ago

The tradition of yearly blog host migration. The blog is on Vercel now. $ dig brianli.com @dns.google +short 76.76.21.21 (76.76.21.21 is Vercel's vanity IPv4 address)

jve 5y ago
https://brianli.com/2020/12/hosting-on-cloudflare-workers-sites-and-vercel/ https://brianli.com/2020/12/hosting-on-cloudflare-workers-si...

mritzmann 5y ago

This blogpost is from 2020. It seems that the author has since migrated the site to Vercel. It would be interesting to know why he has now chosen Vercel. $ dig +short brianli.com 76.76.21.21 $ whois 76.76.21.21 | grep OrgName OrgName: Vercel, Inc

bla3 5y ago
https://brianli.com/2020/12/hosting-on-cloudflare-workers-sites-and-vercel/ https://brianli.com/2020/12/hosting-on-cloudflare-workers-si...
- fulafel 5y ago
  TLDR; He dual hosted on CloudFlare & Vercel for redundancy, then CloudFlare had an outage. Doesn't say if he dropped CF altogether after that or what.
pictur 5y ago
lol

ctvo 5y ago

> Long story short, it turns out that Workers KV also works for storing static sites generated by Hugo, Gatsby, and other SSGs. This makes complete sense if you think about it. When you access a static site, you point your browser to a unique URL, and the server returns a pre-generated static HTML file. In this model, the URL is the “key” and the contents of the HTML file is the “value”. Thus, a static site can be stored in a key-value data store like Workers KV. Why not just use Cloudflare's standard CDN? It makes no sense. By this logic, a file system is a perfect key value store, because ya know, the key is the full path and the file is the value.

pjc50 5y ago
> By this logic, a file system is a perfect key value store, because ya know, the key is the full path and the file is the value. They're not wrong. I'm still waiting for people to rediscover (fast)cgi as the "worker" interface.
- afiori 5y ago
  cloudflare and others workers are almost literally fastcgi for javascript. The problem is that node is not a good cgi engine.
  - bastawhiz 5y ago
    Cloudflare doesn't use Node for Workers.
    - afiori 5y ago
      exactly, I think that no "workers" platform uses node as it is not feasible to use node for fastcgi, so javascript fastcgi need to use alternative runtimes. Since node is so dominant for serverside js, fastcgi with javascript is very uncommon. PS: I do not know whether deno is better for fastcgi, but it is unlikely that it would be good enough.
      - 5y ago

poisonborz 5y ago

Purely anecdotical, but moving to almost anywhere from Netlify (free tier) results in a major performance boost. A simple static site of mine went from 300ms to 80ms when I eventually transferred it to a cheap ssd webhost. Sure, free service, but know the strings attached.

jamil7 5y ago
Also anecdotal but I've also had the unpleasant experience of them suspending an account on the free tier through some automated system (still not 100% why, they didn't respond to our email). Account suspension results in all your sites getting immediately taken down without warning, if you host DNS there that also gets taken down. I wasn't hosting anything critical there so not a huge deal for me but I will never recommend them for anything serious.

bilater 5y ago

Nice - I'd be interested to hear about cases where sites that are not just static have been migrated over. Those really are the big use cases. For example can you move a Next.js site that leverages Incremental Static Generation to Cloudflare. I wonder if ISR is even possible out of the box without you having to setup complicated caching logic anywhere besides Netlify and Vercel.

roneythomas6 5y ago

I host bunch static sites and have done benchmarks around TFTB and general network performance. Netlify is fast and most people won't notice much difference since the web page will be cached after the first visit. Cloudflare is faster, you also get http3 over http2. Also Cloudflare has much better peering around the globe. When I do traceroute it's fewer hops compared to Netlify. I have tried vercel but haven't tested it extensively they use AWS and Cloudfront. If you use Github pages or Firebase hosting they both use Fastly. Fastly is also really good, in certain regions Fastly has better peering with ISP over Cloudflare. At Least where I am located Fastly is faster, but both Github pages and Firebase hosting doesn't have support for http3. On a fast network between h2 and h3 you won't find much difference. On a unstable or slow network h3 makes a big difference.

MaxLeiter 5y ago

Anecdotal, but I'm looking into migrating one of my projects websites to Vercel from Netlify (which it seems like the author ultimately did). Vercel deployed in 3 minutes and is 2-4x as fast to load for me: https://thelounge-github-io-jwd9o31su-mleiter.vercel.app/ https://thelounge-github-io-jwd9o31su-mleiter.vercel.app/ versus 7 minutes building/deploying on netlify: https://deploy-preview-259--thelounge.netlify.app/ https://deploy-preview-259--thelounge.netlify.app/