Exercise 3.md

Exercise 2: Create a Docker app with Visual Studio Code

In this exercise, you learn how to:

• Create a Docker container.
• Build a container image.
• Start an app container.

Prerequisites

You will need to complete the following steps to continue:

Install the Docker VS Code Extension

https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

Note: After installation you will be prompted with a getting started wizard. Just click Mark Done at the bottom.

Create a free account on Docker Hub

https://hub.docker.com/signup

The tutorial works with Windows 10 or later and Docker Desktop configured to use Linux containers.

Create a container

A container is a process on your computer. It's isolated from all other processes on the host computer. That isolation uses kernel namespaces and control groups.

A container uses an isolated filesystem. This custom filesystem is provided by a container image. The image contains everything needed to run an application, such as all dependencies, configuration, scripts, and binaries. The image also contains other configuration for the container, such as environment variables, a default command to run, and other metadata.

After you install the Docker extension for VS Code, you can work with containers in VS Code. In addition to context menus in the Docker pane, you can select Terminal > New Terminal to open a command-line window. You can also run commands in a Bash window. Unless specified, any command labeled as Bash can run in a Bash window or the VS Code terminal.

1. In VS Code, select Terminal > New Terminal.

2. In the terminal window or a Bash window, run this command.

   docker run -d -p 80:80 docker/getting-started

   This command contains the following parameters:

   • -d Run the container in detached mode, in the background.
   • -p 80:80 Map port 80 of the host to port 80 in the container.
   • docker/getting-started Specifies the image to use.

   [!TIP] You can combine single character flags to shorten the full command. As an example, the command above could be written as:

   docker run -dp 80:80 docker/getting-started

3. In VS Code, select the Docker icon on the left to view the Docker extension.

   

   The Docker VS Code Extension shows you the containers running on your computer. You can access container logs and manage container lifecycle, such as stop and remove.

   The container name, modest_shockley in this example, is randomly created. Yours will have a different name.

4. Right-click on docker/getting-started to open a context menu. Select Open in Browser.

   Instead, open a browser and enter:

   You'll see a page, hosted locally, about DockerLabs.

5. In VS Code, on the Individual Containers section, right-click on docker/getting-started to open a context menu. Select Remove to remove this container.

   To remove a container by using the command line, run this command to get its container ID:

   docker ps

   Then stop and remove the container:

   docker stop <container-id>
   docker rm <container-id>

6. Refresh your browser. The Getting Started page you saw a moment ago is gone.

Build a container image for the app

This tutorial uses a simple Todo application.

The app allows you to create work items and to mark them as completed or delete them.

In order to build the application, create a Dockerfile. A Dockerfile is a text-based script of instructions that is used to create a container image.

1. Go to the Docker Getting Started Tutorial repo, and then select Code > Download ZIP. Extract the contents to a local folder such as your desktop.

   https://github.com/docker/getting-started
   

   

2. In VS Code, select File > Open Folder. Navigate to the app folder in the extracted project and open that folder. You should see a file called package.json and two folders called src and spec.

   

3. Create a file named Dockerfile in the same folder as the file package.json with the following contents.

   To create a new file put your mouse over the App tool bar and click the new file icon.

   

   FROM node:20-alpine
   RUN apk add --no-cache python3 g++ make
   WORKDIR /app
   COPY . .
   RUN yarn install --production
   CMD ["node", "/app/src/index.js"]

NOTE

Be sure that the file has no file extension like .txt.

1. In the file explorer, on the left in VS Code, right-click the Dockerfile and then select Build Image. Enter getting-started as the tag for the image in the text entry box.

   The tag is a friendly name for the image.

   To create a container image from the command line, use the following command.

   docker build -t getting-started .

   NOTE

   In an external Bash window, you would go to the app folder that has the Dockerfile to run this command.

You've used the Dockerfile to build a new container image. You might have noticed that many "layers" were downloaded. The Dockerfile starts from the node:20-alpine image. Unless that image was on your computer already, that image needed to be downloaded.

After the image was downloaded, the Dockerfile copies your application and uses yarn to install your application's dependencies. The CMD value in the Dockerfile specifies the default command to run when starting a container from this image.

The . at the end of the docker build command tells that Docker should look for the Dockerfile in the current directory.

Start your app container

Now that you have an image, you can run the application.

1. Create a new Terminal in VS Code.

2. To start your container, use the following command.

   docker run -dp 3000:3000 getting-started

   The -d parameter indicates that you're running the container in detached mode, in the background. The -p value creates a mapping between the host port 3000 and the container port 3000. Without the port mapping, you wouldn't be able to access the application.

3. After a few seconds, in VS Code, in the Docker area, under CONTAINERS, right-click getting-started and select Open in Browser. You can instead open your web browser to:

   http://localhost:3000
   

   You should see the app running.

   

4. Add an item or two to test if it works as you expect. You can mark items as complete and remove items. Your frontend is successfully storing items in the backend.

Next steps

You've completed this exercise and you have a running todo list manager with a few items. You've learned to create container images and run a containerized app.

Keep everything that you've done so far to continue to the next exercise.