Docker基础、利用Docker Compose部署Vue项目

5,802 阅读15分钟

前言

最近,接触了Docker,写一个笔记记录一下学习的成果。参考了docker官网和一个b站老师的讲解教程Docker快速上手教程,受益良多!


一、Docker安装和重要概念

1.安装docker

在Docker官网选择自己电脑合适的版本进行安装,我安装的是Windows的桌面Docker应用,这个有图形界面,对初学者来说会更友好一点。安装地址在这里:docs.docker.com/get-docker/ 图片1.png 下载好就是在右下角会显示一个海豚图标,这说明docker正在运行。 图片13.png

管理员运行powershell,输入如下命令可以查看Docker版本。

图片14.png

2.重要概念

Docker 中有非常重要的三个基本概念,理解了这三个概念,就理解了 Docker 的整个生命周期。

  • 镜像(Image): 可以看作一个模板,可以基于这个模板创建容器服务,通过镜像可以创建多个容器,项目运行就是在容器中的。也可以理解为软件安装包,可以方便地进行传播和安装。(镜像不可以重名!)
  • 容器(Container): 软件安装后的状态,每个软件运行环境都是独立的、隔离的,称之为容器。
  • 仓库(Repository):是存放镜像的地方。分为公有和私有仓库。

二、Docker配置加速镜像

因为Docker的服务器在国外,它的镜像比较慢,我们需要安装国内快速的镜像,一些镜像地址如下:

Docker 中国官方镜像 registry.docker-cn.com

DaoCloud 镜像站 f1361db2.m.daocloud.io

科大镜像站docker.mirrors.ustc.edu.cn

阿里云镜像获取地址 cr.console.aliyun.com/cn-hangzhou…

网易云hub-mirror.c.163.com

腾讯云mirror.ccs.tencentyun.com

首先,我获取了阿里云的镜像地址,先进入阿里云镜像获取地址进行登录,登录以后,在左侧菜单选中加速镜像器就可以看到个人的专属地址了。

图片15.png

我们可以多添加几个国内的镜像,如果有不能使用的,会切换到能使用的镜像来拉取。 接下来,点击Docker桌面应用,首页点击设置图标,找到Docker Engine,添加一行代码,名称是”registry-mirrors”,后面写加速镜像地址。

图片16.png

图片17.png

可以添加多个镜像,镜像之间逗号隔开,添加完点击”Apply&Start”按钮就好了。

图片18.png

检验一下加速镜像是否配置成功,在命令行输入如下代码:

图片19.png

在命令结果中出现了如下内容,也就是我们添加的加速镜像:

图片20.png 那么至此,docker的快速镜像就添加成功了。

三、Docker安装软件

1.安装优点

  • 一个命令就可以安装好,快速方便
  • 有大量的镜像,可直接使用
  • 没有系统兼容问题,Linux 专享软件也照样跑
  • 支持软件多版本共存
  • 用完就丢,不拖慢电脑速度
  • 不同系统和硬件,只要安装好 Docker 其他都一样了,一个命令搞定所有

Docker 官方镜像仓库 这里有很多开源的东西,是一个很好用的网站。

图片21.png

2.安装redis

在官方镜像仓库中查找redis:

图片22.png 点进去,可以看到里面会告诉你如何使用这个镜像:

图片23.png

Eg:docker run -d -p 6379:6379 --name redis redis:latest docker run 表示docker运行一个软件 -d 表示在后台运行 -p 6379:6379 表示端口的暴露,端口6379暴露在虚拟机中 --name xxx 表示给这个容器命名

打开powershell,输入如下命令:

图片24.png

这样,就是已经运行起来了。 在Docker的主页,点击左侧的Images,可以看到有redis这个镜像在运行。

图片25.png

切换到Containers,可以看到redis跑起来了一个容器:

图片26.png 点击它可以看到redis的日志、版本号、端口等等:

图片27.png

