Give front-end Docker 10 minutes really · Quick start guide
In 2022, we spend some time to learn docker
Have you never heard of Docker? That’s ok. Let’s simulate a few scenarios and figure out what it is in two minutes
Then we spent the remaining seven or eight minutes using Docker to deploy vue2 and VUe3 at the same time, that’s how fast!
1 What is a docker
Scenario Simulation 1: Single-node deployment
Your hard work in the company has won you recognition quickly. Today, he asks you to take over the following new projects. You need to install them on your computer
If you are observant, there are several different versions of NodeJS and mysql: ok, it’s a piece of cake for me
Scenario Simulation 2: Multiple servers
At this time, the company has three new front-end interns and newcomers, and the leader asks you to install these projects for them to run on the local computer
Due to company history and other reasons, they can only be equipped with different operating systems: Windows 7, Windows 10, OSX and so on
Now you need to install each of these projects on different operating systems on several computers. Look at the picture
Resourceful you find that one of your heads is now bigger than two
“Installation is troublesome and time-consuming. When new people do projects, they have to switch the matching version for different projects. It is easy to make mistakes, which also causes pollution to the host environment.
After the hard installation, the leader asked you to deploy these projects on two small servers on the Intranet of the company to do the public development and testing environment. Oh, these two servers are Linux, are you ready to start baidu how to install Node and mysql in Linux? And you still have to install multiple versions. What if the two servers run different Linux systems?
Now it’s your turn to pick up the bucket
3 docker appearance
Don’t panic, here comes Docker, which smooths out app installation differences between systems
Wait, why not use a virtual machine?
Because VMS start slowly, consume a lot of resources, and migrate and expand VMS on different systems is complicated
But docker doesn’t. It starts in seconds, consumes less resources, is not sweet, and is easy to copy across platforms
After the configuration is written, it installs different versions of NodeJ, MSYQL, nginx, etc. in a single command on the computer at the same time and runs independently of each other, there is no need for you to manually switch back and forth
The above problem is not easy to solve, now you are not interested in Docker
2 docker basis
Now let’s start to understand the basics of Docker
Docker has several concepts: image, container and repository
Image: this is the system disk or image file that we need to install. Here it is responsible for creating docker containers. There are many official ready-made images: Node, mysql, monogo, nginx can be downloaded from remote repositories
Container: can be compared to a mini system, such as a minimal Linux system that only installs mysql5.7. Of course, you can also install mysql and Node in the same container. Remember that containers are isolated from each other, and containers are isolated from hosts
Repositories: Repositories are like Github, we can make images and push them to the cloud repository, or we can pull them from the repository
3 the installation
Docker installation is very simple, WIN, OSX are graphical interface installation, Linux is also a few lines of command, now the MAC M1 chip series also support, here we first skip the installation steps, to fast! Watching the first!
Ps: Installing mysql on the M1 chip docker requires a little bit of configuration
Install and run the code below to view
docker -v
Copy the code4 Actual deployment: Deploy VUE2 and VUE3 projects
Now that docker is installed, we’re ready to go. Rub your hands
We’ll have the computer running multiple versions of NodeJs10 and Nodejs12 at the same time
Ps: Let’s start with a quick introduction. Let’s put aside the different versions of mysql installation for the moment
4.1 Preparing vuE2 and VUE3 Projects
Follow along and we’ll explain later
Now create a new file for our project: name it my-repository
Install the vue2+ Webpack project
# 0 command line to enter the location of the folder:
cd/ Your computer's specific file path /my-repository# 1. Now install vuE-CLI
npm install -g @vue/cli
# 2. Check whether vue-CLI is successfully installed
vue --version
This is @vue/cli 4.5.15
# 3. Use vuE-CLI to quickly create a project, we have the following installation options
# > ❯ Default ([Vue 2] babel, eslint)
# > ❯ NPM package management
vue create my-app-vue2
Copy the codeInstall the Vue3 + Vite project
Install the latest vite first
npm init vite@latest
Create a VUe3 project
npm init vite@latest my-app-vue3 --template vue
Copy the code// Vite requires network access
Open the host / / vite. Config. Js
export default defineConfig({
plugins: [vue()],
+ server: {
+ host: '0.0.0.0', +}});Copy the codeOur directory will look like this after installationMy - repository ├ ─ ─ my - app - vue2 │ ├ ─ ─ public │ └ ─ ─ the SRC │ ├ ─ ─ assets │ └ ─ ─ components └ ─ ─ my - app - vue3 ├ ─ ─ public └ ─ ─ the SRC ├ ─ ─ assets └ ─ ─ the componentsCopy the code4.2 Creating and running a Docker Container
Go to the folder where we just installed the Vue project
cd my-repository
# 1 Run PWD to get the absolute directory of the current folder on the computer
pwd
# /Users/eric/my-repository
Docker container 1: host vue2+webpack+nodejs10Docker runit-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"
Docker container 2: host vue3+vite+nodejs12Docker runit-d --name myvue3 -- Privileged -P 8080:3000-V /Users/ Eric /my-repository/my-app-vue3:/app/vue node:12.22.6 Docker runit-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"
Check container status after successful operation
docker ps -a
Copy the codeWill appear after a successful run
We can see the startup status of the container, the port mapping, and the container name
Open the browser, we go to localhost:8080 and localhost:8081 and you can see that
[debug](###3 debug) : Run the following command to check the cause
docker logs -f container_id/containe_name
Copy the codeDocker run XXXXX is the code of the docker run XXXXX
First of all, the Docker run can be used to create a container that simultaneously starts the run
Let’s start with line breaks: when a shell script is too long, we can use “\” to break one line of command 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"
Copy the codeHere we use the docker run command to download the image -> create the container from the image -> start the container
Parameter analysis:
| parameter | describe |
|---|---|
| -d | Have the container run in the background as a daemon, which you might have used previously with pM2 daemon |
| -it | This is the abbreviation for -i and -t – I:Tells the Docker container to keep the standard input stream open to the container, even if the container has no terminal connection Tell Docker to assign a virtual terminal to the container |
| –name myvue2 | Name the container myvue2 so that you don’t have to enter a bunch of container ids to access and manipulate containers, etc |
| –privileged | Enable users of the container to obtain full root privileges within the container |
| -p 8081:8080 | Map port 8080 of the container to port 8081 of the host So we access the local localhost:8081, which accesses port 8080 of the container Because containers operate independently and are isolated from each other, container and container port 8080, container and host port 8080 are not the same thing, the host can only access the container port by mapping the port here |
| -v /Users/eric/my-repository/my-app-vue2:/app/vue | Mount the contents of the host my-app-vue2 directory to the container directory /app/vue. If the specified directory of the container has files/folders, it will be emptied After mounting, the container changes the contents of the /app/vue directory, and also changes the contents of the host directory /Users/ Eric /my-repository/my-app-vue2 |
| Node: 10.16.2 | Here is the container created by specifying the nodeJS 10.16.2 image If the version is not specified, the latest version of the current image is downloaded by default |
| /bin/bash -c “cd /app/vue2 && node -v && npm install && npm run serve” | /bin/bash: enables the container-assigned virtual terminal to execute commands in bash mode -c “”cd /app/vue2 && node -v && npm install && npm run serve: Only one shell command can be executed. Multiple commands are required. |
Docker Run
After the above code runs successfully, our computer will have two separate Docker containers running independently of each other
4.3 debugging
Common debugging command 1
Press CTRL + C to exit after running
docker logs -f contianer_name/container_id
Copy the codeOf course, we can use this command to view the terminal output when the container is compiling or an error occurs or even exits
🌰 : Check the real-time output of the NPM run serve of the Myvue container on the terminal
Check terminal output of the Docker Container
docker logs -f myvue2
Copy the codeCommon debugging command 2
Print out container port mappings, directory mounts, networks, etc
docker inspect myvue2
Copy the code5 Common operation commands
Common operation commands are saved in the list
Mirror Operation Commands
# search mirror
docker search [images_name:tag]
# Download image (specified version)
docker pull [images_name:tag]
# View the locally downloaded image
docker images
# Build your own mirror
Build the image from the path or URL of the dockerfile
docker build [OPTIONS] PATH|URL|-
View the build history of the mirror
docker history [images_name]
# delete mirror
The container based on this image needs to be deleted first
docker rmi [images_name]
Copy the codeContainer operation command
# View the running container
You can view the container ID, base image, container name, running status, port mapping, etc
docker ps
# View all containers: including stopped ones
docker ps -a
View the container information
# For example, port number mapping, directory mount
docker inspect [images_name/images_id]
Start and stop containers
docker start/stop [container_name/container_id]
# restart container
Example usage scenario:
Use restart to run compilation when adding new NPM package dependencies that need to be recompiled
Nginx container configuration updates require a restart to take effect
docker restart [container_name/container_id]
# Enter container
# ps: some containers do not have bash and need to be changed to /bin/sh, such as mysq and mongodb
Enter the exit enter key
docker exec -it [container_name/container_id] /bin/bash
# delete container
Delete only when the container is stopped
docker rm [container_name/container_id]
# container host file copy
Copy the container file to the hostDocker cp [container_id/container_name] : [file directory] [host directory]Copy the host directory to the containerDocker cp [container_id/container_name] : [container_name]Copy the code6 advanced
If there is no suitable image, we usually use Dockerfile to build custom images
Found no, above the docker run can only create start a docker container, we can use the docker – compose to start more containers at a time, often used in stand-alone install multiple services
Docker-compose is composed for Jenkins automatic deployment. Docker-compose is composed for Jenkins automatic deployment. Docker-compose is composed for Jenkins automatic deployment
