Docker basics, using Docker Compose to deploy Vue projects

---

Preface

Recently, I came into contact with Docker and wrote a note to record the results of my learning. I referred to the docker official website and the tutorial from a teacher at site bDocker quick start tutorial, benefited a lot!

---

1. Docker installation and important concepts

1.Install docker

Select the appropriate version for your computer on the Docker official website to install it. Download the installation package and start it. If there is an error during startup, you can refer to the above tutorial to solve the error.
After downloading, a dolphin icon will be displayed in the lower right corner, which indicates that docker is running.

The administrator runs powershell and enters the following command to check the Docker version.

2. Important concepts

There are three very important basic concepts in Docker. If you understand these three concepts, you will understand the entire life cycle of Docker.

• Image (Image): is like a template. You can use this template to create a container service. You can create multiple containers through the image, and the project runs in the container. It can also be understood as a software installation package, which can be easily disseminated and installed. (Mirrors cannot have the same name!)
• Container: The state after software installation. Each software running environment is independent and isolated, which is called a container.
• Repository: It is a place where images are stored. Divided into public and private warehouses.

2. Docker configuration accelerated image

Because the Docker server is abroad and its image is relatively slow, we need to install a domestically fast image. Some image addresses are as follows:

Docker China official mirror https://registry.docker-cn.com
DaoCloud mirror station http://f1361db2.m.daocloud.io
HKUST Mirror Stationhttps://docker.mirrors.ustc.edu.cn< a i=6>Alibaba Cloud mirror acquisition addressNetEase Cloudhttps://hub-mirror.c.163.comTencent Cloudhttps://mirror.ccs.tencentyun.com

First, I obtained the Alibaba Cloud image address. First, enterAlibaba Cloud image acquisition address to log in. After logging in, on the left You can see your personal exclusive address by selecting the accelerated mirror in the menu.
We can add a few more domestic mirrors. If there are any that cannot be used, we will switch to a mirror that can be used to pull them.
Next, click on the Docker desktop application, click the settings icon on the homepage, find Docker Engine, add a line of code, the name is "registry-mirrors", and write the acceleration mirror address after it.

You can add multiple images, separated by commas, and click the "Apply&Start" button after adding.
Check whether the acceleration image is configured successfully. Enter the following code on the command line:
The following content appears in the command result, which is the acceleration image we added:

At this point, the docker quick image has been added successfully.

3. Docker installation software

1. Installation advantages

• It can be installed with just one command, fast and convenient
• There are a large number of mirrors that can be used directly
• There are no system compatibility issues, and Linux exclusive software will still run
• Supports the coexistence of multiple software versions
• Throw it away after use without slowing down your computer
• Different systems and hardware, as long as Docker is installed, everything else is the same, one command can handle everything

Docker official image repository There are many open source things here, and it is a very useful website.

2. Install redis

Look for redis in the official image warehouse:

Click in and you will see that it will tell you how to use this image:

Eg:docker run -d -p 6379:6379 --name redis redis:latest
docker run means docker runs a software –name xxx means to name this container -p 6379:6379 means port exposure, port 6379 is exposed in the virtual machine
-d means running in the background

Open powershell and enter the following command:

In this way, it is already running.
On the Docker homepage, click Images on the left, you can see that the redis image is running.

Switch to Containers and you can see that redis is running a container:

Click on it to see redis’ log, version number, port, etc.: a>

2. Install Wrodpress

Search wordpress in the official image. Click wordpress to see how to use this image. Because wordpress relies on the database, you need to specify a bunch of environment variables when running to tell it some parameters of the database.

There is a more convenient method-----docker-compose. Create a new txt document and copy and paste the following code into the document.

version: '3.1'

services:

  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      - wordpress:/var/www/html

  db:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:

Change the suffix of docker-compose.txt to docker-compose.yml:
Hold shift in the directory where the file is located, right-click, click "Open PowerShell Window", and run the following code :
After the operation is completed, we go to docker and take a look. The images of WordPress and mysql have been pulled down here.
In the container, you can see that it is running, and the port is 8080:
Let us enter this port to verify. If we see that it is running, it means there is no question.

You can enter the following command to view the list of installed images:

4. Docker deployment and running nginx+Vue

1.Install nginx

Query and install the nginx image in the docker official image library https://hub.docker.com/:

Enter the command docker pull nginx:

Check the mirror. If nginx appears in the mirror list, it means the installation is successful.

You can also view it in the Docker graphical interface tool:

2. Package the Vue project

