I think ... - Cloudflare KVhttps://blog.kmonsoor.com/2021-06-06T00:00:00+06:00Create a free go-link server “on edge” using Cloudflare Worker KV2021-06-06T00:00:00+06:002021-06-06T00:00:00+06:00Khaled Monsoortag:blog.kmonsoor.com,2021-06-06:/golink-server-using-cloudflare-worker-kv/<p>Among quite a few ways to implement a go-link server (i.e., url-forwarder, short-url server, etc.), I will show how to use free-tier Cloudflare Worker (& <span class="caps">KV</span>) to create an in-house, on-edge, <strong>no-webserver</strong> go-link server.</p><p>Among quite a few ways to implement a go-link server (i.e., url-forwarder, short-url server, etc.), I’m going to show you how to use free-tier Cloudflare Worker (& <span class="caps">KV</span>) to create an in-house, on-edge, <strong>no-webserver</strong> go-link server.</p>
<p>For example, the short-link for this article is <a href="https://go.kmonsoor.com/golink-kv">go.kmonsoor.com/golink-kv</a> </p>
<p><img alt="overall structure" src="https://i.imgur.com/MjIS5gD.png"></p>
<ul>
<li><code>/latest</code> (by which I mean <code>go.yourdomain.co/latest</code>) may point to <code>https://www.yourcompany.com/about/news</code> which is a public page</li>
<li><code>/hr-help</code> may point to <code>https://www.company-internal.com/long-link/hr/contact.html</code>, which is company’s internal human-resources help portal</li>
<li><code>/cnypromo</code> may point to <code>https://shop.yourcompany.com/sales/promotions/?marketing-promo=2021-cny</code> which is a temporary sales promotions page targeting the shoppers during the Chinese new year of 2021.</li>
</ul>
<p>Please note that using the setup and the code below, it’ll be possible to resolve short-links via a <strong>single</strong> sub-domain, e.g., <code>go.your-domain.co</code>. However, it’s possible (with some modification of the code) to resolve/redirect via <em>any number of domains</em> (your own, of course) towards any other public or private <span class="caps">URL</span>, and all sorts of novelties. However, for brevity’s sake, I will discuss the first one, a single sub-domain usecase.</p>
<p>To set up a go-link server or short-<span class="caps">URL</span> resolver via a proper <span class="caps">KV</span>+Worker combination, we’ll go through these steps:</p>
<div class="toc">
<ul>
<li><a href="#pre-requisites">Pre-requisites</a></li>
<li><a href="#create-the-short-link-map-as-a-kv">Create the short-link map as a <span class="caps">KV</span></a></li>
<li><a href="#mapping-a-kv-to-a-worker-variable">Mapping a <span class="caps">KV</span> to a Worker variable</a></li>
<li><a href="#handling-a-route-with-webworker">Handling a route with webworker</a></li>
<li><a href="#create-the-worker">Create the Worker</a></li>
<li><a href="#pointing-a-dns-record-to-the-worker">Pointing a <span class="caps">DNS</span> record to the Worker</a></li>
<li><a href="#next-step">Next step</a></li>
<li><a href="#related">Related</a></li>
</ul>
</div>
<h1 id="pre-requisites">Pre-requisites<a class="headerlink" href="#pre-requisites" title="Permanent link">¶</a></h1>
<ul>
<li>The <span class="caps">DNS</span> resolver for the <strong>root</strong> domain (in the example below, <em><code>kmonsoor.com</code></em>) needs to be Cloudflare. Because the core of the solution, the “worker”, runs on the nearest (from the user) edge of Cloudflare using a standard <span class="caps">KV</span> (“key, value”) list.</li>
<li>Write permission to the <span class="caps">DNS</span> configuration as you’d need to add a new <span class="caps">AAAA</span> <span class="caps">DNS</span> record.</li>
<li>Some knowledge of Javascript(<code>ES6</code>), as we are going to write the “worker” in that language.</li>
</ul>
<h1 id="create-the-short-link-map-as-a-kv">Create the short-link map as a <span class="caps">KV</span><a class="headerlink" href="#create-the-short-link-map-as-a-kv" title="Permanent link">¶</a></h1>
<p>We’ll start the setup by creating the short-link map, the list between the short-link segments that you (or someone in your org) define, and the actual URLs they need to point to.</p>
<p>Find the <span class="caps">KV</span> stuff in the <code>Workers</code> section. From the screenshot, please ignore the “Route” section for now. </p>
<p><img alt="Find the KV stuff in the Workers section" src="https://i.imgur.com/b2Rk45u.png"></p>
<ul>
<li>you’d need to create a Worker <span class="caps">KV</span> “Namespace”. Name the namespace as you seem fit. I named it <code>REDIRECTS</code> (in all caps just as a convention, not required). </li>
<li>List the short links <span class="amp">&</span> their respective target URLs. From the examples in the intro, the keys <code>latest</code>, <code>hr-help</code>, <code>cnypromo</code> etc. would be in as the “key”, and the target full links as the respective “value”.</li>
<li>Remember <span class="caps">NOT</span> to start the short part with ‘/’. It’ll be taken care of in the code.</li>
</ul>
<p><img alt="Create the short-link map as a KV" src="https://i.imgur.com/jkC8bSr.png"></p>
<p>Once you’ve listed all your desired (short-link, target-link) combinations, now we have a <span class="caps">KV</span> on Cloudflare. However, it’s not referencable from your Worker code, not yet. Hence the next step.</p>
<h1 id="mapping-a-kv-to-a-worker-variable">Mapping a <span class="caps">KV</span> to a Worker variable<a class="headerlink" href="#mapping-a-kv-to-a-worker-variable" title="Permanent link">¶</a></h1>
<p>Now, we will map the previously created <span class="caps">KV</span> to a variable that can be referenced from our Worker code. Please note that though I used different names, it can be the same as well. Also, note that multiple Workers can access a single <span class="caps">KV</span>, and vice versa is also true; a single Worker can reference multiple KVs.</p>
<p><img alt="Mapping a KV to a Worker variable" src="https://i.imgur.com/lb7G9si.png"></p>
<h1 id="handling-a-route-with-webworker">Handling a route with webworker<a class="headerlink" href="#handling-a-route-with-webworker" title="Permanent link">¶</a></h1>
<p><img alt="Handling a route with webworker" src="https://i.imgur.com/KohHRfR.png"></p>
<h1 id="create-the-worker">Create the Worker<a class="headerlink" href="#create-the-worker" title="Permanent link">¶</a></h1>
<p>Now, we will write Worker-code that runs on <code>V8</code> runtime on the nearest (from the requesting user) “edge” location of Cloudflare, to execute the code and deliver the result(s) to the user. In this case, that would be to redirect user-requested address to the mapped one (by you, in the <span class="caps">KV</span> namespace above).</p>
<p><img alt="Creating a worker" src="https://i.imgur.com/eNfZNyN.png"></p>
<p>The code editor looks like this: </p>
<p><img alt="The code editor for Cloudflare worker" src="https://i.imgur.com/pb9AE9v.png"></p>
<p>If you rather prefer to copy-paste, please feel free to do it from the below GitHub Gist.</p>
<div class="gist">
<script src="https://gist.github.com/kmonsoor/dc9f96660423c96471f8574ba018d867.js"></script>
</div>
<p>Once done, it should look like …
<img alt="created webworker" src="https://i.imgur.com/XSdKB56.png"></p>
<h1 id="pointing-a-dns-record-to-the-worker">Pointing a <span class="caps">DNS</span> record to the Worker<a class="headerlink" href="#pointing-a-dns-record-to-the-worker" title="Permanent link">¶</a></h1>
<p>Finally, we need to point a <span class="caps">DNS</span> record that’ll redirect all requests to your re-soutign sub-domain (e.g. <code>go.your-domain.com</code>) to the Cloudflare Worker that we just created.</p>
<p>According to the Cloudflare docs, the <span class="caps">DNNS</span> record must be an <span class="caps">AAAA</span> record, pointing to the IPv6 address <code>100::</code>. The “Name” here is the “sub-domain” part of your choice, which is better be short, to rightfully serve our goal here. </p>
<p><img alt="Pointing a DNS record to it" src="https://i.imgur.com/62bk7pe.png"></p>
<p>Voila ! Now, test some of the short-urls that you’ve mapped via the <span class="caps">KV</span>. Enjoy !
Watch out for the target usage though. <a href="https://developers.cloudflare.com/workers/platform/limits#worker-limits">Here’s the limit</a>. </p>
<p>I think you’ll be fine, unless you’re some celebrity ;)</p>
<h1 id="next-step">Next step<a class="headerlink" href="#next-step" title="Permanent link">¶</a></h1>
<p>As the next step, I’m thinking to create a generic <code>Go/Link</code> resolver browser extension. Then, someone can set their own default domain or company domain of choice as short-domain host. In that case, entering just <code>go/hr-help</code> on the browser will take to <code>https://www.company-internal.com/.../hr/contact.html</code> that we have discussed at the beginning (remember the example case of an internal human resources help portal?).</p>
<h1 id="related">Related<a class="headerlink" href="#related" title="Permanent link">¶</a></h1>
<p>If you want to do this url-direction <strong>on your server, but only using webserver</strong>, try this: <a href="https://go.kmonsoor.com/golink-caddy">Personal short-link server using only Caddyserver</a></p>
<hr>
<p>If you find this post helpful, you can show your support <a href="https://www.patreon.com/kmonsoor">through Patreon</a> or by <a href="https://ko-fi.com/kmonsoor">buying me a coffee</a>. <em>Thanks!</em></p>