rizaldy/rizaldy.today
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

deploy: a247c1bf93

Browse Source
This commit is contained in:
faultables 2023-07-08 20:28:02 +00:00
commit 1da2760be9
29 changed files with 1785 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
.nojekyll Normal file
View File

1
CNAME Normal file
View File

@ -0,0 +1 @@
rizaldy.today

129
assets/css/reset.css Normal file
View File

@ -0,0 +1,129 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

349
assets/css/style.css Normal file
View File

@ -0,0 +1,349 @@
:root {
--body-bg-color: #eee;
--footer-fg-color: #666;
--base-font-size: 18px;
--font-family-serif: "Sentient", serif;
--font-family-sans-serif: "Clash Display", sans-serif;
--font-family-monospace: "JetBrains Mono", monospace;
--font-heading: var(--font-family-sans-serif);
--font-body: var(--font-family-serif);
--img-border-radius: 5px;
--img-transform: rotate(-1.337deg);
--img-border: 2px solid #333;
--layout-fragment-max-width: 666px;
--layout-fragment-padding: 4rem;
--layout-bg-color: #fff;
--line-color: #eee;
--anchor-color: inherit;
}
::selection {
background-color: #f8c8dc;
}
body {
background-color: var(--body-bg-color);
font-size: 16px;
font-family: var(--font-body);
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: 600;
}
a {
color: var(--anchor-color);
}
img {
border-radius: var(--img-border-radius);
transform: var(--img-transform);
border: var(--img-border);
max-width: 100%;
}
hr {
border: none;
border-top: 1px solid var(--line-color);
}
ul {
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
}
li {
list-style: square;
line-height: 1.8rem;
}
p {
line-height: 1.8rem;
margin-bottom: 0.5rem;
}
p + p {
margin-top: 1.3rem;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
code[class*="language-"],
pre[class*="language-"],
code,
pre {
font-family: var(--font-family-monospace);
font-size: 14px;
}
pre[class*="language-"] {
border-radius: 5px;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
padding: 1rem;
}
code {
background-color: #eee;
font-size: 14px;
padding: 2px 6px;
border-radius: 3px;
}
pre[class*="language-"] code {
padding: 0;
}
.l-container {
max-width: 1024px;
margin: 0;
background-color: var(--layout-bg-color);
padding-top: 0.8rem;
padding-bottom: 0.8rem;
border-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.l-fragment {
margin: auto;
padding: 1rem;
max-width: var(--layout-fragment-max-width);
}
.l-fragment h2 {
font-size: 2rem;
}
.l-fragment h3 {
font-size: 1.6rem;
margin-top: 2rem;
line-height: 2rem;
text-align: left;
}
.l-fragment h2 + p {
margin-top: 0.5rem;
}
.l-fragment--blog {
text-align: left;
}
.l-fragment--blog h1 {
font-size: 2.3rem;
margin-bottom: 0.3rem;
}
.l-fragment--blog h2 {
margin-top: 2rem;
line-height: 2.3rem;
}
.l-fragment--blog img {
transform: rotate(0deg);
border: none;
}
.l-fragment--blog li {
margin-bottom: 0.3rem;
}
.c-bio {
margin-top: 1.8rem;
}
.c-bio__avatar {
float: left;
width: 100%;
}
.c-bio__info {
float: left;
width: 100%;
}
.c-bio__info h2 {
margin-top: 1rem;
}
.c-bio__info ul {
padding-left: 1.2rem;
}
.c-bio__info li {
line-height: 1.5rem;
}
.c-footer {
border-top: 1px solid var(--line-color);
color: var(--footer-fg-color);
font-size: 14px;
padding: 0 1.3rem;
padding-top: 1.5rem;
}
.c-footer__copyleft {
float: left;
width: 100%;
}
.c-footer__links {
float: left;
width: 100%;
}
.c-footer__copyleft p {
line-height: 1.3rem;
}
.c-footer ul {
margin-top: 1rem;
padding-left: 0;
}
.c-footer li {
display: block;
}
.c-article__meta-info {
font-size: 16px;
color: #666;
}
.c-article__meta-info-tag {
margin-right: 0.3rem;
}
/* https://nicolasgallagher.com/micro-clearfix-hack/ */
.u-clearfix {
zoom: 1;
}
.u-clearfix:before,
.u-clearfix:after {
content: " ";
display: table;
}
.u-clearfix:after {
clear: both;
}
.u-no-underline {
text-decoration: none;
}
.u-underline--hover:hover {
text-decoration: underline;
}
.u-text-left {
text-align: left;
}
.u-text-right {
text-align: right;
}
@media screen and (min-width: 30em) {
body {
text-align: justify;
font-size: var(--base-font-size);
}
.l-container {
margin: 8rem auto;
margin-bottom: 0;
}
.l-fragment {
padding: var(--layout-fragment-padding);
}
.l-fragment h1 {
font-size: 2.8rem;
}
.l-fragment h2 {
font-size: 2.6rem;
}
.l-fragment h3 {
font-size: 2rem;
margin-bottom: 0.3rem;
line-height: 2.5rem;
}
.l-fragment--blog h2 {
line-height: 2.8rem;
}
.l-fragment--blog li {
margin-bottom: 0.5rem;
}
.c-bio__avatar {
width: 25%;
}
.c-bio__info {
width: 75%;
}
.c-bio__info h2 {
margin-top: -8px;
}
.c-bio__info ul {
padding-left: 1.2rem;
}
.c-footer__links {
width: 60%;
text-align: right;
}
.c-footer__copyleft {
width: 40%;
}
.c-footer ul {
margin-top: 0;
}
.c-footer li {
display: inline-block;
padding-left: 1.5rem;
}
}

BIN
assets/img/avatar.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
blog/expose-web-service-at-home-via-tailscale-for-fun/Screen-Shot-2021-10-15-at-9.47.40-PM.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
blog/expose-web-service-at-home-via-tailscale-for-fun/Screen-Shot-2021-10-16-at-4.07.16-AM-2048x1305.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 965 KiB

BIN
blog/expose-web-service-at-home-via-tailscale-for-fun/Screen-Shot-2021-10-16-at-5.43.20-AM.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 989 KiB

BIN
blog/expose-web-service-at-home-via-tailscale-for-fun/Untitled-2021-10-15-2135-2048x985.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 595 KiB

BIN
blog/expose-web-service-at-home-via-tailscale-for-fun/Untitled-2021-10-16-0110-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
blog/expose-web-service-at-home-via-tailscale-for-fun/Untitled-2021-10-16-0110.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

155
blog/expose-web-service-at-home-via-tailscale-for-fun/index.html Normal file
View File

@ -0,0 +1,155 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Expose Web Services at Home via Tailscale for Fun
- rizaldy.today
</title>
<link rel="me" href="https://edgy.social/@rizaldy">
<link rel="preconnect" href="https://unpkg.com">
<link rel="preconnect" href="https://api.fontshare.com">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://unpkg.com/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@1&f[]=sentient@1&display=swap" rel="stylesheet">
<link href="https://fonts.bunny.net/css?family=jetbrains-mono:400" rel="stylesheet">
<link href="/assets/css/reset.css" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
</head>
<body>
<main class="l-container">
<div class="l-fragment l-fragment--blog">
<div class="c-article">
<h1>Expose Web Services at Home via Tailscale for Fun</h1>
<p class="c-article__meta-info">
<time>Oct 16, 2021</time> •
<span class="c-article__meta-info-tag"
><a class="u-no-underline u-underline--hover" href="#tailscale">TAILSCALE</a></span
>
</p>
<p>I have a small homelab server at home running TrueNAS Core. My home network sits behind NAT and there are probably 3 routers in front of me.
On the other hand I also have a small VM that has a static public IP address somewhere in Singapore. Some of my services need to be exposed to the internet for my friends to access—for example—this blog via DNS because remembering a domain address is more fun than a random number with 4 dots.</p>
<p>The problem is that this blog is running on my NAS and using a private IP address.</p>
<p>Also, my ISP assigns a public IP Address to my network dynamically. The simplest way to expose my services on my NAS to the Internet might be using Dynamic DNS but sometimes it's not as easy as it sounds.</p>
<p>So maybe I need to connect one of my VMs in Singapore with my NAS at home. Since it is not possible to connect ethernet cable from NAS to DigitalOcean data center in Singapore, so I have to connect it virtually.</p>
<p>And yes, by creating a VPN.</p>
<h2>Tailscale VPN</h2>
<p>Previously I used <a href="https://wireguard.com">Wireguard</a> with a hub-and-spoke network because managing the keys on each of my machines was quite a chore.</p>
<p>Then I found out <a href="https://zerotier.com">Zerotier</a> from a random page on Reddit. Zerotier uses a mesh network and it's cute how my machines can talk to each other on a peer-to-peer basis.</p>
<p>My problem with Zerotier is sometimes the network is somewhat unreliable and maybe it's my poor VM's fault. Also sometimes my machines just randomly can't talk to each other via the Zerotier assigned address and I believe it's a firewall issue.</p>
<p>So I found out Tailscale from one of my friends on Twitter (actually he is my boss at work). Tailscale is built on Wireguard and is a mesh network. Even though Wireguard has <a href="https://github.com/WireGuard/wg-dynamic">its own</a> mesh network solution, it's still WIP and using <a href="https://github.com/k4yt3x/wg-meshconf">alternative</a> is quite difficult because, again, managing keys is a pain.</p>
<p>Then I give Tailscale a try. Installing and running Tailscale is easy enough that even my gf (who is non an IT person) can use it without wondering what public/private key means.</p>
<p>Our devices can talk to each other even though we're on different networks, and that's cool. In most cases, we can communicate peer-to-peer and that's really great.</p>
<h2>Exposing web services on different private networks</h2>
<p>We have a secret journal running on my NAS and only accessible over the local network. The domain address is <a href="https://1460.rizaldy.club">1460.rizaldy.club</a> and resolves to a local IP address on the 192.168.1.0/24 subnet so maybe if you access it you will see a random web page (or none at all) rather than our secret journal.</p>
<p>My gf's private network uses the 10.26.0.0/24 while our journal lives in 192.168.1.242. The key is I use <a href="https://tailscale.com/kb/1019/subnets/">subnet routers</a> and I have Tailscale on my router (and on my device as well) at home. While Tailscale for iOS (and others) has &quot;accept routes&quot; enabled by default, that means our secret journal is directly accessible out of the box because my router advertises the 192.168.1.0/24 subnet and we're on the same tailnet.</p>
<p><img src="./Untitled-2021-10-16-0110.png" alt="some diagram"></p>
<p>And that's cool.</p>
<p>I never even touched Tailscale.app on her phone just to make sure everything was working fine, because it is. We can access it anywhere without having to expose the service to the internet, and that's it the point.</p>
<h2>Exposing web services on a private network to the Internet</h2>
<p>I have a minio instance on my NAS and sometimes I upload cat photos there. My minio is accessible at <a href="https://faultables-s3.lan">faultables-s3.lan</a> address and since I'm using <a href="https://tailscale.com/kb/1081/magicdns">Magic DNS</a> too, devices on my tailnet can resolve that domain (thanks to split tunnel) then anyone on my tailnet can see the cat photo I uploaded so maybe I can stop use imgur service as well.</p>
<p>But I also want my friends to know because my friends are nice and they deserve to see cats. To allow my friend to access it without doing anything, I need a static public IP address and my VM has it. Connecting my VM with my NAS via Tailscale was the answer and that's why you can see <a href="https://s3.edgy.social/0x0/bff5d074d399bdfec6071e9168398406.jpg">this cat</a> right on your screen.</p>
<p>The setup is pretty simple, I just pointed s3.faultable.dev to my VM's IP, set up <a href="https://caddyserver.com">Caddy Web Server</a> there, and told Caddy to proxy the request to 192.168.1.170:9000.</p>
<p>Here's another diagram:</p>
<p><img src="./Untitled-2021-10-15-2135-2048x985.png" alt="I did my best to visualize it"></p>
<p>Packets between my VM and my router are transmitted in an end-to-end encrypted using the Wireguard protocol so no one can see and/or modify the packets even if no one cares and that's cool.</p>
<h2>Reverse Proxy as a Service for fun</h2>
<p>So I just mentioned Tailscale on Twitter about my recent random thoughts:</p>
<p><img src="./Screen-Shot-2021-10-15-at-9.47.40-PM.png" alt="https://static-tweet.vercel.app/1448966405391405056"></p>
<p><a href="https://twitter.com/apenwarr/status/1448972965110898693">@apenwarr's</a> answer regarding my thoughts is perfectly understandable: it's not Tailscale's main business (nor focus) so why don't I create one?</p>
<p>Imagine you don't have to touch any server to just proxy web requests from the public internet to machines in your tailnet. Invite my machine to your tailnet, tell me the address of the domain you own, then tell me where to proxy requests for it.</p>
<p>In my mind is to setup an OpenResty instance with Redis as a data store, so let's make it official.</p>
<p>I'll be using a service from Fly.io (because I'm very interested in their service) to deploy OpenResty. For a high-level view of how it works, here's another cool diagram:</p>
<p><img src="./Untitled-2021-10-16-0110-2.png" alt=""></p>
<p>Actually I haven't deployed any instances to fly.io when creating this diagram, but if you can see this post it's very likely the diagram above is working.</p>
<p>Now let's try this out.</p>
<h2>Minimum Viable RPaaS</h2>
<p>We'll use openresty/openresty Docker's image as base image because we'll deploy it to fly.io plus we'll bring the Tailscale app on it later.</p>
<p>We'll be using the <a href="https://hub.docker.com/r/openresty/openresty">openresty/openresty</a> docker image as the base image as we'll be deploying it to fly.io plus we'll be bringing the Tailscale app over later.</p>
<p>I'll be using a managed Redis solution from <a href="https://upstash.com">Upstash</a> instead of Fly.io and we'll talk about it later. Now let's write the nginx.conf file:</p>
<pre class="language-nginx"><code class="language-nginx"><span class="token directive"><span class="token keyword">worker_processes</span> <span class="token number">2</span></span><span class="token punctuation">;</span><br><span class="token directive"><span class="token keyword">error_log</span> logs/error.log info</span><span class="token punctuation">;</span><br><br><span class="token directive"><span class="token keyword">events</span></span> <span class="token punctuation">{</span><br> <span class="token directive"><span class="token keyword">worker_connections</span> <span class="token number">1024</span></span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token directive"><span class="token keyword">env</span> REDIS_HOST</span><span class="token punctuation">;</span><br><span class="token directive"><span class="token keyword">env</span> REDIS_PORT</span><span class="token punctuation">;</span><br><span class="token directive"><span class="token keyword">env</span> REDIS_PASSWORD</span><span class="token punctuation">;</span><br><br><span class="token directive"><span class="token keyword">http</span></span> <span class="token punctuation">{</span><br> <span class="token directive"><span class="token keyword">server</span></span> <span class="token punctuation">{</span><br> <span class="token directive"><span class="token keyword">listen</span> <span class="token number">80</span></span><span class="token punctuation">;</span><br><br> <span class="token directive"><span class="token keyword">location</span> /</span> <span class="token punctuation">{</span><br> <span class="token directive"><span class="token keyword">set</span> <span class="token variable">$upstream</span> <span class="token string">''</span></span><span class="token punctuation">;</span><br><br> <span class="token directive"><span class="token keyword">access_by_lua</span> <span class="token string">'<br> local redis = require "resty.redis"<br> local redisc = redis:new()<br> local target = ngx.var.host<br><br> local redis_host = os.getenv("REDIS_HOST")<br> local redis_port = os.getenv("REDIS_PORT")<br> local redis_password = os.getenv("REDIS_PASSWORD")<br><br> local connect, err = redisc:connect(redis_host, redis_port, {<br> ssl = true<br> })<br><br> if not connect then<br> ngx.log(ngx.ERR, "failed to connect to redis", err)<br> return ngx.exit(500)<br> end<br><br> local auth, err = redisc:auth(redis_password)<br><br> if not auth then<br> ngx.say("failed to authenticate", err)<br> return ngx.exit(500)<br> end<br><br> local get_upstream, err = redisc:get(target)<br><br> if not get_upstream or get_upstream == ngx.null then<br> ngx.log(ngx.ERR, "no host found for key", key)<br> return ngx.exit(404)<br> end<br><br> ngx.var.upstream = get_upstream<br> '</span></span><span class="token punctuation">;</span><br><br> <span class="token directive"><span class="token keyword">proxy_pass</span> http://<span class="token variable">$upstream</span></span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token punctuation">}</span><br><span class="token punctuation">}</span></code></pre>
<p>The configuration above in short is to tell OpenResty to handle the request based on its Host header and forward the request based on the existing values. When the host is not listed in our Redis record, we will return a 404 Not Found page because it is.</p>
<p>The very simple data we're storing for now is just like this:</p>
<pre class="language-bash"><code class="language-bash"><span class="token operator">&lt;</span>target_host<span class="token operator">></span>:<span class="token operator">&lt;</span>upstream_ip<span class="token operator">></span>:<span class="token operator">&lt;</span>upstream_port<span class="token operator">></span></code></pre>
<p>So if I want to handle every incoming request from nginx.init8.lol to 100.73.204.66:42069, the operation is as simple as <code>SET nginx.init8.lol 100.73.204.66:42069</code>.</p>
<p><a href="./Screen-Shot-2021-10-16-at-4.07.16-AM-2048x1305.png"><img src="./Screen-Shot-2021-10-16-at-4.07.16-AM-2048x1305.png" alt=""></a></p>
<p>Please keep in mind that since packets are end-to-end encrypted means that target upstream need to be directly to be the Tailscale IP. For example, port forwarding from your WAN to your LAN on your router won't work because packets are encrypted unless you set reverse proxy on your router (and let the proxy do the job).</p>
<h2>Making it more official</h2>
<p>Now let's deploy our OpenResty to the fly.io platform. In order to connect Tailscale with Fly.io we can use <a href="https://tailscale.com/kb/1132/flydotio">this guide</a> from Tailscale Docs. Our fly.io instance will only have Tailscale IPv6 so we need to point our domain to use Tailscale IPv6 so fly.io can route traffic to your machine.</p>
<p>So I'm going to create a frontend for this service so that it can interact with Redis via a REST API. It's still a WIP at the moment (I'm writing this post while creating the service lol) but I wanted to let my internet friends know I'm developing something fun (or at least for me).</p>
<p>The common setting than this is to set <a href="https://ngrok.io">ngrok.io</a>, tell ngrok.io which port you want to expose then you will get a unique URL. That's pretty cool but what if I'm dogfooding this?
So I point app.init8.lol to ts-proxy.fly.io, invite the machine to my tailnet, then tell the proxy to point that domain to [fd7a:115c:a1e0:ab12:4843:cd96:6258:9a11]:80 which is my Tailscale IPv6 address on my mac that running Next.js app on tmux.</p>
<p><img src="./Screen-Shot-2021-10-16-at-5.43.20-AM.png" alt=""></p>
<p>Go <a href="https://app.init8.lol">visit this</a> to try it out before my mac dies! (dead)</p>
<h2>What's next?</h2>
<p>My main point is to destroy my DigitalOcean droplet which only does one thing which is proxying requests. Every time I run new service, I need to SSH into my VM; update <code>Caddyfile</code>, <code>systemctl reload caddy</code>, and so on. Apart from that I need to manage &amp; maintain the server and I'm too lazy for that.</p>
<p>In future I would like to add some nice functionality like:</p>
<ul>
<li>Issuing an SSL certificate from Let's Encrypt. In theory this is possible as long as your domain can complete HTTP-01 challenge.</li>
<li>GUI access to manage proxies so I don't have to use curl anymore when adding new service</li>
<li>Hardening the security</li>
<li>Make it work properly &amp; correctly</li>
</ul>
<p>This project is pretty fun and it took me 5-ish hours while I wrote this blog post to create a PoC.</p>
<p>If you have a web service at home and want to expose it to the public internet via the Fly.io network, mention me on <s>Twitter <a href="https://twitter.com/200GbE">@200GbE</a> (updated)</s> Mastodon <a href="https://edgy.social/@rizaldy">@rizaldy@edgy.social</a> and let's chat.</p>
<p>You can also check out <a href="https://git.edgy.social/rizaldy/rpaas">this project</a> on this repository to learn more, especially there's something I haven't attached here like the Dockerfile and fly.toml files.</p>
<h2>Demo (dead)</h2>
<ul>
<li><a href="https://nginx.init8.lol">Demo 1</a> (machine with a static public IP address, my devbox)</li>
<li><a href="https://app.init8.lol">Demo 2</a> (machine with a dynamic public IP address, my laptop)</li>
<li><a href="https://ts-proxy.fly.dev">Demo 3</a> (fly.io instance for this project)</li>
</ul>
</div>
</div>
<footer class="c-footer u-clearfix">
<div class="c-footer__copyleft">
<p class="u-text-left">
&copy; MMXXIII Rizaldy. Any and all opinions listed here are my own and not representative of my
employers; future, past and present.
</p>
</div>
<div class="c-footer__links">
<ul>
<li><a class="u-no-underline u-underline--hover" href="/">About</a></li>
<li><a class="u-no-underline u-underline--hover" href="/blog">Writings</a></li>
<li><a class="u-no-underline u-underline--hover" href="/colophon">Colophon</a></li>
<li>
<a class="u-no-underline u-underline--hover" href="https://github.com/faultables/rizaldy.today/commit/a247c1b"
>Source Code (a247c1b)</a
>
</li>
</ul>
</div>
</footer>
</main>
<script
async
defer
data-website-id="868b4c29-d510-44fb-9404-50c19680d322"
data-do-not-track="true"
src="https://u.rizaldy.today/umami.js"
></script>
</body>
</html>

128
blog/index.html Normal file
View File

@ -0,0 +1,128 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Blog
- rizaldy.today
</title>
<link rel="me" href="https://edgy.social/@rizaldy">
<link rel="preconnect" href="https://unpkg.com">
<link rel="preconnect" href="https://api.fontshare.com">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://unpkg.com/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@1&f[]=sentient@1&display=swap" rel="stylesheet">
<link href="https://fonts.bunny.net/css?family=jetbrains-mono:400" rel="stylesheet">
<link href="/assets/css/reset.css" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
</head>
<body>
<main class="l-container">
<div class="l-fragment">
<h2>Blog</h2>
<p>Technically a blog.</p>
<article class="c-article"><div>
<h3>
<a class="u-no-underline u-underline--hover" href="/blog/pac-is-actually-useful/">Proxy Auto-Configuration (PAC) is actually useful</a>
</h3><p class="c-article__meta-info">
<time>Jul 05, 2023</time> •
<span class="c-article__meta-info-tag"
><a class="u-no-underline u-underline--hover" href="#tailscale">TAILSCALE</a></span
>
<span class="c-article__meta-info-tag"
><a class="u-no-underline u-underline--hover" href="#proxy">PROXY</a></span
>
</p><p>So I just got my new Mac machine last week. It's just a small machine with 8 CPUs and 8 GB of memory. I've been thinking about buying one for a long time and now the time has come!</p>
</div><div>
<h3>
<a class="u-no-underline u-underline--hover" href="/blog/syncthing-anywhere-with-tailscale/">Syncthing Anywhere With Tailscale</a>
</h3><p class="c-article__meta-info">
<time>Jan 04, 2022</time> •
<span class="c-article__meta-info-tag"
><a class="u-no-underline u-underline--hover" href="#tailscale">TAILSCALE</a></span
>
<span class="c-article__meta-info-tag"
><a class="u-no-underline u-underline--hover" href="#syncthing">SYNCTHING</a></span
>
</p><p>I don't archive data very often but when I do it must be for a very important one. On the other hand, I somewhat don't trust &quot;cloud&quot; providers and would avoid them as much as I can since my paranoid level is kinda high.</p>
</div><div>
<h3>
<a class="u-no-underline u-underline--hover" href="/blog/expose-web-service-at-home-via-tailscale-for-fun/">Expose Web Services at Home via Tailscale for Fun</a>
</h3><p class="c-article__meta-info">
<time>Oct 16, 2021</time> •
<span class="c-article__meta-info-tag"
><a class="u-no-underline u-underline--hover" href="#tailscale">TAILSCALE</a></span
>
</p><p>I have a small homelab server at home running TrueNAS Core. My home network sits behind NAT and there are probably 3 routers in front of me.
</div></article>
</div>
<footer class="c-footer u-clearfix">
<div class="c-footer__copyleft">
<p class="u-text-left">
&copy; MMXXIII Rizaldy. Any and all opinions listed here are my own and not representative of my
employers; future, past and present.
</p>
</div>
<div class="c-footer__links">
<ul>
<li><a class="u-no-underline u-underline--hover" href="/">About</a></li>
<li><a class="u-no-underline u-underline--hover" href="/blog">Writings</a></li>
<li><a class="u-no-underline u-underline--hover" href="/colophon">Colophon</a></li>
<li>
<a class="u-no-underline u-underline--hover" href="https://github.com/faultables/rizaldy.today/commit/a247c1b"
>Source Code (a247c1b)</a
>
</li>
</ul>
</div>
</footer>
</main>
<script
async
defer
data-website-id="868b4c29-d510-44fb-9404-50c19680d322"
data-do-not-track="true"
src="https://u.rizaldy.today/umami.js"
></script>
</body>
</html>

BIN
blog/pac-is-actually-useful/1A5B132F-D2F9-4B1F-9923-434B045CFF60.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
blog/pac-is-actually-useful/236D9096-4D0A-43A5-9827-6227230FB8FE.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
blog/pac-is-actually-useful/AF9155DC-0B3D-4A4C-9F64-7435D6F77738.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 192 KiB

BIN
blog/pac-is-actually-useful/F89B89ED-50B6-4A0C-B6C2-078BFE35CCE6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 532 KiB

164
blog/pac-is-actually-useful/index.html Normal file
View File

@ -0,0 +1,164 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Proxy Auto-Configuration (PAC) is actually useful
- rizaldy.today
</title>
<link rel="me" href="https://edgy.social/@rizaldy">
<link rel="preconnect" href="https://unpkg.com">
<link rel="preconnect" href="https://api.fontshare.com">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://unpkg.com/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@1&f[]=sentient@1&display=swap" rel="stylesheet">
<link href="https://fonts.bunny.net/css?family=jetbrains-mono:400" rel="stylesheet">
<link href="/assets/css/reset.css" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
</head>
<body>
<main class="l-container">
<div class="l-fragment l-fragment--blog">
<div class="c-article">
<h1>Proxy Auto-Configuration (PAC) is actually useful</h1>
<p class="c-article__meta-info">
<time>Jul 05, 2023</time> •
<span class="c-article__meta-info-tag"
><a class="u-no-underline u-underline--hover" href="#tailscale">TAILSCALE</a></span
>
<span class="c-article__meta-info-tag"
><a class="u-no-underline u-underline--hover" href="#proxy">PROXY</a></span
>
</p>
<p>So I just got my new Mac machine last week. It's just a small machine with 8 CPUs and 8 GB of memory. I've been thinking about buying one for a long time and now the time has come!</p>
<p>I'll be using this tiny PC as my main workstation, but unlike my previous approach of setting up development environments, I now have plans to isolate each existing environment into VMs,
like, one for private; one for side projects, one for community stuff, and one for work.</p>
<p>I want to keep this tiny PC as clean as possible.</p>
<h2>The dumb way to use Tailscale</h2>
<p>This is the main topic of this post, but I'm doing my best to make this post not feel like a shot tweet. On my laptop I use 4 different identities (accounts) in Tailscale,
and I used to use Tailscale's <a href="https://tailscale.com/blog/fast-user-switching/">Fast user switching</a> feature which was quite useful. Often I forget to switch back
to my personal account after I realize I can't SSH into my server at home via its hostname.</p>
<p>So here's the story: I don't want to &quot;switch&quot; anymore so I don't forget one more time.</p>
<p>I create every VM I need and use different identities for Tailscale there. The OS is NixOS and I'm using <a href="https://orbstack.dev">OrbStack</a> to provision VMs on my tiny PC.
When I'm not working from home, I can SSH into the VM with this tiny PC as a jumphost while hoping my internet at home is working fine.</p>
<h3>First, it was DNS</h3>
<p>Every <a href="https://tailscale.com/kb/1136/tailnet/">Tailnet</a> has its own <a href="https://tailscale.com/kb/1217/tailnet-name/">unique name</a> with <code>ts.net</code> as root domains. My tiny PC's hostname
is <code>mac-mini</code> (sounds boring) so I can access it via <code>mac-mini.duck-map.ts.net</code>, and yes, duck-map.ts.net is my <em>real</em> Tailnet name.</p>
<p>The first problem is that <code>ts.net</code> can only be resolved by the &quot;MagicDNS server&quot; which resides on your own device accessed via <code>100.100.100.100</code>. This means that
when you try to query names for a machine that is outside your tailnet, you will get a bogus NXDOMAIN — which is good.</p>
<p>The second problem is that you can't route packets to machines outside your tailnet, of course.</p>
<p>Maybe I could use <a href="https://tailscale.com/kb/1019/subnets/">Subnet Routers</a> to advertise subnets of the bridge interface used by my VM but that only solves half of the problem (excluding DNS queries).</p>
<p>And what about the <a href="https://tailscale.com/kb/1103/exit-nodes/">Exit Node</a> option? Of course not the answer.</p>
<h3>Then, it was routing tables</h3>
<p>In certain cases I had to access an internal application that was only accessible through Tailscale to troubleshoot (#sysadminlife). I don't use proxies much but when I do my favorite
is to <code>ssh -D 6669 somewhere</code> and use 127.0.0.1:6669 as SOCKS5 proxy servers.</p>
<p><img src="./236D9096-4D0A-43A5-9827-6227230FB8FE.jpg" alt="236D9096-4D0A-43A5-9827-6227230FB8FE.jpg"></p>
<p>From the screenshot above, <code>kudxxx.tailnet-xxxxx12.ts.net</code> is the machine that resides on the tailnet where I work. I can't resolve the name, because, well, I'm using my own personal tailnet.</p>
<p>Then I can use <code>ssh -D 6669 delman@orb</code> where <code>delman</code> is the name of the VM to the tailnet at work. <code>socks5h</code> indicates that the DNS query is made on SOCKS5 proxy servers.</p>
<p>If referring to the screenshot above, I think it works.</p>
<h3>Proxy Auto-Configuration</h3>
<p>What if I need to access different machines on different tailnets like <code>heavy-rotation.duck-map.ts.net</code> and <code>kudxxx.tailnet-xxxxx12.ts.net</code> at the same time?</p>
<p>On MacOS (or maybe other OS too) you can only use 1 proxy server on your machine at a time. So <code>ssh -D 6669 delman@orb</code> and <code>ssh -D 4848 heavy-rotation@orb</code> require extra work when
you need to use either one.</p>
<p><img src="./AF9155DC-0B3D-4A4C-9F64-7435D6F77738.jpg" alt="./AF9155DC-0B3D-4A4C-9F64-7435D6F77738.jpg"></p>
<p>And no, using transparent proxies doesn't help.</p>
<p>And then I just came across an old technology called <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file">Proxy Auto-Configuration</a>
which is the title of this post. The concept is actually simple: a PAC is just a JavaScript file that calls a <code>FindProxyForURL</code> function that returns a single string. The minimal
script is something like this:</p>
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">FindProxyForURL</span> <span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> host</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'url '</span> <span class="token operator">+</span> url<span class="token punctuation">)</span><br> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'host '</span> <span class="token operator">+</span> host<span class="token punctuation">)</span><br><br> <span class="token keyword">return</span> <span class="token string">'DIRECT'</span><br><span class="token punctuation">}</span></code></pre>
<p>You don't need to save it using <code>.js</code> extensions by the way.</p>
<p>As far as I know that <code>alert</code> function doesn't work in Safari but it works fine in Firefox and Chrome. This is how it looks when &quot;debugging the PAC&quot; using Firefox:</p>
<p><img src="./1A5B132F-D2F9-4B1F-9923-434B045CFF60.jpg" alt="./1A5B132F-D2F9-4B1F-9923-434B045CFF60.jpg"></p>
<p>In many cases, you don't need to do that just to verify if your PAC is working — checking the access.log where you hosted the pac file must be enough.</p>
<h3>Making it official</h3>
<p>Now, here is the strategy:</p>
<ul>
<li>If I access <code>.duck-map.ts.net</code>, proxy the requests to <code>127.0.0.1:4848</code></li>
<li>If I access <code>.tailnet-xxxxx12.ts.net</code>, proxy the requests to <code>127.0.0.1:6669</code></li>
<li>Other than that don't proxy the requests to anywhere</li>
</ul>
<p>Actually I can use <code>mac-mini</code> instead of <code>127.0.0.1</code> as the hostname so I can use the PAC file everywhere using the same URL.</p>
<p>In every VM I use <a href="https://github.com/ginuerzh/gost"><code>gost</code></a> as SOCKS5 server. I can create a simple systemd service for <code>gost</code> like this:</p>
<pre class="language-js"><code class="language-js">systemd<span class="token punctuation">.</span>services<span class="token punctuation">.</span>gost <span class="token operator">=</span> <span class="token punctuation">{</span><br> description <span class="token operator">=</span> <span class="token string">"gost"</span><span class="token punctuation">;</span><br><br> after <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"network.target"</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br> wantedBy <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"multi-user.target"</span><span class="token punctuation">]</span><span class="token punctuation">;</span><br><br> serviceConfig <span class="token operator">=</span> <span class="token punctuation">{</span><br> ExecStart <span class="token operator">=</span> <span class="token string">"${pkgs.gost}/bin/gost -L=:6669"</span><span class="token punctuation">;</span><br> Restart <span class="token operator">=</span> <span class="token string">"always"</span><span class="token punctuation">;</span><br> RestartSec <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>And then <code>nixos-rebuild switch</code> as usual, then check:</p>
<pre class="language-bash"><code class="language-bash">$ systemctl status gost<br><br>● gost.service - gost<br> Loaded: loaded <span class="token punctuation">(</span>/etc/systemd/system/gost.service<span class="token punctuation">;</span> enabled<span class="token punctuation">;</span> preset: enabled<span class="token punctuation">)</span><br> Drop-In: /nix/store/rmhm2f4izkfxkpaix0ca2pxnvyswkxfi-system-units/service.d<br> └─zzz-lxc-service.conf<br> Active: active <span class="token punctuation">(</span>running<span class="token punctuation">)</span> since Wed <span class="token number">2023</span>-07-05 <span class="token number">15</span>:57:51 WIB<span class="token punctuation">;</span> 8h ago<br> Main PID: <span class="token number">43857</span> <span class="token punctuation">(</span>gost<span class="token punctuation">)</span><br> IP: <span class="token number">16</span>.1M in, <span class="token number">15</span>.8M out<br> IO: 0B read, 0B written<br> Tasks: <span class="token number">11</span> <span class="token punctuation">(</span>limit: <span class="token number">7106</span><span class="token punctuation">)</span><br> Memory: <span class="token number">10</span>.5M<br> CPU: <span class="token number">4</span>.504s<br> CGroup: /system.slice/gost.service<br> └─43857 /nix/store/q34c64p4cnxh67yxsqxjpjsgdmg8ilpq-gost-2.11.5/bin/gost <span class="token parameter variable">-L</span><span class="token operator">=</span>:6669</code></pre>
<p>For the contents of the PAC file, it could be like this:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">FindProxyForURL</span> <span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> host</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> work <span class="token operator">=</span> <span class="token string">"SOCKS5 mac-mini:6669"</span><br> community <span class="token operator">=</span> <span class="token string">"SOCKS5 mac-mini:4848"</span><br><br> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">shExpMatch</span><span class="token punctuation">(</span>host<span class="token punctuation">,</span> <span class="token string">"*.tailnet-xxxxx12.ts.net"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> work<br> <span class="token punctuation">}</span><br><br> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">shExpMatch</span><span class="token punctuation">(</span>host<span class="token punctuation">,</span> <span class="token string">"*.duck-map.ts.net"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token keyword">return</span> community<br> <span class="token punctuation">}</span><br><br> <span class="token keyword">return</span> <span class="token string">"DIRECT"</span><br><span class="token punctuation">}</span></code></pre>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file#shexpmatch"><code>shExpMatch</code></a> is a function to check if the string
matches a specified shell glob expression. When one of the conditions is met, it tells the client <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file#return_value_format">how to connect</a> to the target.</p>
<p><a href="./F89B89ED-50B6-4A0C-B6C2-078BFE35CCE6.jpg"><img src="./F89B89ED-50B6-4A0C-B6C2-078BFE35CCE6.jpg" alt="./F89B89ED-50B6-4A0C-B6C2-078BFE35CCE6.jpg"></a></p>
<p><small><center><em>*click image above to enlarge*</em></center></small></p>
<p>As you may see I can access <code>*.duck-map.ts.net</code> and <code>*.tailnet-xxxxx12.ts.net</code> at the same time without switching accounts. If you check <code>(1)</code> and <code>(2)</code> in the screenshot above, the value in &quot;remote address&quot; is where the proxy server is running.</p>
<h3>But why not share nodes?</h3>
<p>I can <a href="https://tailscale.com/kb/1084/sharing/">share</a> my <code>mac-mini</code> devices to every tailnet I want, but why not? I don't know, maybe the answer is the same as why I installed and used a different account on Tailscale, in different VMs.</p>
<p>Also, &quot;shared devices&quot; are <em>quarantined</em> by default. Which means my <code>mac-mini</code> can't initiate connections to devices on the &quot;shared network&quot; until they talk to it first — although it's not a big deal.</p>
<h3>Why not Tailscale Funnel?</h3>
<p>It's a different story. Tailscale Funnel is all about exposing devices to the <em>wider</em> internet. This means that even anyone with no Tailscale installed can access
(usually a web service) via the boring HTTPS protocol. No MagicDNS. No CGNAT IPs. Just the internet we are used to.</p>
<h2>Conclusion</h2>
<p>There is no way to verify the integrity of the PAC file especially if you load it via a remote address using an insecure procotol. Which means MiTM attacks are by no means impossible. Maybe someone
is snooping on your network especially if you are on a public network that uses a captive portal. There's nothing to stop anyone from modifying a PAC file if <em>they</em> want and can.</p>
<p>But it's worth noting that almost all traffic in 2023 uses end-to-end encryption via HTTPS protocols. If you're installing a &quot;CA certificate&quot; because someone out of nowhere
asked you to do so, don't do it. If it's too late, maybe consider stopping receiving candy from random people at the bar as well, if that happens to you.</p>
<p>A simple <code>python -m http.server</code> or <code>caddy:alpine</code> web server can help serve your PAC files on the machine you control. And since you're in control, you probably already have Tailscale installed on the device and can
use a secure transport (such as Wireguard protocols) to load the PAC file.</p>
<p>The Proxy Auto-Configuration was <a href="https://developer.mozilla.org/en-US/docs/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file#history_and_implementation">introduced</a> into Netscape Navigator 2.0 in the late 1990s
at the same time when JavaScript was introduced. For years I have wondered why my machine has &quot;Automatic proxy configuration&quot; options and why I would ever need it.</p>
<p>And now I know.</p>
</div>
</div>
<footer class="c-footer u-clearfix">
<div class="c-footer__copyleft">
<p class="u-text-left">
&copy; MMXXIII Rizaldy. Any and all opinions listed here are my own and not representative of my
employers; future, past and present.
</p>
</div>
<div class="c-footer__links">
<ul>
<li><a class="u-no-underline u-underline--hover" href="/">About</a></li>
<li><a class="u-no-underline u-underline--hover" href="/blog">Writings</a></li>
<li><a class="u-no-underline u-underline--hover" href="/colophon">Colophon</a></li>
<li>
<a class="u-no-underline u-underline--hover" href="https://github.com/faultables/rizaldy.today/commit/a247c1b"
>Source Code (a247c1b)</a
>
</li>
</ul>
</div>
</footer>
</main>
<script
async
defer
data-website-id="868b4c29-d510-44fb-9404-50c19680d322"
data-do-not-track="true"
src="https://u.rizaldy.today/umami.js"
></script>
</body>
</html>

BIN
blog/syncthing-anywhere-with-tailscale/CleanShot-2022-01-04-at-9.18.04@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

123
blog/syncthing-anywhere-with-tailscale/index.html Normal file
View File

@ -0,0 +1,123 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Syncthing Anywhere With Tailscale
- rizaldy.today
</title>
<link rel="me" href="https://edgy.social/@rizaldy">
<link rel="preconnect" href="https://unpkg.com">
<link rel="preconnect" href="https://api.fontshare.com">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://unpkg.com/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@1&f[]=sentient@1&display=swap" rel="stylesheet">
<link href="https://fonts.bunny.net/css?family=jetbrains-mono:400" rel="stylesheet">
<link href="/assets/css/reset.css" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
</head>
<body>
<main class="l-container">
<div class="l-fragment l-fragment--blog">
<div class="c-article">
<h1>Syncthing Anywhere With Tailscale</h1>
<p class="c-article__meta-info">
<time>Jan 04, 2022</time> •
<span class="c-article__meta-info-tag"
><a class="u-no-underline u-underline--hover" href="#tailscale">TAILSCALE</a></span
>
<span class="c-article__meta-info-tag"
><a class="u-no-underline u-underline--hover" href="#syncthing">SYNCTHING</a></span
>
</p>
<p>I don't archive data very often but when I do it must be for a very important one. On the other hand, I somewhat don't trust &quot;cloud&quot; providers and would avoid them as much as I can since my paranoid level is kinda high.</p>
<p>And just like everyone else, I run servers at home. The servers are not that powerful but sufficient for my needs. I have two servers run but the most important (and data-heavy) is the box with TrueNAS OS.
Previously I use NextCloud to store my data plus I could access it anywhere. NextCloud is a powerful platform with rich features, I even can run an ActivityPub-based social network there. But the client app is somewhat heavy and the server consumes more resources than I thought, plus the caching system on the client app is somewhat buggy. I can't depend my life on NextCloud, or maybe someday will.</p>
<p>I know I can use <code>rsync(1)</code> or even <code>rclone(1)</code> on my computer but they both do different jobs. I need a system to pull-and-push data not just push.</p>
<p>And don't ask me why I'm not using BTSync.</p>
<p>Then I found <a href="https://syncthing.net">Syncthing</a> somewhere. It only does one thing and probably does it well: <strong>sync data</strong>. Its tagline is <em>&quot;Syncthing is a <strong>continuous file synchronization program</strong>. It synchronizes files between two or more computers in real time, safely protected from prying eyes. Your data is your data alone and you deserve to choose where it is stored, whether it is shared with some third party, and how it's transmitted over the internet.&quot;</em> and it really took my heart.</p>
<p>And then I installed Syncthing, used it for some time (until now), and that's why we are here.</p>
<h2>Syncing concepts</h2>
<p>Syncthing will establish direct connections between clients (peer-to-peer) as much as possible, and as we know, p2p connection is never easy. And if that's not possible, traffic is bounced through the &quot;relay&quot; until both computers figured out how to establish a direct connection — once again, if possible.</p>
<p>Syncthing uses <a href="https://docs.syncthing.net/dev/device-ids.html">&quot;Device ID&quot;</a> as an identifier so that neither party needs to know each other's IP address thanks to <a href="https://docs.syncthing.net/users/stdiscosrv.html">Global Discovery</a>. I just used the Local Discovery feature and turned the 'Enable Relaying' option off so I know the only connection made to .syncthing.net should be just sending an (anonymous) usage report, and I'm fine with that.</p>
<p>While this approach only makes my life harder, at least I know what I know even though all packets are encrypted in transit (via TLS) and are every device is authenticated by a cryptographic thing.</p>
<h2>LAN anywhere</h2>
<p>All my servers at home are almost locked-down. Only traffic to port 80 is allowed in on my WAN. Not even port forwarding because I don't know much about computer and networking security.
So I designed my home network to be limited to working only on LAN. I don't know exactly how but I just made TCP listen only to the private network. Like, If I can only visit Syncthing GUI via 192.168.1.56 then I can only visit Syncthing GUI over 192.168.1.0/24 network, on my network.</p>
<p>Speaking of my Syncthing, it's running on FreeBSD jail with a dedicated IP address from my DHCP server.</p>
<p>And as always, the only way to connect a private network over public networks is by establishing a VPN, assuming I'm not interested yet in a commercial &quot;Zero Trust Network&quot; solution that maybe tunnels any TCP/UDP packets through a commercial reverse proxy because the packets are not end-to-end encrypted.</p>
<p>Anyways, I use <a href="https://tailscale.com">Tailscale</a> and am a huge fan of both the team and the product. Tailscale is built on top Wireguard, and I used to use direct Wireguard until I was overwhelmed with mesh networking.</p>
<p>Using Tailscale is pretty straight forward, I don't have to manage keys; know each peer's IP address and public key, define DNS and even perform key rotation. It just works.</p>
<p>The problem is that my Syncthing is running on the FreeBSD jail and can't dial <code>devd(8)</code> in the jail whereas Tailscale needs to monitor network state changes (they have a <a href="https://github.com/tailscale/tailscale/pull/3508">workaround</a> for this! but I haven't tried it yet). Since I'm also running Tailscale on my TrueNAS, I can use <a href="https://tailscale.com/kb/1019/subnets">&quot;subnet router&quot;</a> which in short acts as a gateway of my physical subnet.</p>
<pre class="language-bash"><code class="language-bash">tailscale up --advertise-routes<span class="token operator">=</span><span class="token number">192.168</span>.1.0/24</code></pre>
<p>With the above command, I can access my Syncthing (and other jails too) wherever I am!</p>
<h2>Throughput</h2>
<p>Although the average latency in transmitting ICMP packets is unnoticeable, in the real world we mostly deal with TCP packets.</p>
<p>Syncthing transmits packets over TLS on top of TCP (which is great!) but in my needs it adds overhead as packets are already transmitted over secure protocol (Wireguard).</p>
<p>When I'm on my home network, the throughput is about 44 Mbits/s to my Syncthing jail since my laptop is connected over a WiFi network and on a different subnet. Ideally if on the same subnet (and over wired connection) my router and server can reach up to 900MiB/s.</p>
<p>What if I'm out of the house?</p>
<p>On a 50 Mbps network, using iperf3, I get around 6.49 MiB/s to my Syncthing jail and 8.56 MiB/s to direct host (depending on your network) which is… acceptable, kinda.
How about transferring 1.2GB files to my Syncthing jail over Tailscale?</p>
<p><img src="./CleanShot-2022-01-04-at-9.18.04@2x.png" alt=""></p>
<p>2.02 MiB/s is not bad enough, I guess?</p>
<h2>Conclusion</h2>
<p>Tailscale here is optional as Syncthing does the NAT traversal for you and also uses a secure protocol. Syncthing will do its best to establish a peer to peer connection and that's great!</p>
<p>However, with Tailscale I can access my &quot;shared directory&quot; via SAMBA on my other devices, anywhere. And also don't need any &quot;Relay Server&quot; only if my device can't talk peer-to-peer as Tailscale will do it for me :))</p>
<p>As closing, using both Tailscale and Syncthing is the best combination if you don't want to depend on a (cloud) storage providers.</p>
</div>
</div>
<footer class="c-footer u-clearfix">
<div class="c-footer__copyleft">
<p class="u-text-left">
&copy; MMXXIII Rizaldy. Any and all opinions listed here are my own and not representative of my
employers; future, past and present.
</p>
</div>
<div class="c-footer__links">
<ul>
<li><a class="u-no-underline u-underline--hover" href="/">About</a></li>
<li><a class="u-no-underline u-underline--hover" href="/blog">Writings</a></li>
<li><a class="u-no-underline u-underline--hover" href="/colophon">Colophon</a></li>
<li>
<a class="u-no-underline u-underline--hover" href="https://github.com/faultables/rizaldy.today/commit/a247c1b"
>Source Code (a247c1b)</a
>
</li>
</ul>
</div>
</footer>
</main>
<script
async
defer
data-website-id="868b4c29-d510-44fb-9404-50c19680d322"
data-do-not-track="true"
src="https://u.rizaldy.today/umami.js"
></script>
</body>
</html>

