I've got some cool tools—both AI and non-AI, open-source—that I absolutely love using on my local machine. One tool that I really wanted to move to the cloud, is the screenshot-to-code tool. It makes life so much easier for designers to developers hand-off.

I wanted them to use screenshot-to-code to whip up code templates directly, instead of just handing over Figma designs. They're savvy enough to tweak Tailwind classes and work with AI prompts. But let's be real, setting up a GitHub repository, messing with Docker, and managing Python environments? That’s a bit much to ask.

One problem with hosting AI tools in the cloud is managing access. You have to think about security and who can do what. After all, those AI API calls aren't free, and we can't just let everyone in.

I also needed a simple, quick method to manage who gets in and who doesn’t. And with a bunch of other tools to host, the last thing I wanted was to drown in a massive, 200-line Nginx config file.

That’s where Cloudflare Zero-Trust swoops in to save the day!

Tools and Concepts:

When you're gearing up to host an open source project in the cloud, there are a handful of tools and concepts that really come in handy. I'm going to walk you through some of the essentials. Keep in mind, my recommendations are based on personal experience, so they might be a bit subjective.

Cloud Server: getting a computer from a cloud provider
SSH and Vs Code: Accessing this computer from vs code
Setting up project: Setup the project on the cloud server
Cloudflare Site setup: Setting up your site in cloudflare
Cloudflare Tunnel: Getting your server to tunnel traffic to Cloudflare
Cloudflare Access Control: Setting up access rules
Recipe: Step by step directions.

If you're already familiar with these concepts, feel free to jump straight to the Recipe section where you can follow the practical steps to get your project live.

Cloud server

Alright, let's dive into the cloud server setup. Once you get a taste of hosting your own tools, I bet you'll be hooked and start self-hosting everything! The first move? Grab yourself a server from a cloud provider.

I'm a fan of Hetzner, but honestly, any provider will do the trick and the setup steps are pretty similar. You just need a virtual private server (VPS). A computer in the cloud so to speak.

First things first, head over to accounts.hetzner.com/signUp to open your Hetzner account.

Now, if you’re tuning in from the U.S., brace yourself for a bit of a song and dance—it’s almost like signing up for a mortgage! Just kidding, but you will need to pay invoices in advance or setup direct bank transfers.

Once you're in, navigate to Hetzner Cloud from your dashboard, kick off a new project, and get ready to add a server. Here’s how I set mine up:

Location: Pick the closest one to you. For me, that was Ashburn, VA, in the US East.
Image: You can go with Ubuntu OS or, if you’re planning to use Docker, jump over to Apps and pick Docker CE for the latest Ubuntu with Docker Community Edition already installed. Of course, you can always install Docker on your own later.
Type: I went with a Shared cVPU x86 (Intel/AMD) CPX11 - sporting 2GB RAM and a 40GB SSD.
Networking: Opt for both IPv4 and IPv6. Skipping IPv4 to save a penny might sound tempting, but trust me, you’ll need it.
SSH Keys: Definitely add an SSH key. If you haven’t done this before, Hetzner has a solid guide on generating SSH keys. This will allow you go into the server from anywhere. So, make sure to keep it secure and in accessible location. You will need the path to private key in the next step.

For now, you can skip setting up volumes, firewalls, backups, placement groups, labels, and cloud configs. You can always circle back to those later if you need them.

Give your serve a name and then hit ‘Create & Buy Now’ and you're all set to start your self-hosting adventure!

SSH

I won't go to all the intricacies of SSH here. Our goal is simple. Hit a button, and be able to jump into your cloud server with VS code all setup for you there. Our ideal world is you can't tell the difference between your local computer, and the one in the cloud. Here’s how you get it all set up:

Install the SSH Extension: First up, you need the right tool for the job. Open VS Code, head over to the Extensions view by clicking on the square icon on the sidebar. Search for "Remote-SSH" and install it. This extension is your golden ticket to connecting directly to your remote server.
Create or Edit the SSH Config File: You need an SSH configuration file to connect via hitting a button. In your VS code, open Command Palette Ctrl+Shift+P or on Mac command+shift+P . Choose Remote SSH: Open SSH Configuration File
Add Your Server Details: Open this config file in any text editor, and add a block for your server like this:
```
 Host my-server
     HostName your-server-ip 
     User your-username
     IdentityFile ~/path/to/your/private/key
```
Host is whatever you decide to call your server. HostName is the server public IP address - available from the Hetzner dashboard. The user is typically root for Ubuntu servers. The IdentityFile is where your SSH private key is saved on your local machine.
Connect Using VS Code: Now, open VS Code, launch the Command Palette (Ctrl+Shift+P), and type ‘SSH: Connect to Host’. Instead of entering all the details, you’ll just see ‘my-server’ (or whatever nickname you gave your server) listed there. Click it, and VS Code will use the details from your config file to log you in automatically—no hassle required.
Enjoy Seamless Access: And there you have it! With your SSH config file in place, connecting to your remote server becomes a breeze. Just a couple of clicks, and you’re in, ready to get down to business. Whatever you can do in your local machine, you can do in the remote server.

