Docker for frontend developers

Photo by Philippe Oursel on Unsplash

When a new developer comes in, he is faced with the task of launching a development environment. And until recently, it often became like dancing with a tambourine. Install 10 different packages of certain versions, and it turns out that your own pet-project requires different versions, or it may even be another project within the same work. Each time the specialist got out of this situation in his own way, but the main problem, in addition to the time spent on this configuration, remained that the performance from developer to developer or runner was not guaranteed.

Fortunately - this problem is solved in the modern world of development, if not completely, then to a greater extent. Docker came to our rescue.

This article is made for FrontEnd developers who are not familiar with Docker. We will analyze some issues related to optimizing traffic for launch and touch on some security issues.

Installing Docker

Docker installation is quite simple and is best described in the official documentation.

We also need docker-compose for work, for example, for MacOS, when installing Docker Desktop, it will also be installed automatically, but on linux systems it will have to be installed separately.

What's Included in Docker Desktop

Docker is developed as a modular architecture, so when you install Docker Desktop, you get several programs at once.

Docker Engine

The Docker Engine includes container building tools, a container registry, orchestration tools, a runtime, and more. It is an open source project written in Go. It runs as a daemon that provides a RESTful API for executing commands.

Docker CLI client

Console client for Docker Engine API.

Docker Compose

A tool for describing and running multi-container applications. An extremely useful thing in development.

docker and docker-compose support the - help flag for root and for commands:

docker --help
docker ps --help
docker-compose --help
docker-compose up --help

Docker dictionary for frontend developers

Now some loose analogies for front-end developers to show that this tool has a lot in common with things we are familiar with as front-end developers, such as Node.js and NPM.
Docker Image
We can publish it somewhere, for example, in DockerHub. We can also publish an NPM package.
Dockerfile
Recipe for collecting an image. We don't have recipes, but we do have a package/application manifest - package.json.
docker build
Building a docker image. Well, we are building our application in the frontend - npm run build.

DockerHub

Not to be confused with another popular hub. This is the docker image registry. We have our own registry - NPM Registry.
docker run
Console command that starts the container. The closest analogue from the frontend world is the npm start command.

Simple Example

Code for example here.

We use the usual template for the react project - create-react-app.

I add 4 new files. They are Dockerfile, docker-compose.dev.yml, docker-compose.yml, nginx.conf.

development mode

docker-compose.dev.yml - This file is enough for development.
1 step: We declare the 'web' service. Select the image that will build: node:16.10-alpine3.11 It's best to detail the versions used, it's worth keeping them exactly the same as the production build build.

2 step: We select the ports that will reflect the ports from the running container in our host system.

3 step: We mount everything from the current directory to the container. This is necessary so that local changes immediately call rebuild

4 step: 'environment' allows you to set environment variables that are of interest in your particular case.

5 step: 'working_dir' specifies the working directory within the container against which subsequent commands will be executed.

6 step: Install dependencies and start development.

Start development with the command:

docker-compose -f docker-compose.dev.yml up

Production mode

What is different in docker-compose.yml configuration from develop version?

— Specified build from Dockerfile instead of using image

— NODE_ENV environment variable changed: development-> production

— There is no command section because the static will be served by nginx.

The nginx configuration is as simple as possible and does not burden the process of serving files and fallback to /index.html in case they try to get some file that is not there. The most interesting thing lies in the Dockerfile: multi-stage building, which is used to reduce the resulting artifact.

Dockerfile

The first stage is build

1 line. To do this, we specify the same source image that was used for develop FROM node: 16.10-alpine3.11 AS build Important! We give the stage the name build so that in the following stages it will be called by its name, and not by its index, which can change if we include additional stages.

2 line. Specify the working directory /app

3-5 lines. Here we speak in more detail:
Question: why do we first copy only package.json and install it?
The answer (does not keep itself waiting long): the first time you run the difference will not be noticeable, but the difference will be obvious from the next build attempt.

If there were no changes in “package.json”, then the layers over which docker builds will not change, and these steps will simply be taken from the cache. This will greatly speed up the process and reduce the network load by several times. We just need this.

6 line. Copy the remaining files and run build.

The second stage is the formation of an artifact.
At its core, an artifact in our case is an nginx container with statics.
8 line. We specify the nginx image which we will take as a basis.
9 line. We copy the files from the first stage to the folder from which we will distribute the statics.
10 line. Copy the nginx configuration file to the artifact

You can run the artifact like this:

 docker-compose up

Conclusion

Undoubtedly, the topic of containerization is very extensive and we have only covered a tiny part, but we have covered the necessary base to start. I will be glad if this article becomes a starting point for FE development in Docker.