Prepare a Vue project and run npm run build in the directory where the project is located to package it. After packaging, there will be "Build Complete" on the terminal and a dist directory will appear in the project directory.

3. Create the nginx folder in the root directory of the Vue project

Create the nginx folder in the project root directory, and create a new default.conf file in the folder:

The contents of the above file include: listening to port 80, defining the direction of the homepage, The built index.html file and related static resources will be placed in the /usr/share/nginx/html directory.

4. Write a Dockerfile and create an image based on the file

Dockerfile is a text file used to build an image. We only need to write the Dockerfile and run it to build the image. Create a Dockerfile in the root directory of the Vue project. DockerFile is a script consisting of a series of commands and parameters that are applied to the base image and ultimately create a new image. That is, the Vue project image will be built based on the contents of the dockerfile file.
The new image built in the Dockerfile below comes from the nginx image, and the contents of the vue project package are copied to the docker container, and the local default.conf configuration is used to replace the default in the nginx image. configuration.

Run the following command on the project root directory (-t is to name the image of the project):

// 最后面的 .  一定要记得加上    这里面的 . 代表当前路径
docker build -t 镜像名称 . 

You can then view the image through docker images/docker image ls.

5. Start the container based on the created image

docker run means docker runs a software, that is, creates a new container on the specified image. You can specify the container name through –name.
-p 4001:80 indicates port exposure. Port 4001 is exposed to port 80 of the container/port 4001 of the host is mapped to port 80 of the container.
-d Indicates running in the background
–name xxx indicates naming this container after democontainer
demonginx is the name of the image just created.

The port 4001 I wrote was based on checking the occupied status of port 80, and came up with a non-conflicting 4001. You can name it according to your own computer.

Looking at the running containers, you can see that the new container I just named democontainer is also among them:

6. Access the port number to view the Vue project

Supplement: If the container stops running and we want to access this 4001 port again later, what should we do?
Enter the Docker interface and you can see whether the container democontainer is running:

Use the command docker ps -a to view the list of all containers:

Through docker ps, you can view the running containers:

You can see that the democontainer container is not running currently, so how to run this container?
There are two methods:

• Method 1: You can go to the Docker graphical interface and click the following button to start the container. The icon should become a square.
  
  If you want to stop the container from running, click the icon again to change it to a triangle.
• Method 2: You can also enter the docker start command to start the container.

docker start 容器的id或者名字

If you want to stop the container from running, enter the following command:

docker stop 容器的id或者名字

5. Directory mounting

The content in the container will be lost when the container is restarted or destroyed. Mounting to the host/server means copying/writing the digital copy of the container to the server's disk, so that the data is persisted. It will not be lost when the container is destroyed.
After running with Docker, the project code we changed will not take effect immediately and needs to be rebuilt and run, which is very troublesome. Using directory mounting can improve operating efficiency.

• Bind mount method uses absolute path-v D:/code:/app
• volume method, only needs a name-v db-data:/app

Eg:docker run -p 9090:8080 --name test-container -v D:/code:/app -d test-nginx
-p 9090:8080 Exposes 8080 in the container to 9090 on the host machine
–name test-container Name the container test-container
-v D:/code:/app means mounting. D:/code is the absolute path of the project. Mount the code directory of this code project to the /app directory in the container
-d means running in the background
test :nginx indicates the name of the specified image.

Example: Take your own demo project as an example, use the bind mount method to mount the directory. The project directory I want to mount is: D:\Project\demo
Put this project The code directory is mounted to the /app directory in the container, and the absolute path must be used!
Enter the project directory, hold down the shift right key and open PowerShell:

Create a new container based on the demonginx image:

docker run -p 4002:80 --name test-container -v D:\Project\demo:/app -d demonginx

In this way, the command will run.
You can view the associated host directory through the following command:


You can see the test-container container you just created in the Containers module of the Docker graphical panel.

Click on the container, expand the app directory in Files, and you can see that the directories of the Vue project are all mounted.

Go to the browser and enter localhost:4002 to view the Vue project.

Let’s go to the Vue project and modify the code in App.vue to see if it will be updated immediately, because we have already mounted the code directory into the container. Open the Files of the container and you can see that the content of App.vue in the container has been modified.

This means that the directory has been mounted successfully.

6. Docker Compose

1.Introduction to Docker Compose

Official website tutorial:Docker compose official website
Compose is a tool for defining and running multi-container Docker applications. With Compose, you can use YML files to configure all the services your application requires. Then, using a single command, you can create and start all services from the YML file configuration.
Since I installed the desktop version of the graphical interface, I don’t need to install Docker compose, the desktop version comes with it.
Command line input docker compose version或者docker-compose -v can view the version information of docker compose:

