10 Minutes for Docker on the Front End Quick Start Guide

It's 2022, let's take some time to learn docker at the front end, and we won't be fooled

Haven't learned about docker yet? It doesn't matter, let's simulate a few scenarios, and we'll figure out what it is in two minutes and when we need it

Then we take the remaining seven or eight minutes to use docker to deploy the two projects of vue2 and vue3 at the same time, yes it is so fast!

1 What is docker

scene simulation 1: stand-alone

You are diligent and diligent in the company and quickly recognized by the leader. Today, he asked you to take over the following new projects. You need to install them on your own computer.

As you can see, there are several different versions of nodejs and mysql: ok, it's trivial for me

Scenario Simulation 2: Multi-machine

At this time, the company has 3 new front-end interns and new people. The leader wants you to install these projects for them to run on the local computer.

Due to company history and other reasons, they can only be configured with computers with different operating systems for the time being: win7, win10, OSX, etc.

Now you need to install these projects on different operating systems of several computers, see the picture

You are witty and you find that one of your heads is now bigger than two

"Installation is troublesome and time-consuming. When a newcomer is working on a project, he has to switch the matching version for different projects. It is easy to make mistakes, which also causes pollution to the host environment. It also pollutes the host environment. More projects are going to do this, and some people may already want to run away at this time.”

After the hard installation is completed, seeing how powerful you are, the leader asks you to deploy these projects on the two small servers on the company's intranet, as a public development and testing environment. Oh, these two servers are Linux. , are you ready to start how Baidu installs node and mysql in linux? And you have to install multiple versions. What if the Linux systems of the two servers are different?

Now it's your turn to carry the bucket.

3 docker appearances

Don't panic, at this time docker comes out, it can help you smooth out the differences in the application installation of different systems

Wait, so why not use a virtual machine?

Because the virtual machine starts slowly, consumes a lot of resources, and occupies a lot of resources, the migration/expansion on different systems is more complicated

But docker doesn't. It starts in seconds, takes up less resources, is fragrant, and is easy to replicate across platforms.

After writing the configuration, it installs different versions of nodej, msyql, nginx, etc. on the computer at the same time with one command, and runs independently and independently from each other. At this time, you do not need to switch back and forth manually.

Isn't the above problem solved easily? Are you interested in docker now?

2 docker basics

Now let's start to understand the basics of docker

Docker is divided into several concepts: image, container, warehouse

image: is like the system disk or system image file we need when installing the machine. Here it is responsible for creating the docker container. There are many official ready-made images: node, mysql, monogo, nginx can be downloaded from the remote warehouse

container: can be compared to a mini system, such as a Linux minimal system with only mysql5.7 installed. Of course, you can also install mysql and node in the same container if you like. Remember, container and container, container and host are isolated from each other

warehouse: The warehouse is like github, we can make an image and then push it to the cloud warehouse, or you can download the image from the warehouse pull

3 Installation

The installation of docker is very simple. Both win and osx are installed on a graphical interface. Linux also has a few lines of commands. Now the m1 chip series of mac is also supported. Here we skip the installation steps first, be fast! Watch it first!

ps: Installing mysql on the docker of the m1 chip requires a little bit of configuration

After installation, run the following code to view

docker -v

4 Actual combat: deploy vue2 and vue3 projects

After installing docker, let's go to the actual combat now, rub our hands

We want to let the computer run multiple versions of nodejs10 and nodejs12 at the same time

ps: Let's get started quickly, let's put aside the installation of different versions of mysql for the time being.

4.1 Prepare vue2 and vue3 projects

Do it together first, we will explain later

Now create a new file for our project: name it: my-repository

install vue2+webpack project

# 0 命令行进入到该文件夹的位置： 
cd /你的电脑具体的文件路径/my-repository

# 1.现在安装vue-cli
npm install -g @vue/cli

# 2.查看vue-cli安装成功否
vue --version
#我这里是@vue/cli 4.5.15

# 3. 用vue-cli快速创建项目,安装选项我们如下
# > ❯ Default ([Vue 2] babel, eslint) 
# > ❯ npm包管理
vue create my-app-vue2

install vue3+vite project

#先安装vite最新版
npm init vite@latest

# 创建vue3项目
npm init vite@latest my-app-vue3 --template vue

//vite需要开启网络访问
//vite.config.js 开启host
export default defineConfig({
  plugins: [vue()],
+  server: {
+    host: '0.0.0.0',
+  },
});

#安装完成后我们的目录是这样的
my-repository
├── my-app-vue2
│   ├── public
│   └── src
│       ├── assets
│       └── components
└── my-app-vue3
    ├── public
    └── src
        ├── assets
        └── components

4.2 Create and run docker container

# 0 先进入我们刚才安装了vue项目的文件夹位置
cd my-repository

# 1 执行pwd可以获取当前文件夹在电脑的绝对目录
pwd
# /Users/eric/my-repository

# 2 运行创建docker容器1：承载 vue2+webpack+nodejs10
docker run -it -d --name myvue2 --privileged -p 8081:8080 -v  /Users/eric/my-repository/my-app-vue2:/app/vue node:10.16.2 /bin/bash -c "cd /app/vue && node -v && npm install && npm run serve"

