💾 Archived View for wilw.capsule.town › notes › bunny-hosting.gmi captured on 2024-05-12 at 15:35:41. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

Hosting on Bunny.net

Last updated on 24 March 2023

Bunny CDN [1] provides a cost-effective, easy-to-use, and highly performant service for delivering web content. I currently use it to serve this website, as well as a few other systems.

Pull zones and storage

In Bunny, web content is categorised into "pull zones", where each can have an origin and a number of configurable settings. Typically you'd use one pull zone per website/app. If you've used AWS Cloudfront before, these are the same as "distributions".

Bunny also offers hosting through its storage [2] feature. Pull zones can be connected directly to a "storage zone" to allow you to keep all your web assets and service configuration in a single space.

Set-up a website/webapp using Bunny

*Step 1**: First, from the Bunny dashboard, create a new storage zone from the Storage tab. Give it a name and a location.

Once created, you can upload content directly from the browser. However, automated approaches can be better, as described below.

*Step 2**: Make a note of the storage hostname, username and password from the "FTP & Access" tab of the new storage zone.

*Step 3**: Upload files via a CLI tool.

Bunny supports (S)FTP/s (and is reportedly soon to include S3-compatible functionality too). For interacting with Bunny storage zones, I recommend using Cyberduck's CLI tool [3].

Download `duck` using homebrew:

brew install duck

Then, upload your web content (e.g. website or built webapp):

duck -y --username USERNAME --upload ftps://uk.storage.bunnycdn.com/ path/to/content/*

(Change the username and upload destination, if needed). The first time, `duck` will ask for the password for the account, but it should remember it for next time (if you let it).

*Step 4**: Now, create a new pull zone and configure it to your needs, selecting "Storage zone" rather than "URL" for the origin. Make sure to select the storage zone we just created.

*Step 5**: Add new hostnames (following the DNS instructions) to the pull-zone. Bunny will automatically provision certificates for you.

*Conclusion**

And that's it. Your site is now served via Bunny's global CDN.

Setup a deploy script

It's better to automate these things. We already have the password for the storage zone (for uploading files), but Bunny also offers an API, which we can use to purge the CDN cache when making updates to the website/app.

First, grab the API token from the "Account" link at the top of the Bunny dashboard. I add this token to my shell's config so I can refer to it in my scripts.

Next, write a deploy script. E.g. the one below, `deploy.sh`, is for a React app.

#!/bin/bash

npm run build
duck -y --username USERNAME --upload ftps://uk.storage.bunnycdn.com/ build/*
curl -X POST -H "AccessKey: $BUNNY_KEY" https://api.bunny.net/pullzone/ID/purgeCache

(Change the username, upload location, build path, and pull zone ID).

Finally, run `chmod +x deploy.sh` on your script, and you can now run it to deploy your changes.

Security headers

Modern webapps require additional browser security measures in order to help protect against common attacks. These measures can often be applied by setting response headers (for your webapp front-end) appropriate for your needs.

These headers may include `Content-Security-Policy`, `X-Frame-Options`, and others. I recommend using websites like securityheaders.com [4] to audit your own web applications.

To set up the security headers in Bunny, navigate to your Pull Zone -> Edge Rules. On this page, add a new edge rule accordingly:

Action: "Set response header"
Header name: The header you need (e.g. `X-Frame-Options`)
Header value: The value you need (e.g. `DENY`)
Conditions: Request URL -> Match Any -> "*"

Once done, you can see your headers listed, as shown below.

Back to notes