How to create a docker container that runs angular unit tests

Docker is already a big star in the development world, if you don't know it right now, it's time to learn it.

Scenario of this article: You need a docker container that can run a specific angular version to unify the development environment of the project and run unit tests

Technical requirements: Docker is installed and some common docker commands are known.

background

Currently we need a container that can run angular and automatically run unit tests, but unfortunately there is no ready-made container in docker hub

Find a mirror

Although there is no mirror image of angular, we can find the mirror image of node. Since the node version we use for local development is 14.16.0, we also use the same version when confirming the node image.

Open the official website address , and finally found that there are several versions for us to choose from. In terms of versions, there are alpine , buster , stretch and so on. Simply put, it's a principle: novices use stretch/buster/jessie , and veterans can choose at will.

Build locally

Once the mirror phase is confirmed, the local build can begin.

The first step is to create a file locally and name it: Dockerfile , it should be noted that this file does not have any extension

Step 2: Edit this file and enter the following

 FROM node:14.16.0-stretch

The third step: start the construction. Dockerfile to the existing folder of ---f601ce602fd80d61ba27e3026254545e---, execute $ docker build . -t <imagename:version> , that is, start the mirror phase construction, and the speed depends to a certain extent on the network speed. Among them imagename:version I like it, for example, we name it here node-angular:14.16.0

Finally, we use the docker image ls command to see if the image was created successfully

custom image

Next, we use the current image to build a node environment that can execute angular unit tests.

Before continuing to work, we need to realize that an image can create multiple containers, and their relationship is like class and object. And any container can become a new image.

What we are currently doing is actually:

1. Create a new container based on the image obtained in the previous build step
2. Set the environment on this container (the official name is container, which can be understood as a small independent virtual machine) to make it meet the unit testing requirements of Angular.
3. The container that has met the unit testing requirements of Angular should be retained as an image.

When you need to perform Angular related tests in the future, you can directly use this image to create a new container.

Configure container

Start the container and enter

 $ docker run -it node-angular:14.16.0 /bin/bash

At this point, the above command line is actually on the running container, and the commands we run later will be run on this container and eventually saved.

install chrome

Receive our reference to the official tutorial to install chrome.

Execute the following commands in sequence:

 $ apt-get update
$ wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
$ apt install -y ./google-chrome*.deb;
$ export CHROME_BIN=/usr/bin/google-chrome

Update the installation source:

Download chrome:

Install chrome:

Set environment variables:

Install Angular-cli

Go ahead and install angular-cli

 $ npm install -g @angular/cli

install vim

This article also requires some simple editing of some files, so install vim too.

 $ apt-get install -y vim

test

We create an angular app and try to test it.

 $ ng new app
$ cd app

At this point, we need to edit the karma configuration file:

 $ vi karma.conf.js

will be configured with:

 browsers: ['Chrome'],

Change to:

 browsers: ['Chrome', 'ChromeHeadless', 'ChromeHeadlessCI'],
customLaunchers: {
  ChromeHeadlessCI: {
    base: 'ChromeHeadless',
    flags: ['--no-sandbox']
  }
},

Finally exit the editor and execute the following command to unit test:

 $ ng test "--no-watch" "--no-progress" "--browsers=ChromeHeadlessCI"

new image

Once the container is confirmed to be available, it is time to stop the container. Next, we create a new image based on this container.

First use the docker ps -a command to view all containers and find the container id we want

 $ docker commit <containerid> <repositroy:tag>

For example, we create a 14.16.0-0 version here:

 $ docker commit 6dab5bce9bab node-angular:14.16.0-0

Next, we can use this new image to create a new container.

 $ docker image ps
$ docker run -it node-angular:14.16.0-0 /bin/bash

Test that ng is still there, indicating that it is indeed the environment we want.

In the future, when we want to start an angula test environment on this machine, we can rely on our current one node-angular:14.16.0-0 .

docker repository

If you have a docker repository, you can also push the current image directly to the docker repository, so that other friends who also have permissions to the repository can quickly use the image. But in most cases, we achieve the purpose of pushing the warehouse through automatic construction. For example, Alibaba Cloud provides a free warehouse service for building docker images.

The best way to build in these repositories is to configure Dockerfile , that is to say: we can put some of the environment installation commands executed in this article into Dockerfile .

Next, we can find the historical commands in this article, copy these commands to Dockerfile , then upload them to the code repository, and complete the self-built construction in combination with Alibaba Cloud's construction.

Some screenshots and codes are given later in this article. The specific functions are beyond the scope of this article and will not be described too much:

Dockerfile

 FROM node:14.16.0-stretch
RUN apt-get update
RUN wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
RUN apt install -y ./google-chrome*.deb;
RUN export CHROME_BIN=/usr/bin/google-chrome
RUN apt install -y vim
RUN npm install -g @angular/cli
RUN apt-get clean

Upload to github repository

After the file is completed, specify a folder and upload it to the github repository

build automatically

Then come to Alibaba Cloud's container image service and create a new image

Add a build rule after authentication:

Click to build now:

Check out the build log:

As a result, the vignette appeared:

Due to well-known reasons (wo xiang ma jie), Alibaba Cloud's overseas machines cannot connect to Alibaba Cloud's domestic machines. . . Well, either we retry twice, or we cancel the overseas machine build in the build rules (the installation of some packages, the domestic machine may fail to build) to see.

Then it really got stuck when executing apt-get update to update the package information, but fortunately it was built automatically. As long as there is speed, then I believe in: endure calm for a while. Choose to endure.

After a long wait, finally:

After the build is complete, we can quickly get a running container with chrome installed and node version 14.16.0 on any machine just like other official images.

create container

Next, you can run the image we just created on any machine with docker installed and a smooth network according to the information of the public network address.

Since the version number specified at build time is not latest, you need to specify a specific version number when starting the container: 14.16.0

 $ docker run -it registry.cn-beijing.aliyuncs.com/mengyunzhi/node-chrome:14.16.0 /bin/bash

At this time, since the address of the image is from Alibaba Cloud, it is still very fast to pull the image.

At this point, an image that can be used for angular unit testing has been successfully built and can be shared with other small partners in the team for use.

Summarize

This article describes how to create a mirror with custom functions through official mirrors (unofficial mirrors are also available). The image is completed and pushed to the domestic Alibaba Cloud warehouse. The advantage of pushing to the Alibaba Cloud warehouse is that other members will have a better network environment when using it. The disadvantage is that it is not shared with the official docker hub. Not a good way to share.

In fact, docker is a small virtual machine mechanism. The image in docker is equivalent to the backup operating system, and the container created based on the image is the running virtual machine. So: an image can create multiple containers, just like you can install the same operating system on multiple computers based on an operating system disk. If you have used clone software of some operating systems, I believe you are no stranger to the above concepts.