2.安装Wrodpress

在官方镜像中搜索wordpress,点击wordpress可以看到如何使用这个镜像,因为wordpress依赖数据库,所以运行时候,还需要指定一堆的环境变量,告诉它数据库的一些参数。

图片28.png 还有更方便的方法-----docker-compose。新建一个txt文档,将下面的代码复制粘贴到文档中。

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:

图片29.png 把docker-compose.txt改后缀为docker-compose.yml:

图片30.png 在该文件所在目录按住shift,右键,点击“打开PowerShell窗口”,运行如下代码:

图片31.png 运行完成之后,我们到docker里面看一下,这里已经拉下来了Wordpress和mysql的镜像了。

图片32.png 在容器中,可以看到已经跑起来了,端口是8080:

图片33.png 我们输入这个端口验证一下,看到跑起来了,就说明没有问题。

图片34.png

可以输入如下命令查看已经安装的镜像列表:

图片35.png

四、Docker部署运行nginx+Vue

1.安装nginx

在docker官方镜像库hub.docker.com/中查询并安装nginx…

图片37.png

图片38.png 输入命令docker pull nginx:

图片39.png 查看一下镜像,镜像列表中出现了nginx就说明安装成功。

图片40.png 在Docker图形界面工具中也可以查看到:

图片41.png

2.打包Vue项目

准备一个Vue项目,在项目所在目录下运行npm run build将它进行打包,打包后终端会有"Build Complete",项目目录中会出现一个dist目录。

图片1.png

图片42.png

3.在Vue项目根目录下创建nginx文件夹

在项目根目录下创建nginx文件夹,该文件夹下新建文件default.conf文件:

图片43.png 上述文件内容包括:监听80端口,定义了首页的指向,会把构建出来的 index.html 文件和相关的静态资源放到 /usr/share/nginx/html 目录下。

4.编写Dockerfile文件并基于该文件创建镜像

Dockerfile 是一个用来构建镜像的文本文件。我们只需要编写Dockerfile文件,运行它就可以构建镜像了。

在Docker中构建镜像最常用的方式就是使用Dockerfile。

Dokcerfile的参数如下:

- FROM    指明构建的新镜像是来自于哪个基础镜像

- COPY       拷贝文件或目录到镜像中

- WORKDIR    设置工作目录

- EXPOSE    暴露端口

- ADD       把宿主机的代码添加到镜像中

- RUN      安装依赖

在Vue项目根目录创建Dockerfile文件,DockerFile是由一系列命令和参数构成的脚本,这些命令应用于基础镜像并最终创建一个新的镜像。也就是会基于dockerfile文件中的内容构建该Vue项目镜像。 下面的Dockerfile文件中构建的新镜像来自于nginx镜像,并且将vue项目打包的内容复制到了docker容器中,用本地的 default.conf 配置来替换nginx镜像里的默认配置。

图片44.png 在项目根目录上运行下面的命令(-t 是给该项目的镜像命名):

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

图片45.png 之后可以通过docker images/docker image ls查看镜像。

5.基于创建的镜像启动容器

图片46.png

docker run 表示docker运行一个软件,也就是在指定的镜像上创建一个新容器,可以通过--name指定容器名称。 -p 4001:80 表示端口的暴露,端口4001暴露在容器的80端口/宿主机的4001端口映射到容器的80端口 -d 表示在后台运行 --name xxx 表示给这个容器命名 democontainer是起的容器名称 demonginx是刚才创建的镜像名称。

我写的端口4001,是查看了一下80端口被占用的情况,起了一个不冲突的4001,大家可以根据自己的电脑进行命名。

图片47.png 查看运行中的容器,可以看到我刚才起名为democontainer的新容器也在其中:

图片52.png

6.访问端口号查看Vue项目

图片48.png 补充:如果容器停止运行,我们之后想再次访问这个4001端口,那么应该怎么办呢? 进入Docker界面,可以看到容器democontainer是否在运行:

