How Cloudflare Zero Trust & VS Code Tunnels Reducing My Back Pain
Sounds silly, but it’s real. Cloudflare Zero Trust (CZT) & VS Code Remote Tunnels being part of helps me reduce my back pain. In this article, let me share my journey to reduce backpack weight for work to less than 3kg and set up my work tools into a “simple data center” accessible via CZT.
This article isn’t sponsored by Cloudflare or Microsoft (If you want, we can talk about that :D ), so this article only contains a bunch of experience using VS Code Remote Tunnels & CZT in the $0 / Free tier without any “sugar coating” inside.
What’s The Problem?
My motivation comes from a simple problem statement, How do I make my work device available remotely and can be accessed with a lighter device (in terms of weight)?
It was triggered when I started trying to work outside my room/house. I quite often carry office equipment and several other supporting devices. Generally, I bring the same equipment between working at home and outside by bringing a Mechanical Keyboard and a Portable Screen as my secondary display.
After several weeks I often feel pain in my back. I realized I more often bend my back because the backpack load hit almost 10kg (sometimes more).
After that, the policy where I worked started to make me work almost every day in the office, so I finally decided to reduce some of my belongings. It reduces my backpack weight quite a bit, but since the office laptop remains quite large, it becomes quite heavy. A little illustration, the laptop size is a MacBook with a 16" screen in 2.3kg weight, excluding the charger itself and any other my belongings.
Solutions
Thanks to my colleagues gave me inspiration about making my laptop accessible remotely when we discussed private tunneling and bringing lighter equipment.
(Feel free to jump to the Implementation section in case you want straightforwardly see the technical steps)
Let’s break down some of my requirements:
- Access the terminal & other CLI tools that installed on my laptop
- Access IDE for editing manifest/configuration
- Access Web UI that forwarded from CLI tools to the machine’s local port
- Run some tools in my local docker and access it from web UI/CLI
- Browser (essential, of course!)
At starting, I’m using VSCode Remote Tunnels to do all of these. I’ll explain how I did it in another section below. VS Code is accessible via a browser. It means you can use almost any OS platform to work if you have at least a browser.
For the device I bring to the office, I’m using an Android tablet (Samsung Galaxy Tab S8). It can be another device like any other lightweight laptop, but I found several sweet spots in why this device is best for me compared to other devices like iPad/Windows Tablet/Windows Laptop:
- Compared to a phone, I can work on a tablet’s screen itself without relying on another external monitor since the size is quite enough
- Compared to most Microsoft Windows devices in the market, the Android tablet can have a more reliable battery (it can last for more than 6 hours for intense usage on my testing).
- Android devices can be charged using most of the power banks available in the market. It’s a benefit since I don’t have to bring a specific DC plug charger to charge my device. Just bring a power bank, and I got extra power juice for work.
- Compared to iPad, I can install termux for terminal emulation. It can be handy in case I can’t access my laptop termux can help to do some CLI tasks.
- Oh, an additional benefit when using an ARM-based device, you will not hear any fan noise :D
Btw, this article is created on my Tablet. So yeah, probably it’s time for the era of “compact working device”?
2nd Problem Happened
Only relying on the VS Code Tunnels have some drawbacks that you need to consider. If this issue isn’t a problem, you can just go with VS Code Tunnels. There are some issues I face after several days on this setup:
- For some reason, Copying/Pasting to VS Code CLI can be troublesome based on some browsers. I am using the Chrome browser. I can’t do a copy operation on the terminal in VS Code. I tried using another browser like Samsung browser. I can do copy operation but can’t do a paste operation.
- VS Code has a cloud port forwarding feature. But for some cases, I often get “Rate Limit Exceeded” when using this feature.
- Sometimes, when typing commands inside the VS Code terminal feel a little bit laggy. Probably because of the tunnel bandwidth.
And this is where’s the Cloudflare Zero Trust (CZT) implementation benefit kicks in, where we can utilize SSH client apps in Android/iOS to get a more powerful terminal interface (it solves the copy & paste issues in the browser previously). I’m using termux as my SSH client. It works pretty well to handle my task without any noticeable latency.
Let me draw an image to give the overview how each part of our tools can be accessed:
Implementation
This section is the purpose of why I wrote this. I’ll show you how I did it so you can start your implementation soon. Let’s start!
Setup VS Code Remote Tunnel
Please refer to this article if you find some command in this article isn’t working (https://code.visualstudio.com/docs/remote/tunnels). Of course, you have to install the VS code on your laptop. There’re two approaches available:
1. Enable tunnel via Desktop UI
Log in to your GitHub/Microsoft account since it will be the auth method for connecting to the tunnel. Go to the account menu on the left down, then click the “Turn on Remote Tunnel Access” choice.
Congratulations, the tunnel is established! Visit https://vscode.dev to start working remotely from your browser and log in using your account.
Go to the “Remote Explorer” section, select tunnel based on your computer name, and choose the arrow symbol to establish a tunnel connection. If the icon on the bottom left changes from “><” to the computer name, you already work from the remote environment.
Things you need to consider is you have to keep the Desktop UI open. If it is closed/terminated, your tunnel will be closed. But when you reopen the Desktop UI, the tunnel will be re-established automatically.
2. Enable tunnel via CLI
I recommend this way since it creates background service and can be without UI. If you also set up CZT after this, you can use your SSH client to execute this approach. Similar to 1st approach, install VS Code on your device. Execute the following command in your terminal:
code tunnel service install
Go to the “Remote Explorer” section, and select tunnel based on your computer name. If you see your computer name is there, you just successfully set up the tunnel!
Tip: If you’re facing an error like Workspace does not exist, create a new workspace file in your working folder by using your IDE. Another trick (tested on the MacOS platform) is to add “/” to the end of the VS Code URL.
Let me know if you’re facing different behavior below
Setup Cloudflare Zero Trust (CZT)
As mentioned above, we face some limitations and considerations when we rely on VS Code Tunnels. The issue is when it comes to how we do some copy/paste operations in VS Code IDE Terminal. Alternatively, we can use another SSH client to do some terminal operations. But this solution comes with a challenge, how to connect our computer when we’re outside our private network? Let me introduce you to Cloudflare Zero Trust (CZT), which can provide secure solutions starting from $0! I’ll refer to your computer as a server here.
The simplest way to look at the CZT architecture is similar to a VPN connection. But CZT here helps manage the connectivity by acting as a virtual bridge between your device and the server devices. After it is connected, we can directly access our devices by calling their IP address from our local SSH client. Simple, right?
Without further explanation, let’s start! We need to create a Cloudflare account (of course). Go to the Cloudflare dashboard, choose the Zero Trust section, and it will redirect to the CZT section.
We will set up a tunnel for our device, go to left navigation, click Access, and then click Tunnels. Click “Create a Tunnel” and fill in the Tunnel name.
You’ll redirect to the installation process. In this section, Cloudflare provides guidelines on how to install “cloudflared” based on the operating system of the server device.
Choose the operating system and architecture based on the device that will act as the server. CZT will check the connector or “cloudflared” status periodically. After the connection is recognized, click next.
In the route tunnel section, there are two sections. Let’s set up the “Private networks” first. We will make our local server IP address accessible in the CZT private network. Now, let’s find your server IP address. Reserve static IP in your local network if possible, so you don’t need to readjust our IP addresses again later. Click “Add a private network” and input the CIDR of your IP address. If only exposing the server IP, you can use the “/32” range. For example, if we want to access “192.168.0.2”, the CIDR range will be “192.168.0.2/32".
If you want to access all your local IPs, you can use the CIDR range of your local IP. Example, “192.168.0.0/24”. Finally, click the “Save private network” button.
Now the server must be accessible from CZT, but we haven’t finished yet. CZT following RFC1918 (https://developers.cloudflare.com/cloudflare-one/tutorials/warp-to-tunnel/) will make them bypass the private IP so it won’t get a tunnel. We will use the Split Tunnel feature to make our private IP reachable.
Let’s configure Split Tunnel, open the sidebar menu, and choose Settings. Since the split tunnel configuration is on the WARP client level, choose WARP Client. You will see the “Default” profile name in the Profile settings section (if not, you can create a new one).
Click the “Default” profile name, and click the Configure button. Scroll down until you find the Split Tunnels section, and ensure the “Include IPs and domains” choice is selected. Then click the Manage button.
Note: If you think these steps can be improved, let me know in the response section!
Fill out the form on the left. For the selector, choose the IP Address choice. For value, input your CIDR that we filled on the tunnel setup. Don’t forget to click the “Save destination” button.
Next, we will be setting our device enrollment permissions. In this section I’m going to use email as our auth method, now head to the sidebar menu, and choose Settings.
Click the “Manage” button on the device enrollment permissions section, and click the “Add a rule” button.
Fill in the rule name as you like, and choose “Allow” in the “Rule action” dropdown list. In the selector dropdown list, “Emails” and fill in the Value with your email account. Finally, click “Save”.
Looks good! Now we will set up our connectivity from our client device. We need the WARP client to do this. Skip the Download steps if you have to use the “1.1.1.1” service before. The client app used for CZT is the same. Heading to the sidebar menu, choose Settings, and select the Downloads menu. Choose based on your client’s device operating system.
Now we need to find out what is our organization’s name. If you did not remember what is your org name, head back to the CZT web dashboard. Go to Settings in the sidebar menu, and choose General. You will find your org name in the Team domain section.
After WARP is installed, open the application. Click the upper right hamburger menu, and click the “Account” menu. Choose the “Login to Cloudflare Zero Trust”. If there’s a popup that describes what is CTZ, just click next, and click Accept. Enter the organization name and click Next. It will redirect you to the Cloudflare Access login page. Fill in your email and choose “Send me a code”. You will get a code in your email.
If you success authenticate to CZT, now your WARP splash screen logo will be changed to Zero Trust. Switch the toggle and tried to access your server from your different network.
Additionally, you can expose SSH/Web UI from your local to the public using a domain name. We gonna set up a secure way to expose this publicly. Let’s say we have a local app and we want to expose it publicly.
Cloudflare can allow connection from the public can accessing to our local app. With CZT also, we can create an additional authentication layer so we can expose publicly our local app, for example, if you want to expose some monitoring tools but only accessible to you or your teammates.
In this scenario, we will create an access group to make a list of allowed people. By creating an access group, we will reduce some redundancy steps for other public apps later.
Open the left panel menu >> “Access” >> “Access Groups”. Click Add a Group button and fill in the “Group name” Tick the checkbox “Set as default group”, in the “Group configuration”, and choose Emails in the selector section. Fill in your email in the value section, and then click the Save button.
Now we are going to set up our application to be accessible from the server to the public, let’s head back to the left panel menu >> Access >> Tunnels. Click your tunnel name and click the “Configure” button. Click the “Public hostname” button, and the required values.
Make sure you already have the domain registered in Cloudflare. Fill the subdomain with something, and choose the domain dropdown with your domain. In the Service Type, choose “HTTP”, and fill in the URL values with your local IP and local port. For example, if you running a web app on the “6767” port. fill the url with “127.0.0.1:6767”. Now click the “Save hostname” button.
After exposing our app, you can just let it as is if you want to make the app publicly expose. If you want to add more authentication layers, head back to the left panel menu >> Acess >> Applications. Click “Add an application” and choose “Self-hosted”.
Then fill in the required values, and make sure the application domain name is the same as before. For “Session Duration” you can change based on your preferences.
Click next, and fill in the policy name. Make sure to tick the access group that we’ve created before. Click next again, and let the rest config remain the same. Finally, click the “Add application” button.
Now if you access the application url, you will see some OTP auth pages.
Closing
CZT gave some legit things to consider, but yeah lets fingers crossed they can always provide this free tier. If you ask if is there any alternative for CTZ, yes we have another option. You can take a look at Tailsacle. It will be another story if we want to discuss it.
See you on the another article~
