Walkable Limited Liability Company

Independent IT/Cloud Support

Troubleshooting: adding a storage bucket to my blog

Configuring an R2 storage bucket for caching purposes on Cloudflare

Adapting my blog to Cloudflare Workers

After I bought a custom domain with Cloudflare, I tried deploying it from GitHub and ran into a few issues. Initally I began with the Cloudflare documentation that outlines how to deploy an existing Next.js project on Workers, their serverless computing platform.

I kept getting error messages - at first a missing build command that meant I could commit my changes to GitHub, but it wasn't deploying to Cloudflare. The message said "[ERROR] The entry-point file at ".open-next/worker.js" was not found." Digging through the logs on Cloudflare led to troubleshooting the build command using the official opennextjs documentation.

How?

There's a mismatch between the Cloudflare docs and OpenNext - the Cloudflare guide is missing a build command in the package.json scripts. I chose to uninstall Wrangler and its associated config file and start the process all over again using the guide. I also updated my build command in the Cloudflare Workers & Pages settings:

npx opennextjs-cloudflare build

and for deployment:

npx opennextjs-cloudflare deploy

After correcting the build process, I found the given OpenNext deploy script requires a Cloudflare R2 storage bucket to be connected to my blog to save cache data. It took a bit of help from Gemini for me to work out its performance benefits - to serve visitors a copy from the cache instead of making Workers rebuild the page with every visit.

I created an R2 Object Storage bucket in Cloudflare. I connected the bucket to my Worker blog project using Bindings to allow the blog to interact with the bucket. I updated my wrangler.jsonc file using OpenNext's caching guide to include this binding.

Challenges

  • Debugging: Nearly everything - I didn't understand what half the terms meant from buckets, bindings, to build commands. It took a lot of Google, scouring documentation and Gemini to translate very technical information into digestible terms I could understand as a self-taught techy.

  • Build Errors: Took multiple crashes, build errors, rebuilds, analysing Cloudflare logs and local preview error logs to finally get it to a working state!

Conclusion

Probably would have been easier to use a premade template that had all of this preconfigured as I very much consider myself a beginner, but it did teach me a lot about scratching the surface of backend dev.

References