# 3 运行创建docker容器2：承载 vue3+vite+nodejs12
docker run -it -d --name myvue3 --privileged -p 8080:3000 -v /Users/eric/my-repository/my-app-vue3:/app/vue node:12.22.6 /bin/bash -c "cd /app/vue && node -v && npm install && npm run dev"

#运行成功后 查看容器运行情况
docker ps -a

will appear after successful operation

We can see the startup status of the container, port mapping, container name

Open the browser, we can see localhost:8080 and localhost:8081

If there is an error, see the third point below: Debug : Run the following command to check the reason

docker logs -f container_id/containe_name

What is the code of the docker run xxxxx above, let's get it right

First of all, this docker run can be used to create and run containers at the same time

Look at the new line first: when the shell script is too long, we can use "\" to divide a line of commands into multiple lines

docker run \
-it \
-d \ 
--name myvue2 \
--privileged \
-p 8081:8080 \
-v /Users/eric/my-repository/my-app-vue2:/app/vue \
node:10.16.2 \
/bin/bash -c "cd /app/vue2 && node -v && npm install && npm run serve"

Here we use the docker run command to -> create a container from the image -> start and run the container

parameter parsing :

parameter	describe
-d	Let the container run in the background as a daemon process, you may have used pm2 to daemonize the process before
-it	Here are the abbreviations for -i and -t -i: tells Docker to keep the standard input stream open to the container even if the container has no terminal attached tells Docker to assign a virtual terminal to the container
--name myvue2	named the container myvue2, so that accessing and manipulating the container, etc. does not need to enter a long list of container IDs
--privileged	Allow the container user to gain full root privileges in the container
-p 8081:8080	to map container port 8080 to port 8081 on the host computer we access to the machine localhost: 8081, 8080 is access to the container port because containers are run independently isolated from each other, container and container The respective 8080 ports, the respective 8080 ports of the container and the host are not the same thing. The host can only access the container port
-v /Users/eric/my-repository/my-app-vue2:/app/vue	the host's my-app-vue2 directory (only absolute paths can be written here on the command line) to the container's directory /app/vue, If the specified directory of the container has files/folders, Will be emptied mounting, the container modifies the content of the /app/vue directory, and also modifies the content of the host directory /Users/eric/my-repository/my-app-vue2
node:10.16.2	here is to specify nodejs, the image of version 10.16.2 to create the container If the version is not specified, the latest version of the current image will be downloaded by default
/bin/bash -c "cd /app/vue2 && node -v && npm install && npm run serve"	/bin/bash : is to let the virtual terminal assigned by the container execute the command in bash mode -c ""cd /app/vue2 && node -v && npm install && npm run serve : Only one shell command can be executed , you need multiple commands to use &&,

Schematic diagram of

After the above code runs successfully, our computer will have two docker containers running independently of each other

4.3 Debug

Commonly used debugging commands 1

# 运行后按ctrl + c 可退出
docker logs -f contianer_name/container_id

Of course, when the container is being compiled or an error occurs or even exits, we can use this command to view the information output by the terminal

🌰 : After running successfully, view the real-time output information of npm run serve of the myvue container on the terminal

#查看docker container的终端输出信息 
docker logs -f myvue2

Commonly used debugging commands 2

# 打印出容器的端口映射、目录挂载、网络等等
docker inspect myvue2

5 Common Operation Commands

There is a column of the commonly used operation command table, which needs to be favorited first

Mirror operation command:

# 搜索镜像
docker search [images_name:tag]

# 下载镜像（：指定版本）
docker pull [images_name:tag]

# 查看本地下载的镜像
docker images

# 自己构建镜像
# 根据dockerfile的路径或者url构建镜像
 docker build [OPTIONS] PATH|URL|-

# 查看镜像的构建历史
docker history [images_name]

# 删除镜像
# 需要先删除以此镜像为基础的容器
 docker rmi [images_name]

container operation command

# 查看运行中的容器
# 可以查看容器ID、基础镜像、容器名称、运行状态、端口映射等
docker ps

# 查看所有容器：包括停止的
docker ps -a

# 查看容器的信息
# 例如端口号的映射、目录挂载
docker inspect [images_name/images_id]

# 启动和停止容器
docker start/stop [container_name/container_id]

#  重启容器
#  使用场景实例：
#  在加入新的npm包依赖需要重新编译的时候使用重启运行编译
#  nginx容器的配置更新后需要重启生效
docker restart [container_name/container_id]

# 进入容器
# ps:有些容器没有bash,需要改成/bin/sh，例如mysq、mongodb的
# 退出人容器输入exit 回车键
docker exec -it [container_name/container_id] /bin/bash

# 删除容器
# 在容器停止的状态才能删
docker rm [container_name/container_id]

# 容器主机文件拷
# 将容器文件拷贝到主机
docker cp [container_id/container_name] : [文件目录] [主机目录]

# 将主机的目录拷贝到容器
docker cp [主机目录] [container_id/container_name] : [文件目录]

6 Advanced

If there is no suitable image, we usually use Dockerfile to build custom image

Did you find that the above docker run can only create and start a docker container, we can use docker-compose to start multiple containers at a time, which is often used to install multiple services on a single machine

Please update later. If you are interested, you can also see the automate the deployment of CI/CD environment. also has the use of docker-compose