2. Write docker-compose.yml script

Write the docker-compose.yml file in the project root directory, where you can perform some configurations, such as the following.

version version number
services What are the services to depend on?
ports Expose ports to containers
volumes mount The directory before the colon is the local directory, and after the colon is the container directory
environment specifies the time zone. If no time zone is specified, the default is not Beijing time. The default time of the container is not Beijing time. It can be changed by adding TZ=Asia/Shanghai. Set mirror for Beijing time
images
container_name Custom container name

3. Run the docker-compose.yml file

After you have the docker-compose.yml file, you can start it. In the directory where the docker-compose.yml file is located, right-click to open PowerShell and execute docker-compose up to start running.

After running, you can access the port number to view the project.

To run in the background, you only need to add a -d parameter docker-compose up -d
to view the running status: docker-compose ps
to stop running: docker-compose stop
Restart: docker-compose restart
Restart a single service: docker-compose restart service-name
Enter the container Command line: docker-compose exec service-name sh
View container running log: docker-compose logs [service-name]

4. Deploy front-end projects based on docker compose (更高效)

Previously, the Dockerfile was used to build the image, and then the running container was created based on the built image. This method was a bit troublesome, and the docker compose method is recommended to deploy the project.

Method 1: Use nginx configuration file and docker-compose.yml file (推荐)

Create the nginx folder in the project root directory, and create a new file default.conf in the folder.
The content of the file includes: listening to port 80, defining the direction of the homepage, and placing the built index.html file and related static resources in the /usr/share/nginx/html directory.

server {
    
    
    listen       80;
    server_name  localhost;

    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
    
    
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
    
    
        root   /usr/share/nginx/html;
    }
}

Create a new docker-compose.yml file in the root directory of the Vue project and write it as follows:

注意：volumes挂载的是目录，不是文件！映射只能映射目录！
Run the command in the project directory: docker-compose up -d

Enter localhost:4007 in the browser to access it.

Use docker ps to view the running container, where you can see the container name we defined, the image set and the exposed port number.

Note: If we do not specify a container name in docker-compose.yml, a container name will be automatically generated.

Method 2: Use dockerfile file, nginx configuration file, docker-compose.yml file

Write the nginx configuration file and Dockerfile file:


Write the Dockerfile, then the docker-compose.yml file is written like this:

The build command is specified The context path or detailed configuration object of the dockerfile to build the image.
The docker-compose.yml file above will use the Dockerfile we just wrote to build the image, start a container, and map the container's 80 port to the host's 4006 port, so that we can Access the Vue project by accessing local http://localhost:8080.
Execute the following commands to build and run the project:

// up是创建并启动容器。     --build 是每次启动容器前构建镜像
docker-compose up --build 

This will start a container on the local computer and display the Vue project at http://localhost:8080.

Press ctrl+c to exit the container.

Recommendation: Instead of using build: ./ and Dockerfile, it is recommended to use nginx configuration file and docker-compose.yml file. (As long as build is not written in the docker-compose.yml file, the Dockerfile file is useless and will not affect anything)

7. Docker common commands

docker version		查看docker版本
docker info			查看docker概要信息
docker --help		查看docker帮助文档

docker search 镜像名称    在Docker Hub上查找镜像

docker pull 镜像名称    			拉取镜像
docker images/docker image ls	查看镜像  -a 列出本地所有镜像  -q 只显示镜像ID
如果该镜像正在使用（创建了容器），那么就先删除容器再删除镜像
docker rmi -f 镜像ID			删除单个镜像
docker rmi -f					删除全部镜像

docker ps 				查看运行中的容器
docker ps -a			查看所有容器
docker ps -l			查看最后 一次运行的容器

docker run 						创建容器          -name	  为容器指定一个新名称     -d	在后台运行
docker start 容器名称/容器ID		启动指定容器
docker stop 容器名称/容器ID		关闭指定容器
docker restart 容器名称/容器ID		重启容器
docker rm 容器名称/容器ID		删除指定容器
docker exec -it 容器ID的前几个内容 /bin/bash       进入正在运行的容器
exit          退出容器
docker inspect 容器id的前几个内容   				 查看容器的IP

Eg: Enter the running container:

Exit the container:

View the IP of the container:

---

Summarize

So far, this is the Docker related content that I have recently started to learn. You are welcome to add to it~