Serious Development Environment by Using Code Server and Docker

Here is all the tools I use to build the system

As I mentioned above I’m a ML hobbyist, so I would like to have my Jupyter Notebook along with the new IDE (yes, you could use vscode to write notebook as well). So I’d like to make the whole system support both at the same time. Here is my detailed expectation:

First I need to choose how could I build the system. I could install all software into the desktop host, but this would make the environment hard to control and maintain. You have to spend lots of time to deal with conflicts in the future. And you have to expose your physical hosts to internet as well. So I came cross the virtualization solution — Docker. Although I have very few experience of docker, I thought docker would be a good solution for my isolation requirement and it has plenty of images can be chosen from (build your own is also very easy since you can based on many already built images). And the performance on linux is super awesome. So I choose to use Docker as my base system to manage what’s the functions I want to add into the whole system.

Second I want the system to be accessible under one single domain, so I’m considering using a reverse proxy which Nginx comes into picture. I’m really a fan to put everything separate and put them behind VIP or Reverse Proxy. So by nature, I put this engine in place at the very beginning. And really love it because it has so many plugins and information all over the Internet. And since it supports plugin, if you need you can write a plugin by yourself.

To explain how the system work, the easiest way is to use a diagram. Let’s simulate a request from browser to see how it go through different components of this remote development system.

graph LR; subgraph Docker-Apps D3[Code-Server]; D4[JupytorLab]; end subgraph Nginx D → D1[Nginx]; D1 → D2{isAuthorized}; D2 → |Y| D3; D2 → |Y| D4; D2 → |N| D1 end subgraph internet A[Web Browser] → C[Home Router]; C →|Port Forwarding| D[Docker]; end

In this chapter I will explain the whole setup in detail. My desktop has Ubuntu 18.04 installed. For other OS, it should be similar if not exactly the same. The reason to choose a Linux is because docker’s performance on Linux is amazing way faster than on Mac OS.

On Ubuntu, install docker is quit simple.

*Please note docker-compose doesn’t support nvidia as devices. So you for the docker container which will use gpu, you have to manually start them.

Now let’s put all necessary configuration together inside one folder, so that will be easier for us to manage all the resources that needs for different docker containers. Let’s create a folder called docker-ide under home folder (or any folder you choose).

And put following content into the newly created docker-compose.yml

For code-server the configuration is easy, since we will run it behind the nginx and nginx will take care about the authentication and ssl part. So for code-server itself we can disable the authentication and ssl. One thing I found useful is to have the /home/coder/.local and /home/coder/project mapped to your host resource. The /home/coder/.local will contain the configuration data which vscode rely on like extensions, etc. If you map them to a real folder on the host, they will be persisted and you don’t need to worry about restart your container. The /home/coder/project is the default project folder for you to store your own files and projects. It’s definitely should not be lost.

Now you can try your setup by running following command

The configuration for JupyterLab is almost identical to the coder-server. So I’ll ignore it for now, will add it later.

For nginx-sso, it’s a bit complex, it is a sso facade and you still need a authentication provider. Depends on what’s kind of provider you want to integrate with, the configuration could be different. Here, since I’ll be the only user of this environment, I’ll use the simple username and password. This would be good enough for a development host.

For Nginx, we have several things needs to be configured:

Add following to docker-compose.yml

The full configuration for nginx.conf is as follows:

And remove following ports mapping from code-server section in docker-compose.yml

Ths SSO configuration is a bit complex, you have to configure 4 paths /login, /logout, /sso-auth, 401 Error redirect. All those path configuration is inside the server section of nginx.conf.

Add SSL certification to the nginx.config under server name section

Now you should be able to test your environment by

The dynamic domain client is a way for the people don’t have a host which does have static public IP address. For example the host live inside your home network usually won’t have a static ip even on your router or modem. Use dynamic domain client can bind your domain to the latest publich IP address to the domain you own, so that you can access the domain through internet.

It tells docker to run the stack as service rather than a one time thing. Whenever the host restarted, those services will be restarted.

Have fun with your remote IDE and work anywhere Internet is available.

Related posts:

This was a fun little project I made to learn about SpriteKit and Core Motion, and I think it gives a cool visual effect. In this iOS project, we’ll use SpriteKit and Core Motion to create a node…

Machine learning has witnessed exponential growth and transformative advancements in recent years. Its applications have permeated various fields, ranging from healthcare and finance to…

In its most basic form, mining is a distributed consensus mechanism. It is a method by which many individuals from all around the world participate in the upkeep of cryptographic networks. The…