图片49.png 通过命令docker ps -a ,可以查看所有容器列表:

图片50.png 通过docker ps,可以查看运行中的容器:

图片51.png 可以看到democontainer容器目前是没有在运行的,那么如何运行这个容器呢? 有两个方法:

  • 方法1:可以去Docker的图形界面中,点击如下按钮启动容器,图标应该变成正方形。

图片53.png 如果想要停止容器运行,就再次点击图标变为三角形。

  • 方法2:也可以输入docker start命令启动容器。
docker start 容器的id或者名字

图片54.png 如果想要停止容器运行,就输入如下命令:

docker stop 容器的id或者名字

图片55.png

五、Docker Compose

1.介绍Docker Compose

官网教程:Docker compose官网

Docker Compose是一个用于定义和运行多容器 Docker 应用程序的工具。通过Docker Compose ,可以使用 docker-compose.yml文件(YAML 格式)来配置应用程序相关联的容器,包含多个服务services;每个服务中定义了创建容器时所需的镜像、端口映射、参数、依赖、环境变量等。然后,使用一个命令,就可以从 YML 文件配置中创建并启动所有服务,可以让它快速高效地部署多个容器了。

由于我安装的是图形界面的桌面版本,就不用安装Docker compose,桌面版自带。 命令行输入docker compose version或者docker-compose -v可以查看docker compose的版本信息:

图片66.png

2.编写docker-compose.yml脚本

在项目根目录上编写docker-compose.yml文件,里面可以进行一些配置,比如下面的内容。

图片4.png

具体的配置是什么用处如下图所示:

图片2.png

3.运行docker-compose.yml文件

有了docker-compose.yml文件之后,就可以启动它了。在docker-compose.yml 文件所在目录,右击打开PowerShell,执行docker-compose up就可以跑起来了。

跑起来之后,就可以访问端口号查看项目了。

在后台运行只需要加一个 -d 参数 docker-compose up -d

查看运行状态:docker-compose ps

停止运行:docker-compose stop

重启:docker-compose restart

重启单个服务:docker-compose restart service-name

进入容器命令行:docker-compose exec service-name sh

查看容器运行log:docker-compose logs [service-name]

4.基于docker compose对前端项目进行部署(更高效

之前是利用Dockerfile构建镜像,再根据构建的镜像创建运行容器,这个方法有点麻烦,更推荐docker compose方法来部署项目。

方式1:利用nginx配置文件和docker-compose.yml文件(推荐

在在项目根目录下创建nginx文件夹,该文件夹下新建文件default.conf文件。 文件内容包括:监听80端口,定义了首页的指向,会把构建出来的 index.html 文件和相关的静态资源放到 /usr/share/nginx/html 目录下。

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;
    }
}

在Vue项目根目录下新建docker-compose.yml文件并编写,如下所示:

图片68.png

注意:volumes挂载的是目录,不是文件!映射只能映射目录!

在项目目录下运行命令:docker-compose up -d

图片69.png 在浏览器输入localhost:4007就可以访问了。

图片70.png 利用docker ps查看正在运行的容器,在里面可以看到我们定义的容器名称、设置的镜像和暴露的端口号。

注意:如果我们在docker-compose.yml中没有指定容器名称,就会自动生成一个容器名称。

图片71.png

方式2:利用dockerfile文件、nginx配置文件、docker-compose.yml文件

在这里插入图片描述 编写nginx配置文件和Dockerfile文件: 在这里插入图片描述 在这里插入图片描述 写了Dockerfile,那么docker-compose.yml文件就这么写: 在这里插入图片描述 build命令就是指定构建镜像的dockerfile的上下文路径或者详细配置对象。 上面的这个docker-compose.yml文件将使用我们刚刚编写的 Dockerfile 文件来构建镜像,并启动一个容器,将容器的 80 端口映射到主机的 4006 端口,使我们可以通过访问本地 http://localhost:8080 访问 Vue 项目。 执行如下命令构建、运行项目:

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

