让前端10分钟就能入门Docker！

Docker是现如今非常流行的一种容器化打包和发布工具，配合Git、SVN等代码版本管理工具，Jenkins、Gitlab Runner等持续集成工具，以及Swarm、Kubernetes等容器编排工具，可以形成一个完整的软件自动化集成、测试发布流水线（俗称CI/CD），可有效的提升团队的生产效率和运维体验。

我们很多做前端开发的同志，在日常开发完成后，运行一下 npm run build，打包出一堆静态html、js、css文件，就算完成交付了。如果要查看这堆静态文件的实际运行效果，就需要安装配置一个Nginx服务器，或者自己编写一个基于express的Node.js静态资源HTTP服务。这种情况，在你个人本地开发的时候没什么太大的问题。

不过，当你在一个有点规模的团队协作开发中，可能会变得不那么方便了，尤其是在各种配置文件比较复杂的情况下，让团队中的每一个人去正确的安装和配置这些软件是不明智的，会耗费大家很多的精力，也一定会出现经典的“我本地是好的呀！”问题。

借助Docker，我们可以比较好的解决这样的问题，让我们的前端交付物通过一个简单的命令就能在任何安装了Docker的电脑上运行起来，不管是Windows也好，Linux也好，亦或是MacOS，都能做到行为完全一致。

下面我们通过一个操作实例来给大家入门一下如何使用Docker打包发布前端项目。

一、安装Docker

我们自己的开发机一般使用Windows或MacOS系统的较多，可以从官方网站上下载Docker- Desktop并安装到你的电脑上，过程非常简单。

下载地址：
https://www.docker.com/products/docker-desktop

如果你用的是Linux系统，则可以通过yum或apt之类的包管理器来安装docker-ce版本（文章篇幅所限，请自行百度）。安装完成之后，可执行以下的命令来验证安装是否成功，并且确认docker server是否已经启动：

docker info

如果出现的信息中包含如下内容，则说明你的docker server服务还没有开启，请先去启动它：

ERROR: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?

二、创建一个简单的前端项目

我这里用vue-cli来生成了一个新的Vue项目骨架代码：

vue create test-app

并为它安装上依赖库：

yarn 
# 或 npm install

然后，按照我们以往的方式构建一下：

yarn build

构建后，项目根目录下生成了构建结果dist目录：

三、为项目添加Docker镜像构建描述文件 Dockerfile

关键部分来了，Dockerfile是用于告诉docker进行镜像打包步骤的描述文件。既然这是一个步骤描述文件，那我们首先也还是得要先搞清楚我们的打包步骤。对于我们的前端项目来说，可以先问自己几个问题：

需要依赖哪些基本的软件？

• Nginx

需要把什么东西打包进docker镜像？

• 前端项目构建后的dist目录下的所有文件
• nginx的配置文件

需要开放什么端口吗？

• 80端口

需要设置什么环境变量吗？

• 不需要

需要挂载磁盘存储吗？

• 不需要

有了上面几个问题和答案做参考，我们就能大致了解具体的需求，并可以开始编写Dockerfile文件了。在项目的根目录下创建名为 Dockerfile 的文件，并编辑如下内容：

# 使用包含预装了nginx的基础镜像
FROM nginx:latest

# 设置工作目录
WORKDIR /app

# 向镜像中添加文件：我们前端项目构建出来的dist目录下的静态资源文件
COPY dist/ /app/html

# 向镜像中添加文件：nginx配置文件
COPY nginx.app.conf /etc/nginx/conf.d/app.conf

# 声明容器将对外暴露80端口
EXPOSE 80

在根目录下，再添加一个 nginx.app.conf 文件：

server {
    # Nginx监听在80端口
    listen       80;
    listen       [::]:80;
    server_name  localhost;

    # 开启Gzip文件压缩
    gzip                 on;
    gzip_vary            on;
    gzip_proxied         any;
    gzip_comp_level      6;
    gzip_buffers         16 8k;
    gzip_http_version    1.1;
    gzip_types           image/svg+xml text/plain text/html text/xml text/css text/javascript application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/json application/x-font-ttf application/vnd.ms-fontobject font/opentype font/ttf font/eot font/otf;

    location / {
        root /app/html;
        index index.html;
    }
}

四、构建Docker镜像

代码和配置文件都准备好后，构建其实很简单，就一行命令：

docker build -t test-app:v1.0.0 .

这条命令将按照Dockfile中描述的步骤，构建出一个名为 test-app，版本号为 v1.0.0的镜像。执行如下命令可查看镜像列表：

docker images

五、运行镜像，创建容器

截止当前，我们的代码已经和Nginx打包在了一起，成为了一个被叫做镜像的整体。它可以被分发给其他人员来运行使用。镜像和容器两个词之间的关系，就跟类 *Class *和实例 *Instance *一样：容器是镜像的运行实例。

在真正把刚构建的镜像分发之前，让我们先来测试一下它，看它是否能正常运行：

docker run -p 8000:80 -d test-app:v1.0.0

打开浏览器访问 http://localhost:8000/ 看看，是不是看到你期待的前端页面了？

六、停止运行中的容器

如果要停止刚运行起来的容器，那就得先找到它。执行下面的命令可以查看当前运行中的容器：

docker ps

找到所要关闭的容器ID（CONTAINER ID），并执行命令：

docker kill 容器ID

七、发布到镜像仓库

类似于Java的Maven或者是Node的Npm，Docker的镜像分享机制也采用了远程仓库的形式（有公有仓库和私有仓库），可将构建好的镜像上传到镜像仓库中，供他人从镜像仓库中下载你的镜像来使用。

可供使用的公有镜像仓库比如有Docker官方仓库、阿里云镜像仓库等第三方服务；或者你也可以自己搭建私有化的仓库服务（推荐使用Harbor搭建）。

要上传镜像到远程仓库中，需要先登录：

#不加任何参数的话是登录官方仓库
docker login

然后需要根据所使用的镜像仓库的情况，将本地的镜像重命名成规定的名称（在所使用的镜像仓库系统中会明确提示这些信息）。比如现在要将我之前构建的镜像推送到Docker官方仓库，则需要将镜像重命名：

# 重命名为：zarknight/test-app:v1.0.0
docker tag test-app:v1.0.0 zarknight/test-app:v1.0.0

之后就可以上传镜像了：

docker push zarknight/test-app:v1.0.0

小结

这次主要是给从未接触过Docker或只是听说过的朋友科普一下基础知识。Docker它不止是很多人认为的运维专属工具，在开发过程中，它也能切实的为我们提供很多方面的便利。希望大家都能去尝试一下，就能体会到它为什么如此的流行了。

我会在之后提供一段视频教程，为大家更多的介绍Docker，甚至是Kubernetes的知识。