84
blog/unboxing-the-cloud-intro/index.html Normal file
View File

@ -0,0 +1,84 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Unboxing The Cloud (UTC): Intro
- rizaldy.today
</title>
<link rel="me" href="https://edgy.social/@rizaldy">
<link rel="preconnect" href="https://unpkg.com">
<link rel="preconnect" href="https://api.fontshare.com">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://unpkg.com/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@1&f[]=sentient@1&display=swap" rel="stylesheet">
<link href="https://fonts.bunny.net/css?family=jetbrains-mono:400" rel="stylesheet">
<link href="/assets/css/reset.css" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
</head>
<body>
<main class="l-container">
<div class="l-fragment l-fragment--blog">
<div class="c-article">
<h1>Unboxing The Cloud (UTC): Intro</h1>
<p class="c-article__meta-info">
<time></time> •
<span class="c-article__meta-info-tag"
><a class="u-no-underline u-underline--hover" href="#utc">UTC</a></span
>
</p>
<p>WIP</p>
</div>
</div>
<footer class="c-footer u-clearfix">
<div class="c-footer__copyleft">
<p class="u-text-left">
&copy; MMXXIII Rizaldy. Any and all opinions listed here are my own and not representative of my
employers; future, past and present.
</p>
</div>
<div class="c-footer__links">
<ul>
<li><a class="u-no-underline u-underline--hover" href="/">About</a></li>
<li><a class="u-no-underline u-underline--hover" href="/blog">Writings</a></li>
<li><a class="u-no-underline u-underline--hover" href="/colophon">Colophon</a></li>
<li>
<a class="u-no-underline u-underline--hover" href="https://github.com/faultables/rizaldy.today/commit/a247c1b"
>Source Code (a247c1b)</a
>
</li>
</ul>
</div>
</footer>
</main>
<script
async
defer
data-website-id="868b4c29-d510-44fb-9404-50c19680d322"
data-do-not-track="true"
src="https://u.rizaldy.today/umami.js"
></script>
</body>
</html>

