Docker front-end development environment construction

The benefits of docker as a local development environment:

 isolated environment

Different versions of node and other projects are required for each project, and it is troublesome to switch. Although it can be solved with nvm, it is better to use docker

Quick configuration environment

New computer, new system, new environment, the first thing is to configure the development environment. Download node, git, then install some npm global packages, then download vscode, configure vscode, download plugins, etc...

After using docker, you only need to pull the pre-packaged development environment image from docker hub, and you can happily develop.

docker installation

docker official website ( http://www.docker.com ) download docker desktop and install

After the installation is complete, open docker, and after it is fully started, open the console and enter:

docker -v

The version information is displayed to indicate that it is installed

Configure the development environment

Assuming that there is a project that must run on node version 8.14.0, we first go to the docker hub to pull down the node image of this version:

docker pull node:8.14.0

After the pull is complete, list the mirrors:

docker images

 

Start the container:

docker run -it --name test_container d543faf5bdd8 /bin/bash

The above command means to start a container in command line interactive mode, and specify the name of the container as test_container.

At this point, a new container has been created and entered. The container is a linux system. You can use linux commands. Let’s try to enter some commands:

You can see that this node image is pre-installed with node 8.14.0

The relationship between the mirror and the container: the mirror only pre-installs the most basic environment. For example, the above node:8.14.0 mirror can be regarded as a Linux system with node 8.14.0 pre-installed, and the container is another clone based on the mirror. A linux system can install other environments such as java, python, etc. in this system. A mirror can create multiple containers, and each container environment is isolated from each other and does not affect each other (for example, if java is installed in container A, the container B is not)

It is not convenient to use the command line to operate the project, so we first exit the command line mode and use exit to exit:

 With the help of IDE, it is more convenient to play docker. Here we choose vscode, open vscode, and install the Remote - Containers extension. This extension allows us to manage containers more conveniently:

After the installation is successful, there will be an icon in the lower left corner, click:

 

Select "Attach to Running Container" from the expanded menu:

 

At this time, an error "There are no running containers to attach to." will be reported, because we have just exited the command line interactive mode, so now the container is processing the stopped state, we can use the following command to view the running containers:

docker ps

 It is found that there is no running container in the list. We need to find the newly created container and run it. First, display the list of all containers:

# -a 可以显示所有容器，包括未运行的

docker ps -a

# 使用容器名称

docker start my_container

After running the docker ps command again, you can see the running containers. Then go back to vscode, select "Attach to Running Container" again, and a list of running containers will appear:

Select the container to enter, add a bash terminal, and you can enter the command line mode we just had:

 We install vue-cli and create a project in the /home directory:

# 安装 vue-cli

npm install -g @vue/cli


# 进入到 home 目录

cd /home


# 创建 vue 项目

vue create demo

Open the directory in vscode, and find that it is no longer the directory of the machine, but the directory in the container, find the /home/demo we just created and open:

 

Enter npm run serve, and you can develop happily:

 

Above we used the node 8.14.0 image as an example to create a development environment. If you want to use the new version of node, the same is true. You only need to pull the specified version of the node image, then use this image to create a container, and create in the container Projects or pulling projects from the git warehouse for development, so that there are two different versions of the node development environment, and can be developed at the same time.

Key point: Use ubuntu to configure the development environment [mirror quick configuration]

The above method is actually inconvenient to use, because the node image only has node and git installed, and sometimes we hope that the image can have more built-in functions (such as pre-installed npm global packages such as nrm and vue-cli, or pre-installed vscode's extensions, etc.), so that the newly created container with the image also includes these functions, and does not need to be installed once for each container.

We can use ubuntu as the base to freely configure the development environment, first obtain the ubuntu image:

# 不输入版本号，默认获取 latest 即最新版

docker pull ubuntu

Create a new container:

docker run -itd --name fed 597ce /bin/bash

The -itd here is actually the co-writing of -i -t -d, and -d is to run the container in the background, which is equivalent to starting the container together when creating a new one, so that there is no need to use the docker start command. Later, we will directly use vscode to operate the container, so there is no need to use the command line mode.

We named the container fed (meaning front end development). It is recommended that the name of the container be short and easy to type.

The ubuntu image is very pure (only 72m), and only has the most basic capabilities.

Install sudo:

apt-get install sudo

Install git:

apt-get install git

Install wget (wget is a download tool, we need to use it to download software packages, of course you can also choose axel, depending on personal preference):

apt-get install wget

In order to facilitate the management of projects and software packages, we create two folders (projects and packages) in the /home directory, projects are used to store projects, and packages are used to store software packages:

cd /home

mkdir projects

mkdir packages

Since the version of node in the ubuntu source is relatively old, download the latest version from the official website and use wget to download the node package:

# 将 node 放到 /home/packages 中

cd /home/packages


# 需要下载其它版本修改版本号即可

wget https://nodejs.org/dist/v14.18.0/node-v14.18.0-linux-x64.tar

unzip files:

tar -xvf node-v14.18.0-linux-x64.tar


# 删除安装包

rm node-v14.18.0-linux-x64.tar


# 改个名字，方便以后切换 node 版本

mv node-v14.18.0-linux-x64 node

Configure node environment variables:

# 修改 profile 文件

echo "export PATH=/home/packages/node/bin:$PATH" >> /etc/profile


# 编译 profile 文件，使其生效

source /etc/profile


# 修改 ~.bashrc，系统启动时编译 profile

echo "source /etc/profile" >> ~/.bashrc


# 之后就可以使用 node 和 npm 命令了

node -v

npm -v

Install nrm and switch to taobao source:

npm install nrm -g

nrm use taobao

Install some vscode extensions, such as eslint, vetur, etc. The extensions are installed in the container, and a configuration file will be kept in the container, and the packaged image will be packaged together. When we close the container and then open vscode, we can find that these extensions are not installed in the vscode of this machine.

So far, a simple front-end development environment has been configured, and you can add some packages according to your own preferences, such as yarn, nginx, vim, etc.

package image

Above we configured a simple development environment through ubuntu. In order to reuse this environment, we need to package it into a mirror and push it to docker hub.

Step 1 : Register an account in docker first.

Step 2 : Open the shell and log in to docker.

Step 3 : Package the container into an image.

# commit [容器名称] [镜像名称]

docker container commit fed fed

Step 4 : Tag the image, because the image is pushed to the docker hub, and the tag is used to distinguish the version, here we first set it to latest. The tag name is added with the user name as a namespace to prevent conflicts with the image on the docker hub.

docker tag fed huangzhaoping/fed:latest

Step 5 : Push the tag to docker hub.

docker push huangzhaoping/fed:latest

Step 6 : Delete all local images and containers about fed, and then pull the image just pushed from docker hub:

# 拉取

docker pull huangzhaoping/fed


# 创建容器

docker run -itd --name fed huangzhaoping/fed /bin/bash

Open the container with vscode, open the command line, and enter:

node -v

npm -v

nrm -V

git --version

Then look at the vscode extension, you can find that the extension has been installed.

If you want to switch the node version, you only need to download the specified version of node, decompress and replace /home/packages/node.

So far, the image of a docker development environment is configured, and this image can be shared in different computers and different systems to achieve the purpose of quickly configuring the development environment.

Notice

• Do not store any important files or information in the container, because these files will be gone if the container is deleted by mistake. You can use the mounted volume to map to the host host for storage