Setting up the project

This is a pretty straightforward and easy step with one simple rule. Whatever you do in your local machine to setup an open-source project. Do it in the remote server after you SSH.

For all intents and purposes, it is just another computer and works the same way. For example, setting up screenshot-to-code. Here’s how you’d kick things off:

First up, make sure you've got Docker, Docker Compose, and Git on your server. Sometimes, depending on your cloud provider and the server setup you chose, these might already be installed. If not, no sweat—the Docker and Git websites have super straightforward instructions on how to get them up and running.

Git clone the package.

 git clone https://github.com/abi/screenshot-to-code.git

Spin the docker image up.

 echo "OPENAI_API_KEY=sk-your-key" > .env
 docker-compose up -d --build

And just like that, if you head over to <server-ip>:5173 in your web browser, you’ll see your application live and in action.

💡

If you can't access it, run docker-compose logs. It will show you if there any errors in the setup.

Congratulations! You’ve just successfully hosted your first open-source application. Pretty cool, right?

Here’s the good news. You can access this tool from anywhere in the world, and so can your team.

And the not-so-good news? Well, technically, anyone in the world could access it too. So, let's make sure we handle that access wisely in the next steps!

Cloudflare Site Setup

Alright, let’s get your application locked down with Cloudflare! Managing who gets to access your app is super important, and for that, you'll need to add a new site to Cloudflare. Plus, having a domain on Cloudflare not only ticks off a technical requirement but also keeps things neat—because let’s face it, memorizing IP addresses isn’t fun.

First, you will need a cloudflare account, you can sign up here: https://dash.cloudflare.com/sign-up

Don’t have a domain name yet? No worries—you can snag one directly through Cloudflare Registrar. If you’ve already got a domain, perfect! You can use it here without any hassle.

Now, the steps to add a new site vary a bit depending on your domain registrar, but here’s a link to Cloudflare’s detailed documentation on how to do add a new site. The exact steps depends on who is your domain registrar. The free tier should be just fine for this project.

When your done, your dashboard should look like this:

Cloudflare Tunnel

Here is the overall idea behind cloudflare tunnel in a simple way. You download something called "cloudflared" on your server. This opens up a connection to Cloudflare servers - a "tunnel". Once the tunnel is established, Cloudflare acts as a middleman. It securely routes traffic from the internet through the tunnel to your server, down to the port number.

Here is the steps to get it.

Configure Zero Trust for your Cloudflare Account. Again, the free tier is fine for our use-case
1. Go to Networks > Tunnels from the Zero Trust dashboard after the initial setup
2. Select Create a tunnel.
3. Choose Cloudflared for the connector type and select Next.
4. Enter a name for your tunnel. This is a tunnel to your server, so make sure the name reflects that.
5. Select Save tunnel.
6. Next, you will need to install cloudflared and run it in your remote server.
7. SSH into the remote machine as described before.
8. If you are on Hetzner and used a Ubuntu server, copy and paste this command. You can find that command in the Tunnel dashboard for different type of operating systems. It will take a few mins until your tunnel is active.

    curl -L --output cloudflared.deb https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb && 

    sudo dpkg -i cloudflared.deb && 

    sudo cloudflared service install <token from Zero trust tunnel setup>

Once the command has finished running, your connector will appear in Zero Trust. Select Next to continue to the next step.
In the Public Hostnames tab, choose the Domain that you setup before. I recommend specifying a subdomain for each open-source project you are hosting. For example: screenshot-to-code.your_domain.com. That way you can use the same server and domain for 100's of projects.
Specify a service, for example, the screenshot-to-code project uses port 5173. So, it would be http://localhost:5173.
1. If you have another project on port:8001, then you just create another public hostname. new-project.your_domain.com and the service would be http://localhost:8001 - no need for a new setup or servers!
Select Save tunnel.

