Getting Started with Docker with VS Code

Target

Docker installed Use Docker for the first time.

Premise

Command line available VS Code installed

About this article

In the general Docker learning flow, while learning the docker command, we will understand the concept of images and containers, and then proceed to docker-compose.

In this article, I will omit the explanation of concepts such as images and containers, and substitute commands with vscode extensions. By doing so, you will learn the docker-compose command at a minimum and move it quickly to understand Docker practically.

Goal of this article

You can now use some docker-compose commands. You will be able to create an execution environment for nodejs.

VS Code environment construction

Install this in advance.

Create a nodejs environment

First, create a folder called nodejssample in a suitable location. This name is appropriate.

Then, create a file called docker-compose.yml directly under that folder as shown below.

docker-compose.yml

version: "3"
services:
    node: 
        image: node:14.10
        volumes: 
            - .:/project
        tty: true
        working_dir: /project
        command: bash

This content will be explained later.

And create app.js in the same hierarchy

app.js

const main = () => {
    console.log("hello node!");
}

main();

OK if this happens

Then check the current state of Docker once.

If you select the Docker mark from the left side of VS Code, you will see the screen below.

This screen may not appear if Docker is not running or if you have already run Docker for some reason.

After confirming, transfer the command as follows at the location of docker-compose.yml on the command line.

Command to start virtual environment

docker-compose up -d

Then the download will start and the screen will look like the one below.

nodejssample $ docker-compose up -d
Creating network "nodejssample_default" with the default driver
4f250268ed6a: Pull complete1b49aa113642: Pull complete
c159512f4cc2: Pull complete8439168fd8dc: Pull complete55abbc6cc158: Pull completee5c5821cd889: Pull complete5a7679f70bad: Pull completed827e86d1182: Pull complete2484b06a6da1: Pull complete
Digest: sha256:21658666c0eabc9006b279e826e540d20e2c835507347d9c2f3f7dd5820ec9e3
Status: Downloaded newer image for node:14.10
Creating nodejssample_node_1 ... done

And the screen of the Docker tab is as follows. A virtual environment created with Docker is called a container. The image is for making a container.

Now that the virtual environment has started, let's run nodejs in that virtual environment.

Right-click on the target container> press Attack Shell. Then, the following screen will appear.

This is the state inside the container.

root@df80b994d93d:/project# ls
app.js  docker-compose.yml
root@df80b994d93d:/project#   

The same file as the VS Code project is displayed inside the ls command. And since this is a container of nodejs environment, check if nodejs can be used.

root@df80b994d93d:/project# node -v
v14.10.1

OK if this comes out

Execute the prepared app.js.

root@df80b994d93d:/project# node app.js
hello node!

I was able to execute it.

Erase the virtual environment.

The virtual environment is heavy if left unattended, so delete it when you are done.

Erase the image.

For images, this makes docker-compose up -d faster, so if you use it often, you can leave it.

If you don't use it for a while, turn it off.

Now you can build the virtual environment, execute the program in the virtual environment, and delete the virtual environment.

Commentary

About docker-compose.yml

The basic syntax of docker-compose is as follows

docker-compose syntax

version:Version number.
services:
Service name:
Service settings...

The latest version is 3 You can name the service yourself. Anything is OK.

docker-compose.yml

version: "3" #The latest version is 3
services: #This is fixed
    node: #Anything is fine, but since I am using the image of node, I just used the service name node.
        image: node:14.10
        volumes: 
            - .:/project
        tty: true
        working_dir: /project
        command: bash

There are many service settings, but it's best to read the official documentation for more information.

Reference

I will explain the setting items used this time one by one.

image Described the image for making a container.

.yml

image:Image name:Tag name

Tag name can be regarded as a version

There are various images used by Docker on a site called Docker Hub. node image

This is the tag used in this article

volumes Link the local folder with the container folder.

.yml

        volumes: 
            -Local folder path:Container folder path

If you do not set this, you will not be able to see locally placed files such as app.js from the container.

tty

tty: true

Prevents the container from stopping immediately after performing the process specified by command. Required when entering a container with Attach Shell.

working_dir That's still the place to run the command. When you perform Attach Shell, it will also be in the folder specified here.

command Process to be executed when the container is started. This time I specified bash, so it feels like opening the terminal and waiting.

There are various other settings, so if you see another Docker article and find something you don't know, you should read the reference.

About docker-compose up -d

Reference

A command to read docker-compose.yml, download an image if necessary and create a container.

-d is an option to start in the background.