84
blog/unboxing-the-cloud-utc-vms/index.html Normal file
View File

@ -0,0 +1,84 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Unboxing The Cloud (UTC): VMs
- rizaldy.today
</title>
<link rel="me" href="https://edgy.social/@rizaldy">
<link rel="preconnect" href="https://unpkg.com">
<link rel="preconnect" href="https://api.fontshare.com">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://unpkg.com/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@1&f[]=sentient@1&display=swap" rel="stylesheet">
<link href="https://fonts.bunny.net/css?family=jetbrains-mono:400" rel="stylesheet">
<link href="/assets/css/reset.css" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
</head>
<body>
<main class="l-container">
<div class="l-fragment l-fragment--blog">
<div class="c-article">
<h1>Unboxing The Cloud (UTC): VMs</h1>
<p class="c-article__meta-info">
<time></time> •
<span class="c-article__meta-info-tag"
><a class="u-no-underline u-underline--hover" href="#utc">UTC</a></span
>
</p>
<p>WIP</p>
</div>
</div>
<footer class="c-footer u-clearfix">
<div class="c-footer__copyleft">
<p class="u-text-left">
&copy; MMXXIII Rizaldy. Any and all opinions listed here are my own and not representative of my
employers; future, past and present.
</p>
</div>
<div class="c-footer__links">
<ul>
<li><a class="u-no-underline u-underline--hover" href="/">About</a></li>
<li><a class="u-no-underline u-underline--hover" href="/blog">Writings</a></li>
<li><a class="u-no-underline u-underline--hover" href="/colophon">Colophon</a></li>
<li>
<a class="u-no-underline u-underline--hover" href="https://github.com/faultables/rizaldy.today/commit/a247c1b"
>Source Code (a247c1b)</a
>
</li>
</ul>
</div>
</footer>
</main>
<script
async
defer
data-website-id="868b4c29-d510-44fb-9404-50c19680d322"
data-do-not-track="true"
src="https://u.rizaldy.today/umami.js"
></script>
</body>
</html>