And that's it. Now, if you navigate to screenshot-to-code.your_domain.com, you should be able to see your application. No Nginx or SSL setup needed. Cloudflare took care of all of these for us.

We still have a problem though. Our application is still wide-open to anyone who manages to access the domain name. This what Cloudflare Access Control fixes.

Cloudflare Access Control

So, our mission is pretty clear here: We only want the right people getting into our application. Here’s how we’ll make sure of that:

When someone heads over to our app at screenshot-to-code.your-domain.com, Cloudflare steps in and greets them with a login page. All they need to do is punch in their email.

Now, if their email is on our VIP list, they’ll get a PIN number sent right to it. Pop in that PIN, and voilà, they’re in! If not, no access—simple as that.

Down the road, we can jazz things up with all sorts of fancy authentication methods—think single sign-on, tokens, even hardware solutions, complete with custom rules to fit our needs. But for now, this email and PIN setup does the trick quite nicely.

Here is steps to do that.

Go to Access > Applications from the Zero Trust dashboard
Click on Add an Application button
Click on Self-hosted option
Give your application a name. For example, screenshot-to-code and how long the access sessions are good for.
Add your domain and subdomain
Keep everything else the same and move to policies.
Give your policy a name email-rule for example. And under Configure Rules, add Selector to be email and add the emails of the users you want to have access.
Click on the Authentication tab, and set the Authentication to be One Time Pin
Keep the default Settings without any changes.
Save your Applications

And that's it. Now, if you navigate to screenshot_to_code.your-domain.com you will be able to see Cloudflare default log in page. Only the people who you gave access to will be able to log in and access the application.

For everyone else - they can't access your application.

Recipe:

The goal of this recipe is self-host an open-source AI application on the cloud in a secure manner. Specifically to restrict access based access rules and policies. We are using the screenshot-to-code as an example.

Start by getting a VPS if you don't have one already. Make sure you can access it via SSH.
Make sure Docker, docker-compose and git are installed on your VPS

SSH into the machine and setup the screenshot-to-code project

 git clone https://github.com/abi/screenshot-to-code.git 
 echo "OPENAI_API_KEY=sk-your-key" > .env
 docker-compose up -d --build

Make sure project is working with no errors by navigating to <public_ip>:5173 in your browser or docker-compose logs in your terminal
Set up a new Cloudflare Site. You will need a cloudflare account and a domain name.
Setup Zero Trust for your Cloudflare Account. The free tier is fine for our use-case. You will need to add your credit card though.
Create a cloudflare tunnel on your Zero Trust dashboard
1. Go to Networks > Tunnels from the Zero Trust dashboard after the initial setup
2. Select Create a tunnel.
3. Choose Cloudflared for the connector type and select Next.
4. Enter a name for your tunnel. This is a tunnel to your server, so make sure the name reflects that.
5. Select Save tunnel
Connect your VPS to the tunnel by installing cloudflared
1. SSH into the remote machine
2. If you are on a Ubuntu server, copy and paste this command. You can find that command in the Tunnel dashboard for different type of operating systems. It will take a few mins until your tunnel is active.
3. Once the command has finished running, your connector will appear in Zero Trust. Select Next to continue to the next step

    curl -L --output cloudflared.deb https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb && 

    sudo dpkg -i cloudflared.deb && 

    sudo cloudflared service install <token from Zero trust tunnel setup>

Setup your application traffic to be sent via the tunnel
1. In your Tunnel setup, under the Public Hostnames tab, choose a Domain that you setup before as part of setting a Cloudflare Website. Optionally, specify a subdomain for each open-source project you are hosting. For example: screenshot-to-code.your_domain.com. That way you can use the same server and domain for other projects.
2. Specify a service, for example, the screenshot-to-code project uses port 5173. So, it would be http://localhost:5173.
3. Select Save tunnel.
Lock your application behind Cloud Flare Access Control
1. Go to Access > Applications from the Zero Trust dashboard
2. Click on Add an Application button
3. Click on Self-hosted option
4. Give your application a name. For example, screenshot-to-code and how long the access sessions are good for.
5. Add your domain and subdomain
6. Keep everything else the same and move to policies.
7. Setup an access policy by specifying a name email-rule for example. And under Configure Rules, add Selector to be email and add the emails of the users you want to have access.
8. Click on the Authentication tab, and set the Authentication to be One Time Pin
9. Keep the default Settings without any changes.
10. Save your Applications

Congratulations, you have self-hosted your first open-source project with all what you need for future security concerns and scaling.

Jonathan's blog