Docker Container + VS Code
The Docker Container helps the programmers to share the containerized application and microservices. Docker can save us time to deal with issues of hardware compatibility, application setup, and developer environment. It’s a simple idea as, “All in one Virtual Machine!” or “One VM rules all.” Well, Docker has a similar idea like Java but usage is in a different field. Docker calls its VM as a container. Docker offers service to deal with the OS kernel, and we, the developers, are dealing with its container.
— ==>> ____M_E_N_U____ << == —
🐳1. Install Docker Desktop
🏓2. Get Visual Studio Code
🍛3. Docker WSL-2 Backend
🔬4. Container Sample: Node JS
🐳1. Install Docker Desktop
Please install the Docker Desktop for Windows.
Install it and restart the Windows.
Next, you can open the Docker Desktop.
1st. step, it asks you to clone its git repository.
2nd. step, build.
3rd, run the tutorial.
4th. step, Sign up and share the image of your application. Sign in, you’ll see the first image: docker-tutorial.
🏓2. Get Visual Studio Code
In Windows, you need to Visual Studio Code to remote control the WSL2. And the docker needs this function, too. Please go to Microsoft site to install the VS Code.
Up to this point, you shall have installed the WSL2, Ubuntu, and the Virtual Server. If not, please read my story about Install Ubuntu on Windows 10 Pro.
Next, you need WSL2 extension to link VS Code to WSL.
Install this extension after you start the code.
In Ubuntu terminal,
$ code .Installing VS Code Server for x64 (cd9ea6488829f560dc949a8b2fb789f3cdc05f5d)
Downloading: 100%
Unpacking: 100%
Unpacked 2379 files and folders to /home/homanadmin/.vscode-server/bin/cd9ea6488829f560dc949a8b2fb789f3cdc05f5d.
In VS Code, press F1, enter “Remote-WSL: New Window”.
Open Ubuntu Home Folder,
Now, you can add code to Ubuntu.
🍛3. Docker WSL-2 Backend
Switch to Docker Desktop, click setting to check WSL-2 support.
Open a Powershell, let’s test Docker with “docker ps”.
The Docker is running at port 80. If you have some server like Nginx with port 80, you will have an issue to activate the server.
You need to decide which program runs on that port.
🔬4. Container Sample: Node JS
Let’s continue to VS Code. We’ll install the Docker extension.
Click install and reload VS Code.
Next, please install Container Extension.
Or on the bottom left-hand corner of VS Code, you can check the installation of the extension.
You’ll found some useful recommendations. Now, click Install and Reload. T
Practice to close the WSL connection.
If you see the green section on the left-hand corner, such as “WSL: Ubuntu-20.04”; double-click the green tap to bring up the CLI; click “Close Remote Connection” to shut off the link.
Remote-Container: Try a sample
After you close WSL, let’s try a sample. Press F1,
Click Try a Sample… We can try on Node JS.
When the installation is finished, the VS Code will show the DEV Container on the explorer.
Now, Ctrl+Shift+` to open a new terminal.
$ node --version
v12.18.1
$ npm --version
6.14.5Test on Node JS Web Server
Press F5,
You can try on the browser for localhost:3000 (0.0.0.0 = localhost)
Now, let’s close this connection; as same as you closed the WSL connection: click the green tab and close.
Easy, right?
There’re a dozen other samples you can try.
Summary
Docker Container is a nice playground for developers. You don’t need to install anything. Just find some combination you like or you can combine your image by yourself. You can start to write some code on the container as soon as you have a connection.
