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的知识。
网友评论