How To Set Up the code-server Cloud IDE Platform on DigitalOcean Kubernetes

By | October 10, 2022
Set Up the code-server Cloud IDE Platform on DigitalOcean Kubernetes

How Can You Set Up the code-server on DigitalOcean Kubernetes?

In today’s world, the usage of Integrated Development Environment or IDE platforms is on the rise. Such cloud IDEs let different developer teams work together in a comfortable environment. This smooth collaboration opens up the vista for minimizing development errors and boosts creativity as well as production. Also, modern IDEs, because of their cloud nature, are accessible from anywhere. So, it is super convenient, and you can develop applications on the go. Plus, they enhance the strength of a cluster and the processing power of most single-board computers.

The code-server utilizes the Microsoft VS code. Thus, you can get your hands on it via your browser. The Microsoft Visual Studio Code comes equipped with many useful features like debugging, in-built Git support, customization, etc. So, no matter which device or OS you use, you can always have a homogenous development condition.

Here, you will explain how to set up the code-server cloud IDE platform on DigitalOcean Kubernetes in detail.

Prerequisites

  1. You must have a DigitalOcean Kubernetes cluster. Your connection should be set as kubectl default.
  2. Your local machine should have Helm.
  3. Your cluster must have the Nginx Ingress Controller, and Cert-Manager installed on it.
  4. You also must have a valid domain name so that you can host the code-server.

Step 1: Installing and exposing code-server

First, you have to take your DigitalOcean Kubernetes cluster and install the code-server to it. Then, you have to use the Nginx Ingress Controller and expose it to your domain. Remember that you don’t need the example Services and the Ingress you created while installing the Nginx Ingress Controller. So, you have to delete them using the commands below:

kubectl delete -f hello-kubernetes-first.yaml

kubectl delete -f hello-kubernetes-second.yaml

kubectl delete -f hello-kubernetes-ingress.yaml

Next, you have to keep the deployment configuration on the computer you’re working on. You need to create a code-server.yaml file to do that:

nano code-server.yaml

After you’ve created the file, add these lines to it:

code-server.yaml

apiVersion: v1

kind: Namespace

metadata:

name: code-server

apiVersion: networking.k8s.io/v1beta1

kind: Ingress

metadata:

name: code-server

namespace: code-server

annotations:

kubernetes.io/ingress.class: nginx

spec:

rules:

– host: code-server.your_domain

http:

paths:

– backend:

serviceName: code-server

servicePort: 80

apiVersion: v1

kind: Service

metadata:

name: code-server

namespace: code-server

spec:

ports:

– port: 80

targetPort: 8080

selector:

app: code-server

apiVersion: apps/v1

kind: Deployment

metadata:

labels:

app: code-server

name: code-server

namespace: code-server

spec:

selector:

matchLabels:

app: code-server

replicas: 1

template:

metadata:

labels:

app: code-server

spec:

containers:

– image: codercom/code-server:latest

imagePullPolicy: Always

name: code-server

env:

– name: PASSWORD

value: “your_password”

Next, you have to create the configuration in Kubernetes using this command:

kubectl create -f code-server.yaml

Here’s the output you will get:

Output

namespace/code-server created

ingress.networking.k8s.io/code-server created

service/code-server created

deployment.apps/code-server created

To check if your code-server pod is ready by using the following command:

kubectl get pods -w -n code-server

Here’s how the output will appear:

Output

NAME READY STATUS RESTARTS AGE

code-server-6c4745497c-l2n7w 0/1 ContainerCreating 0 12s

You will see the status turn into Running once your code-server has been installed successfully to your cluster.

Now, open your browser and go to your domain. In the password textbox, enter the password you defined before and click on Enter IDE. Doing so will take you directly to the editor GUI of the code-server.

Step 2: Securing the code-server deployment

Now that you’ve installed the code-server to your Kubernetes cluster and exposed it to your domain, let’s proceed further. Here, you have to secure the code-server with the help of Let’s Encrypt certificates. The Cert-Manager will generate these certificates on its own. Once you’re performing this task, you can access your code-server installation via HTTPS.

First, you have to launch the code-server.yaml file:

nano code-server.yaml

After launching the file, add these bold parts to your code-server.yaml file.

code-server.yaml

apiVersion: v1

kind: Namespace

metadata:

name: code-server

apiVersion: networking.k8s.io/v1beta1

kind: Ingress

metadata:

name: code-server

namespace: code-server

annotations:

kubernetes.io/ingress.class: nginx

cert-manager.io/cluster-issuer: letsencrypt-prod

spec:

tls:

– hosts:

– code-server.your_domain

secretName: codeserver-prod

rules:

– host: code-server.your_domain

http:

paths:

– backend:

serviceName: code-server

servicePort: 80

Here, you’re specifying that the Ingress will use letsencrypt-prod to create certificates. You are also specifying the domains to be protected under tls along with the secretName.

Now, you got to apply these changes using the below command:

kubectl apply -f code-server.yaml

Wait for some time to allow Let’s Encrypt to create your certificate. You can keep an eye on its progression by watching the output of this command:

kubectl describe certificate codeserver-prod -n code-server

After Let’s Encrypt has generated the certificate, the output will look like this:

Output

Events:

Type Reason Age From Message

—- —— —- —- ——-

Normal GeneratedKey 48s cert-manager Generated a new private key

Normal Requested 48s cert-manager Created new CertificateRequest resource “codeserver-prod-2203510748”

Normal Issued 22s cert-manager Certificate issued successfully

Go back to your browser and refresh your domain. You will find a lock icon at the beginning of the URL in your browser’s URL bar. It signifies that the connection to your domain is now secure.

Step 3: Exploring the code-server interface

Once you have a secure connection, it is time for you to check out the features of the code-server interface. Just to let you know, the code-server utilizes the VS code. So, as a result, its UI looks pretty similar to the freestanding PC version.

Now, in the Integrated Development Environment (IDE), you will find the Activity Bar. The Activity Bar contains six buttons. You are free to customize this bar in various ways. The first view allows you to control your file and folders, be it creating, removing, or even changing their names. The second view offers you a search feature. Another view lets you view the version control systems, for instance, Git.

The bar also has a debugger option that you can use for performing any debugging-related task in the panel. In case you didn’t know, the VS code supports Node.js or languages transpirable to JavaScript by default. Apart from these, you have to get the required extensions for any other language. The last one among these views lets you go through all the extensions obtainable from the marketplace.

At the center of your user interface, you can find the editor that you can use for editing codes. There are two view modes for the editor – the list view and the side-by-side view.

You can create a new file from the File menu. And, once it is created, you can view its name in the Explorer panel. Right-click on the Explorer panel and then click on New Folder to create a folder. You can also relocate these files and folders upon your wish.

Clicking on Terminal and then New Terminal will let you use a terminal. Or, you can use the keyboard shortcut: CTRL+SHIFT+\.

Now, you’ve gone through the code-server UI and familiarize yourself with some of its most fundamental features.

Conclusion

After reading this article, you must have learned to set up the code-server cloud IDE platform on DigitalOcean Kubernetes. Now, it is time for you to put your knowledge to the test. Provided that you’ve followed all the steps mentioned here properly, you shouldn’t have any problem setting up the code-server. Good luck!

Leave a Reply

Your email address will not be published.