82
colophon/index.html Normal file
View File

@ -0,0 +1,82 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Colophon
- rizaldy.today
</title>
<link rel="me" href="https://edgy.social/@rizaldy">
<link rel="preconnect" href="https://unpkg.com">
<link rel="preconnect" href="https://api.fontshare.com">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://unpkg.com/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@1&f[]=sentient@1&display=swap" rel="stylesheet">
<link href="https://fonts.bunny.net/css?family=jetbrains-mono:400" rel="stylesheet">
<link href="/assets/css/reset.css" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
</head>
<body>
<main class="l-container">
<div class="l-fragment">
<h2>Website colophon</h2>
<p>This page outlines technical details about this website. You can learn more about the purpose and content of the website, as well as the author on the <a href="/">About</a> page.</p>
<p>This site was built using a boring <a href="https://www.11ty.dev">static site generator</a>, written in a boring <a href="https://daringfireball.net/projects/markdown/">template</a> <a href="https://shopify.github.io/liquid/">language</a> and served by boring <a href="https://min.io">S3 compatible storage</a> behind a boring <a href="https://nginx.org/en/">reverse proxy</a>.</p>
<p>The three primary fonts I use are:</p>
<ul>
<li><a href="https://www.fontshare.com/fonts/sentient">Sentient</a> (serif)</li>
<li><a href="https://www.fontshare.com/fonts/clash-display">Clash Display</a> (sans-serif)</li>
<li><a href="https://www.jetbrains.com/lp/mono/">JetBrains Mono</a> (monospace)</li>
</ul>
<p>Syntax highlighting is done by the great <a href="https://prismjs.com/">Prism.js</a>, statically generated of course.</p>
<p>Every request to this site is handled by <a href="https://bunny.net/?ref=2jpxrtyw72">Bunny CDNs</a> exclusively in the APAC region for a reason. Nothing here is dynamic, so, maybe stop scanning <code>config.php</code>, <code>../../etc/passwd</code>, <code>.git</code> or something like that.</p>
<p>I'm experimenting with <a href="https://www.rfc-editor.org/rfc/rfc5861">stale-while-revalidate</a> in Bunny by keeping track of the latest commit id under this site to maximize the cache-hit ratio, so apologies if you run into any inconsistency issues.</p>
<p>And please don't <a href="https://portswigger.net/research/practical-web-cache-poisoning">poison the cache</a>, I guess.</p>
<p>If you enjoy the site, consider to <a href="https://github.com/faultables/rizaldy.today/discussions/new?category=show-and-tell">giving me a word</a> or <a href="https://github.com/sponsors/faultables">some love</a> (my love language is words of affirmation and github sponsors btw).</p>
<hr>
<p><em>You may notice that I use <a href="https://u.rizaldy.today">self-hosted</a>, <a href="https://umami.is/">open source privacy-focused web analytics</a>. I respect your <a href="https://www.w3.org/TR/tracking-dnt/">DNT preferences</a> (despite its <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/DNT">depreciation</a>) and it's likely that your uBlock Origin rule is blocking the <code>umami.js</code> just like mine.</em></p>
<p><em>Otherwise, no personal information is stored unless you treat your user agent as your own unique identity (sorry).</em></p>
</div>
<footer class="c-footer u-clearfix">
<div class="c-footer__copyleft">
<p class="u-text-left">
&copy; MMXXIII Rizaldy. Any and all opinions listed here are my own and not representative of my
employers; future, past and present.
</p>
</div>
<div class="c-footer__links">
<ul>
<li><a class="u-no-underline u-underline--hover" href="/">About</a></li>
<li><a class="u-no-underline u-underline--hover" href="/blog">Writings</a></li>
<li><a class="u-no-underline u-underline--hover" href="/colophon">Colophon</a></li>
<li>
<a class="u-no-underline u-underline--hover" href="https://github.com/faultables/rizaldy.today/commit/a247c1b"
>Source Code (a247c1b)</a
>
</li>
</ul>
</div>
</footer>
</main>
<script
async
defer
data-website-id="868b4c29-d510-44fb-9404-50c19680d322"
data-do-not-track="true"
src="https://u.rizaldy.today/umami.js"
></script>
</body>
</html>

141
index.html Normal file
View File

@ -0,0 +1,141 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
About
- rizaldy.today
</title>
<link rel="me" href="https://edgy.social/@rizaldy">
<link rel="preconnect" href="https://unpkg.com">
<link rel="preconnect" href="https://api.fontshare.com">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://unpkg.com/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@1&f[]=sentient@1&display=swap" rel="stylesheet">
<link href="https://fonts.bunny.net/css?family=jetbrains-mono:400" rel="stylesheet">
<link href="/assets/css/reset.css" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
</head>
<body>
<main class="l-container">
<div class="l-fragment">
<div class="c-bio u-clearfix">
<div class="c-bio__avatar">
<img src="/assets/img/avatar.jpg" alt="Rizaldy">
</div>
<div class="c-bio__info">
<h2>Rizaldy</h2>
<p>Senior DevOps Engineer</p>
<p><ul><li>
<a class="u-no-underline u-underline--hover" href="mailto:me@rizaldy.club">
Email: me@rizaldy.club</a>
</li><li>
<a class="u-no-underline u-underline--hover" href="https://keybase.io/rizaldy">
Keybase: keybase.io/rizaldy</a>
</li><li>
<a class="u-no-underline u-underline--hover" href="https://read.cv/rizaldy">
CV: read.cv/rizaldy</a>
</li></ul></p>
</div>
</div>
<p>Hi, I'm Rizaldy. I am currently a Senior DevOps Engineer at a Data Infrastructure Company based in Jakarta, ID. There have been so many changes in my life, but a few things that have remained unchanged are my interests in:</p>
<ul>
<li>Infrastructure Management</li>
<li>System Administration</li>
<li>Developer Experience</li>
</ul>
<p>I used to do software development profesionally since 2015, mostly web application development. Since the 2020s my deep interests has been in making software developers more productive &amp; happy while keeping systems up &amp; running, securely.</p>
<p>I will be happy to help solve problems in any organization in any industry with my expertise.</p>
</div>
<hr>
<div class="l-fragment">
<h2>Writings</h2>
<p>I love writing. Here are the 3 most recent posts:</p>
<article class="c-article"><div>
<h3>
<a class="u-no-underline u-underline--hover" href="/blog/pac-is-actually-useful/">Proxy Auto-Configuration (PAC) is actually useful</a>
</h3><p>So I just got my new Mac machine last week. It's just a small machine with 8 CPUs and 8 GB of memory. I've been thinking about buying one for a long time and now the time has come!</p>
</div><div>
<h3>
<a class="u-no-underline u-underline--hover" href="/blog/syncthing-anywhere-with-tailscale/">Syncthing Anywhere With Tailscale</a>
</h3><p>I don't archive data very often but when I do it must be for a very important one. On the other hand, I somewhat don't trust &quot;cloud&quot; providers and would avoid them as much as I can since my paranoid level is kinda high.</p>
</div><div>
<h3>
<a class="u-no-underline u-underline--hover" href="/blog/expose-web-service-at-home-via-tailscale-for-fun/">Expose Web Services at Home via Tailscale for Fun</a>
</h3><p>I have a small homelab server at home running TrueNAS Core. My home network sits behind NAT and there are probably 3 routers in front of me.
</div></article>
<br />
<p><a href="/blog">View all posts</a></p>
</div>
<hr>
<div class="l-fragment">
<h2>Services</h2>
<p>I am currently unavailable for consulting work (expected until May 2023).</p>
<div>
<h3>
<a class="u-no-underline u-underline--hover" href="/services/devops/">
DevOps Engineering
</a>
</h3>
<p>I can help organizations move fast and break less thing by adopting best practices from system administration; release engineering, infrastructure provisioning and management, security, to DevOps advocacy.</p>
</div>
<div>
<h3>
<a class="u-no-underline u-underline--hover" href="/services/rnd/">
R&D Engineer
</a>
</h3>
<p>Reduce time to market without compromising quality and stability by choosing the right tools for the job. I can help you to choose the right one.</p>
</div>
<div>
<h3>
<a class="u-no-underline u-underline--hover" href="/services/sre/">
Site Reliability Engineering
</a>
</h3>
<p>&quot;Hope is not a strategy&quot; as traditional SRE would say. I can help scale from availability; latency, performance, efficiency, change management, monitoring, emergency response, to capacity planning.</p>
</div>
</div>
<footer class="c-footer u-clearfix">
<div class="c-footer__copyleft">
<p class="u-text-left">
&copy; MMXXIII Rizaldy. Any and all opinions listed here are my own and not representative of my
employers; future, past and present.
</p>
</div>
<div class="c-footer__links">
<ul>
<li><a class="u-no-underline u-underline--hover" href="/">About</a></li>
<li><a class="u-no-underline u-underline--hover" href="/blog">Writings</a></li>
<li><a class="u-no-underline u-underline--hover" href="/colophon">Colophon</a></li>
<li>
<a class="u-no-underline u-underline--hover" href="https://github.com/faultables/rizaldy.today/commit/a247c1b"
>Source Code (a247c1b)</a
>
</li>
</ul>
</div>
</footer>
</main>
<script
async
defer
data-website-id="868b4c29-d510-44fb-9404-50c19680d322"
data-do-not-track="true"
src="https://u.rizaldy.today/umami.js"
></script>
</body>
</html>

69
services/devops/index.html Normal file
View File

@ -0,0 +1,69 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
DevOps Engineering
- rizaldy.today
</title>
<link rel="me" href="https://edgy.social/@rizaldy">
<link rel="preconnect" href="https://unpkg.com">
<link rel="preconnect" href="https://api.fontshare.com">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://unpkg.com/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@1&f[]=sentient@1&display=swap" rel="stylesheet">
<link href="https://fonts.bunny.net/css?family=jetbrains-mono:400" rel="stylesheet">
<link href="/assets/css/reset.css" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
</head>
<body>
<main class="l-container">
<div class="l-fragment">
<h2>Still WIP</h2>
<p>Thank you for stopping by.</p>
<br>
<a href="/"> Back to home </a>
</div>
<footer class="c-footer u-clearfix">
<div class="c-footer__copyleft">
<p class="u-text-left">
&copy; MMXXIII Rizaldy. Any and all opinions listed here are my own and not representative of my
employers; future, past and present.
</p>
</div>
<div class="c-footer__links">
<ul>
<li><a class="u-no-underline u-underline--hover" href="/">About</a></li>
<li><a class="u-no-underline u-underline--hover" href="/blog">Writings</a></li>
<li><a class="u-no-underline u-underline--hover" href="/colophon">Colophon</a></li>
<li>
<a class="u-no-underline u-underline--hover" href="https://github.com/faultables/rizaldy.today/commit/a247c1b"
>Source Code (a247c1b)</a
>
</li>
</ul>
</div>
</footer>
</main>
<script
async
defer
data-website-id="868b4c29-d510-44fb-9404-50c19680d322"
data-do-not-track="true"
src="https://u.rizaldy.today/umami.js"
></script>
</body>
</html>

69
services/devrel/index.html Normal file
View File

@ -0,0 +1,69 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
DevRel
- rizaldy.today
</title>
<link rel="me" href="https://edgy.social/@rizaldy">
<link rel="preconnect" href="https://unpkg.com">
<link rel="preconnect" href="https://api.fontshare.com">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://unpkg.com/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@1&f[]=sentient@1&display=swap" rel="stylesheet">
<link href="https://fonts.bunny.net/css?family=jetbrains-mono:400" rel="stylesheet">
<link href="/assets/css/reset.css" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
</head>
<body>
<main class="l-container">
<div class="l-fragment">
<h2>Still WIP</h2>
<p>Thank you for stopping by.</p>
<br>
<a href="/"> Back to home </a>
</div>
<footer class="c-footer u-clearfix">
<div class="c-footer__copyleft">
<p class="u-text-left">
&copy; MMXXIII Rizaldy. Any and all opinions listed here are my own and not representative of my
employers; future, past and present.
</p>
</div>
<div class="c-footer__links">
<ul>
<li><a class="u-no-underline u-underline--hover" href="/">About</a></li>
<li><a class="u-no-underline u-underline--hover" href="/blog">Writings</a></li>
<li><a class="u-no-underline u-underline--hover" href="/colophon">Colophon</a></li>
<li>
<a class="u-no-underline u-underline--hover" href="https://github.com/faultables/rizaldy.today/commit/a247c1b"
>Source Code (a247c1b)</a
>
</li>
</ul>
</div>
</footer>
</main>
<script
async
defer
data-website-id="868b4c29-d510-44fb-9404-50c19680d322"
data-do-not-track="true"
src="https://u.rizaldy.today/umami.js"
></script>
</body>
</html>

69
services/rnd/index.html Normal file
View File

@ -0,0 +1,69 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
R&D Engineer
- rizaldy.today
</title>
<link rel="me" href="https://edgy.social/@rizaldy">
<link rel="preconnect" href="https://unpkg.com">
<link rel="preconnect" href="https://api.fontshare.com">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://unpkg.com/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@1&f[]=sentient@1&display=swap" rel="stylesheet">
<link href="https://fonts.bunny.net/css?family=jetbrains-mono:400" rel="stylesheet">
<link href="/assets/css/reset.css" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
</head>
<body>
<main class="l-container">
<div class="l-fragment">
<h2>Still WIP</h2>
<p>Thank you for stopping by.</p>
<br>
<a href="/"> Back to home </a>
</div>
<footer class="c-footer u-clearfix">
<div class="c-footer__copyleft">
<p class="u-text-left">
&copy; MMXXIII Rizaldy. Any and all opinions listed here are my own and not representative of my
employers; future, past and present.
</p>
</div>
<div class="c-footer__links">
<ul>
<li><a class="u-no-underline u-underline--hover" href="/">About</a></li>
<li><a class="u-no-underline u-underline--hover" href="/blog">Writings</a></li>
<li><a class="u-no-underline u-underline--hover" href="/colophon">Colophon</a></li>
<li>
<a class="u-no-underline u-underline--hover" href="https://github.com/faultables/rizaldy.today/commit/a247c1b"
>Source Code (a247c1b)</a
>
</li>
</ul>
</div>
</footer>
</main>
<script
async
defer
data-website-id="868b4c29-d510-44fb-9404-50c19680d322"
data-do-not-track="true"
src="https://u.rizaldy.today/umami.js"
></script>
</body>
</html>

69
services/sre/index.html Normal file
View File

@ -0,0 +1,69 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Site Reliability Engineering
- rizaldy.today
</title>
<link rel="me" href="https://edgy.social/@rizaldy">
<link rel="preconnect" href="https://unpkg.com">
<link rel="preconnect" href="https://api.fontshare.com">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://unpkg.com/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@1&f[]=sentient@1&display=swap" rel="stylesheet">
<link href="https://fonts.bunny.net/css?family=jetbrains-mono:400" rel="stylesheet">
<link href="/assets/css/reset.css" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
</head>
<body>
<main class="l-container">
<div class="l-fragment">
<h2>Still WIP</h2>
<p>Thank you for stopping by.</p>
<br>
<a href="/"> Back to home </a>
</div>
<footer class="c-footer u-clearfix">
<div class="c-footer__copyleft">
<p class="u-text-left">
&copy; MMXXIII Rizaldy. Any and all opinions listed here are my own and not representative of my
employers; future, past and present.
</p>
</div>
<div class="c-footer__links">
<ul>
<li><a class="u-no-underline u-underline--hover" href="/">About</a></li>
<li><a class="u-no-underline u-underline--hover" href="/blog">Writings</a></li>
<li><a class="u-no-underline u-underline--hover" href="/colophon">Colophon</a></li>
<li>
<a class="u-no-underline u-underline--hover" href="https://github.com/faultables/rizaldy.today/commit/a247c1b"
>Source Code (a247c1b)</a
>
</li>
</ul>
</div>
</footer>
</main>
<script
async
defer
data-website-id="868b4c29-d510-44fb-9404-50c19680d322"
data-do-not-track="true"
src="https://u.rizaldy.today/umami.js"
></script>
</body>
</html>

69
services/webapp/index.html Normal file
View File

@ -0,0 +1,69 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Web App Development
- rizaldy.today
</title>
<link rel="me" href="https://edgy.social/@rizaldy">
<link rel="preconnect" href="https://unpkg.com">
<link rel="preconnect" href="https://api.fontshare.com">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://unpkg.com/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@1&f[]=sentient@1&display=swap" rel="stylesheet">
<link href="https://fonts.bunny.net/css?family=jetbrains-mono:400" rel="stylesheet">
<link href="/assets/css/reset.css" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
</head>
<body>
<main class="l-container">
<div class="l-fragment">
<h2>Still WIP</h2>
<p>Thank you for stopping by.</p>
<br>
<a href="/"> Back to home </a>
</div>
<footer class="c-footer u-clearfix">
<div class="c-footer__copyleft">
<p class="u-text-left">
&copy; MMXXIII Rizaldy. Any and all opinions listed here are my own and not representative of my
employers; future, past and present.
</p>
</div>
<div class="c-footer__links">
<ul>
<li><a class="u-no-underline u-underline--hover" href="/">About</a></li>
<li><a class="u-no-underline u-underline--hover" href="/blog">Writings</a></li>
<li><a class="u-no-underline u-underline--hover" href="/colophon">Colophon</a></li>
<li>
<a class="u-no-underline u-underline--hover" href="https://github.com/faultables/rizaldy.today/commit/a247c1b"
>Source Code (a247c1b)</a
>
</li>
</ul>
</div>
</footer>
</main>
<script
async
defer
data-website-id="868b4c29-d510-44fb-9404-50c19680d322"
data-do-not-track="true"
src="https://u.rizaldy.today/umami.js"
></script>
</body>
</html>