Introduction:

Hello Coders, in this article we shall explore steps that will help us to connect VS code with docker containers. Therefore, you can expect this article is an continuation of the previous article. Where we have seen the process of deployment of ubuntu container. You can get the article here.

In order to get the rich features of visual studio code while developing a project inside docker container, we need this connection.

Hence, knowing the steps are important as the steps are quite sophisticated in nature.

For shake of continuity, I shall keep this article small.

Prerequisites for connecting VS code with containers :

As I said, this article is a continuation of the previous article. Therefore, I shall assumed that we have our docker containers contigured.

The image below is network map which shows flow of data packets inside my home lab!

 

The above image says the following:

1. PC with Ubuntu: holds all the docker images and containers. Its IP address is 192.168.1.201. It communicates with Ubuntu2024 container using port 52000. Which you have seen in the previous article. It has AMD Ryzen 3. Therefore, its  completely a different isolated system.
2. Other Containers: need not to be considered in this article. Therefore, skip it for now!
3. Port 22 of PC helps us to ssh with laptop.
4. Raspberry Pi 4 is also not used in this article. Therefore, skips this as well.
5. Router is the central node.Hence, it handles all the traffic. Its IP address is 192.168.1.1.

Our target is that we shall try to run a python code inside the  Ubuntu container from a latop using Visual Studio code. Hence, we can think this as a two layers deep connection.

Compulsory Operations :

Now this is all about the setup.  Lets say we have switched on all the machines and the containers.Here are the few things that we have to be carefull:

1. We have to start the Ubuntu2024 container. Therefore use the below command to start it.

      docker start ubuntu2024

2. Get into the docker container and create a folder named remoteCodes.

The folder user1 will only be there if we have created a user user1 inside the docker container.

docker exec -it ubuntu2024 /bin/bash
mkdir /home/user1/remoteCodes

3. By default ssh would be inactive.Therefore, we have to start it. Without ssh we cannot get into container using IP. Execute the below command.

  /etc/init.d/ssh start

4. To test the ssh connection, ssh from the PC to docker container. User1 and the password was configured in the previous article. Use the command below:

ssh -X user1@172.17.0.2

Once the above command is successfull. Therefore, we can be assured that connection between host PC and docker container is smooth.

Now its time to configure the Host PC(192.168.1.201)

5. As the host machine is directly connected to the ethernet. Hence, we need to configure firewall. Hence, we have to use  UFW package.

ufw enable;ufw disable;

Therefore, UFW will allow us to freely pass the data packets from the laptop to Host machine.

6. Now its time to test the ssh connection from the laptop to ubuntu2024 contianer directly. Therefore, use the below command.

ssh -X user1@192.168.1.201 -p 52000

As port 22 of host and port 52000 are mapped. Hence, we can achieve the ssh connection from the laptop to docker container.

Visual Studio Code Setting:

Now the stage is ready for Visual studio code of laptop access the docker. In VS Code, install Remote SSH extensions. Refer to the image below!

In other words, it will help us to get the  ssh connection. Therefore, we can develop the code remotely.

As we have installed the above two extension. Hence we can get “connect to remote development”. As shown in the picture below.

Go to “Connect to Host” –> “Add new ssh host” –> in the text box: type the ip of the PC and port 52000.

Select the location of configuration file and press enter.

Again go to ‘connect to’. Now this time select ‘Connect current window to host’. Press enter.

You will be asked to enter the user1@192.168.1.201. As shown in the picture below:

Enter the password:

The picture below shows the established remote connection:

Click on the open:

Here you can see the ‘RemoteCodes’ fodler that we have created inside the ubuntu2024 container in step 2 of Compulsory operations.

Here is the screenshot of Visual Studio code at laptop end and python code at docker container end!

 

Conclusion VS code with containers:

Connecting VS code with containers not only helps us to write Python code but also give us freedom to use all the rich features of the editor. Therefore, knowing the settings of Visual Studio will enable us to develop containerised code directly.