这会在本地计算机上启动一个容器,并在 http://localhost:8080 上展示 Vue项目。 在这里插入图片描述 按ctrl+c就能退出容器了。 在这里插入图片描述

建议:不用build: ./和Dockerfile文件,推荐利用nginx配置文件和docker-compose.yml文件即可。(只要docker-compose.yml文件中不写build,那么Dockerfile文件就是没用的,不会影响什么)

六、目录挂载

容器里的东西会随着容器的重启或销毁而丢失,挂载到宿主机/服务器意思是将容器的数拷贝/写入到服务器的磁盘上,这样就持久化了,数据不会随着容器销毁而丢失。 使用 Docker 运行后,我们改了项目代码不会立刻生效,需要重新build和run,很是麻烦。利用目录挂载可以提高运行效率。

图片56.png

图片57.png

  • bind mount 方式用绝对路径 -v 要挂载项目的绝对路径:/app
  • volume 方式,只需要一个名字 -v 挂载的内容:/app

Eg:docker run -p 9090:8080 --name test-container -v D:/code:/app -d test-nginx

-p 9090:8080 把容器里面的8080暴露给宿主机的9090

--name test-container 把容器命名为test-container

-v D:/code:/app 表示挂载。 D:/code是项目绝对路径,把这个code项目的代码目录挂载到容器里面的/app目录

-d表示在后台运行

test:nginx 表示指定的镜像的名字。

用命令挂载目录

举例:以自己的demo项目为例,使用bind mount方式挂载目录,我要挂载的项目目录是:D:\Project\demo 把这个项目的代码目录挂载到容器里面的/app目录,一定要用绝对路径! 进入项目目录,按住shift右键打开PowerShell:

图片58.png 基于demonginx镜像创建新的容器:

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

图片59.png

这样,命令就跑起来了。 通过如下命令可以查看关联的主机目录:

图片60.png

图片61.png 在Docker图形化面板的Containers模块中可以看到刚刚创建的test-container容器。

图片62.png 点击该容器,在Files中展开app目录,可以看到Vue项目的目录都挂载进来了。

图片63.png 去浏览器输入localhost:4002即可查看该Vue项目了。

图片64.png 我们去Vue项目中修改一下App.vue中的代码,看看是否会立刻更新,因为我们已经把代码目录挂载到容器中了。打开容器的Files,可以看到容器里面的App.vue的内容已经修改了。

图片65.png 这就说明目录已经挂载成功了。

利用docker-compose挂载项目目录

先把项目进行打包:

图片1.png 挂载项目的dist静态资源、nginx配置文件到容器中。 图片7.png 运行docker-compose up -d命令: 图片3.png 输入localhost:4080就可以看到项目:

图片4.png 这就实现了docker-compose挂载目录。如果想实现热更新,那么就再次build打包一下项目再运行docker compose命令就行。

注意:

在使用 Docker Compose 挂载目录时,应该根据实际需求进行调整,避免挂载过多或者不合理的目录,从而影响容器的性能和安全性!

为了确保挂载目录操作正确无误,需要在主机上先创建要挂载的目录。此外,在挂载目录时,应该注意目录的读写权限和访问控制等问题,避免因为目录权限问题而导致容器无法正常挂载。另外,在利用挂载目录实现数据共享和持久化时,也需要格外注意数据安全和备份等问题!

七、Docker 常用命令

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 logs 容器id前几位                   查看容器的日志信息
docker inspect 容器id的前几个内容   	查看容器的详细信息,比如IP地址等

docker-compose -f 文件名 up -d            运行指定的docker-compose.ym文件

Eg:进入正在运行的容器:

图片72.png 退出容器:

图片73.png 查看容器的IP:

图片74.png


总结

至此,就是我最近入门学习的Docker相关内容,欢迎大家来补充呀~