URL shortener using Cloudflare Workers & Workers KV
Assuming your instance is deployed to go.example.com
go.example.com/admin
is the admin portal. Add & remove redirects (shortened URLs) herego.example.com/api
is the primary API endpoint (but you shouldn't need to touch this!)
- Go to the Credentials page
- Click Create credentials > OAuth client ID
- Select the Web application application type
- Name your OAuth 2.0 client and click Create
- Take note of the client ID - you will need it in future steps
- If you haven't already, you will need to log in to Cloudflare Wrangler
wrangler login
- Go to your Cloudflare dashboard
- Select the domain which this redirection service will be running from. We'll use
example.com
in this README - Take note of the zone ID and account ID - you will need it in future steps (use
CTRL
+F
or⌘
+F
to find it on the page) - Select the DNS tab. The URL will look something like
dash.cloudflare.com/0123456789abcdef0123456789abcdef/example.com/dns
- Add a new record of the
AAAA
type, with the name asgo
and the content as100::
. This will allow us to host our URL shortener atgo.example.com
- Add a new record of the
AAAA
type, with the name asgo-dev
and the content as100::
. This is what we'll use as our testing environment - Select the Workers tab. If this is your first time using Workers, you'll need to pick a name and select the free plan
- Click Manage KV namespaces. The URL will look something like
dash.cloudflare.com/0123456789abcdef0123456789abcdef/workers/kv/namespaces
- Add two namespaces, we'll call them
URL_SHORTENER
andURL_SHORTENER_DEV
, but the names really don't matter. - Take note of the ID of each of the namespaces
From the command line
- Clone this project
git clone https://github.com/DarkMatterMatt/cf-url-shortener
- Navigate to the newly created directory
cd cf-url-shortener
- Install dependencies
npm install
- Copy the example Wrangler configuration file so you can add your own details
cp wrangler.example.toml wrangler.toml
- Change the
account_id
andzone_id
to the one you copied earlier - Change the
example.com
routes to match your domain (if you were usingexample.com
you wouldn't have to make any changes) - In the first
kv_namespaces
, change bothid
andpreview_id
to theURL_SHORTENER_DEV
ID that you copied earlier. This will be the KV store for your development environment - In the second
kv_namespaces
, change theid
to theURL_SHORTENER
ID that you copied earlier. This will be the KV store for your production environment - Change the
GOOGLE_CLIENT_ID
to the one you copied earlier - Change the
AUTHORIZED_EMAIL_REGEX
variables to choose who can modify your redirects. This is the only security for your application and by default anyone can modify your redirects in the development environment. This variable is a regular expression, and you will need to double escape any backslashes (i.e. replace every\
with\\
). To only allow one email to modify your redirects, set it to^matt@example\\.com$
- Deploy to the development environment
npm run send
- Check that it all works as expected - go to
https://go-dev.example.com/admin
and create a redirect, then test thathttps://go-dev.example.com/myNewRedirect
correctly forwards you to where you want to go - Deploy to production! (Don't forget that you'll need to set up your redirects again in the production environment,
https://go.example.com/admin
)
npm run send:prod
Pull requests for features, bug fixes & unit tests are always welcome! If you find a bug or typo please open an issue.