How to setup a remote development environment with code-server and nextcloud

In this tutorial we are going to setup a complete remote work environment with the ability to sync our workspace directory across multiple devices using nextcloud and code-server as web editor.

We can use this work environment if we need to use a powerful computer using a cloud server or just to keep our environment from anywhere at any time on the internet.

Prerequisites

In this tutorial you need to have the following components

• A kubernetes cluster (I recommend to use k3s.io)
• A nextcloud installation (you can install via helm within the same k8s cluster)
• A k8s storage class where you can save your files

All kubernetes manifest files are stored in this repository feel free to clone and customize

System Architecture

This is the system architecture used in this tutorial

We are going to use a kubernetes storage class to save our files and share between code-server and nc-client deployments.

Configure nextcloud sync client

In order to sync all out files across multiple devices we are going to use nextcloud as sync system, in this tutorial we used the nextcloudcmd command to sync our files using a docker container.

The docker used syncs the nextcloud remote directory every X seconds, you need to set the NC_USER, NC_PASS and NC_HOST in the k8s/conf/nextcloud-client-conf.yaml file, the NC_PASS is a secret file, so you'll need to encode as base64 (example: echo -n 'verysecretpass' | base64).

Create the Persistent Volume Claim for nextcloud client

kubectl apply -f k8s/01-pvc-nextcloud-client.yaml

Create the environment variables for the nc-client container

kubectl apply -f k8s/conf/nextcloud-client-conf.yaml

Create the nc-client deployment

kubectl apply -f k8s/conf/nextcloud-client-conf.yaml

This container will sync the files in the nextcloud server every 300 seconds

Configure vscode on the server

In this tutorial we are using the linuxserver/code-server which includes the web version of visual studio code (oss version) and is highly customizable due to s6-overlay system. This docker image allow us to extend the capabilities of the base image using docker mods.

You can setup your environment creating your own docker mod, a docker mod can bootstrap your environment and install your required packages such as kubectl, helm, awscli, etc. Here is an example of my docker mod used to bootstrap my work environment, this mod install the required packages and bootstrap the config files in the container.

If you want to setup your own docker mod I highly recommend to check the docker-mods documentation for more info.

Docker mods

In this tutorial I'm using my own docker mod, this docker mod install the required packages such as psql, awscli, python, kubectl, helm, zsh, etc. This docker mod also bootstrap the config files such a gitconfig, aws credentials, zshrc file, ssh keys, kube config file, etc. This files are mounted in the code-server pod then the bootstrap scrip will copy these files in her location with the correct owner and permissions.

We are using the linuxserver/mods:code-server-extension-arguments to install the required vscode extensions in the code-server pod. The docker mods can be set in the DOCKE_MODS variable separated by |. Check the list of official mods for code-server

apiVersion: v1
kind: ConfigMap
metadata:
  name: code-server-configmap
  namespace: prod
data:
...
  DOCKER_MODS: "linuxserver/mods:code-server-extension-arguments|ghcr.io/ivanmorenoj/lsio-mods:code-server-ws"
...

Configure code-server on k8s

Create the Persistent Volume Claim for code-server deployment

kubectl apply -f k8s/02-pvc-code-server.yaml

Configure the code-server values such the user and sudo password, the docker mods and the config files.

kubectl apply -f k8s/conf/code-server-conf.yaml

Create the code-server deployment, you can modify the resource request and limits according to your available compute resources

kubectl apply -f k8s/04-code-server.yaml

Configure the ingress

In this step we are going to setup the ingress in order to access to our code-server installation through a FQDN domain with TLS endpoint.

kubectl apply -f k8s/05-ingress.yaml

NOTE: Make sure you have pointed your domain to your k8s cluster and configured your firewall to access to your installation.

Results

When you finished the setup you'll have a remote environment with your files synchronized in a remote server with nextcloud just like this:

Now you can edit, test and build your projects in your browser from anywhere at anytime, you only need a stable internet connection and a web browser.