jtw

jtw

Remote Dev Env with Cloudflare Access

Because I didn't get early access to Github Codespaces

  1. Background
  2. Configuring Cloudflare
  3. Installing and Configuring cloudflared
  4. Installing and Configuring code-server
  5. What's Next?

    Background

I have 3 computers at home: a linux home server, a macbook, and a windows desktop. I wanted to have a consistent development experience all the time - even outside my home - so I decided to give Cloudflare Access a try.

Access is a VPN alternative that allows you to secure web and SSH connections using Cloudflare's network. It is also free for teams of less than 50 users!

I typically use VS Code for my editor, so code-server seemed like the perfect solution. It is a web app version of VS Code that runs on your remote server.

Some of you may be aware that the regular VS Code application has a feature that allows you to connect to a remote server via SSH. I opted for Cloudflare Access w/code-server because it means I can use any internet connected device without needing to install any software. I could edit my code from a local library's computer, or from my iPhone. Will I do those things? Probably not, but I like having the option.


Configuring Cloudflare

The first step to setting this up is purchasing a domain. It does not matter where you buy it, but you may want to check Cloudflare's TLD support if you intend on using them as your registrar in the future.

Once you have a domain, you will need to create a Cloudflare account and add a website. They have step by step instructions on their website to make this process easy.

Now that you have a domain and have configured it as a site in Cloudflare, we can start the fun part! The following instructions are to setup the SSH app.

  1. Navigate to your Cloudflare Teams dashboard
  2. Select the Access -> Applications link from the menu on the left hand side Screen Shot 2021-07-28 at 12.23.07 PM.png
  3. Click the Add an Application button on the top right
  4. In the Select Type section, choose Self-hosted
  5. In the Configure app section:
    1. select a name and domain/subdomain for your app. Screen Shot 2021-07-28 at 12.28.11 PM.png
    2. Add a custom logo if you want! Screen Shot 2021-07-28 at 12.29.23 PM.png
    3. Select your Identity provider - for this example I will be using One-time PIN Screen Shot 2021-07-28 at 12.30.28 PM.png
  6. In the Add rules section, you will be selecting who can access the application. Cloudflare Teams allows you to create user groups, and permit access from specific email addresses, email domains, IP addresses etc. My example below demonstrates both user group and individual email access rules. Screen Shot 2021-07-28 at 12.31.55 PM.png
  7. In the Setup section, there is a cloudflared settings subsection. Here, you should set Browser Rendering to SSH. Screen Shot 2021-07-28 at 12.42.13 PM.png
  8. Click the add application in the top right to save the app.

That's it for SSH! You should now see your application in the applications list Screen Shot 2021-07-28 at 12.45.54 PM.png

You should now repeat this process for code-server, but you can skip step 7 as the code-server application does not require browser based SSH rendering.


Installing and Configuring cloudflared

  1. Download the latest cloudflared binary to your instance.
    • Cloudflare's downloads page can be found here along with platform specific installation instructions
  2. Authenticate cloudflared by running cloudflared tunnel login and opening the generated link in a browser. Select the domain you used to setup Cloudflare Teams applications in the previous section, then click Authorize on the popup window. This will generate some files you require later and save them to ~/.cloudflared
    • Note: you can open this link on any device logged into Cloudflare, it does not have to be the device running cloudflared Screen Shot 2021-09-08 at 12.57.56 PM.png
  3. Create a new Cloudflare Tunnel with the command cloudflared tunnel create <tunnel-name>
  4. Check that the tunnel was created successfully with cloudflared tunnel list Screen Shot 2021-09-08 at 1.02.04 PM.png (I might be the only person in the world using the Red Sands theme on the MacOS Terminal, but I like what I like!)
  5. Add a route with cloudflared tunnel route dns <tunnel> <hostname> for each of your applications. Screen Shot 2021-09-08 at 1.10.48 PM.png
  6. Ensure that the dns record shows up on the Cloudflare Website's management console Screen Shot 2021-09-08 at 1.12.17 PM.png
  7. Create config file
    • You should create a config.yml file in the ~/.cloudflared directory
    • The contents of the config file should be similar to:
tunnel: sample-tunnel
credentials-file: /root/.cloudflared/149f81f7-ef3d-4692-8234-c4d72d10815b.json

ingress:
  - hostname: sample-ssh.jonw.xyz
    service: ssh://localhost:22
  - hostname: sample-vs-code-server.jonw.xyz
    service: http://localhost:8080
  - service: http_status:404
  • The file name for your credentials-file is the UUID of your tunnel, which can be found with the cloudflared tunnel list command
  • Validate your credentials file with cloudflared tunnel ingress validate to ensure your YAML file meets all requirements

FINALLY - Deploy your tunnel by running cloudflared tunnel run <tunnel-name>

Thats it! You should now be able to access your SSH terminal from the web as long as the cloudflared tunnel run <tunnel-name> process is alive. You may wish to run it as a service to ensure it is always up.

Your Cloudflare Teams App Launcher page should be accessible at <your cloudflare account name>.cloudflareaccess.com. It will prompt you to login. After logging in, you should see a screen similar to this one Screen Shot 2021-09-08 at 1.40.17 PM.png

Selecting your SSH application will then prompt you to login with the remote machines credentials (username & pwd/private key)

Screen Shot 2021-09-08 at 1.39.07 PM.png

If you encounter any issues at this stage, it is likely the SSH server is disabled or improperly configured on the remote machine.

Once logged in, you should be presented with a browser based terminal for your remote machine! Screen Shot 2021-09-08 at 1.46.17 PM.png

If you ever wish to delete your tunnel, you can do so by running cloudflared tunnel delete <tunnel-name>.


Installing and Configuring code-server

The code-server project can be found here. Typically, code-server requires some extensive configuration in order to access it remotely.

However, we are able to skip all of this because Cloudflare Access is managing our access. We do not need to open any ports to the internet, or even generate a certificate.

  1. Download and install code-server using the appropriate method shown in their documentation.
  2. Run code-server

Thats it! Because we already have our ingress rules configured to route traffic to http://localhost:8080, Cloudflare will route traffic for us and allow us to use our VS Code like environment in the browser.

Return to your Cloudflare Access Application Launcher, and select the Sample Code Server application to start using it remotely!


What's Next?

Now that you can ssh and edit code on your dev machine from anywhere, you may want to create a route/application in Cloudflare Access for testing.

For example, you could create a testing.<domain>.com application like we did in the Configuring Cloudflare section. Then, create a new route and add it to the ingress section of config.yml following the instructions in the Installing and Configuring cloudflared section.

This would allow you to spin up test servers on whatever port is specified in the config.yml, and then access them from testing.<domain>.com remotely!

From there you can really do anything you want! Create a game server management app, and then add your friends to a Cloudflare Teams group to give them access. It's really up to you.

PS. If you have any suggestions, critiques, or additions let me know in the comments and I will try to update this blog!

 
Share this