专栏首页大前端开发让前端10分钟就能入门Docker!

让前端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的知识。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Node.js服务端开发教程 (二):新的软件交付方式

    在上文中,我们从零开始安装了必需的一些NestJS开发环境,并使用命令行工具生成了第一个NestJS服务端程序,而且也初步了解了怎么把这个程序运行起来。

    一斤代码
  • ES6特性之:参数默认值

    作为一个开发者,跟进行业步伐是非常需要的,不能躺在现有的知识和经验温床上做美梦。JavaScript的ES2015标准(即我们说的ES6)在2016年已经被广泛...

    一斤代码
  • 一文让你更懂Docker

    在之前的文章中,给大家介绍了如何使用Docker打包前端项目的知识,可能通过一通实操,你已成为一名会使用Docker的程序员。不过老实说,之前的内容还不足以让你...

    一斤代码
  • 可重复的生信分析系列一:Docker的介绍

    可重复的生信分析一直是未来的趋势。如果实现可重复的生信分析,关键在于分析软件版本的控制,一致的环境设置还有良好的分析流程的记录。最近发现一篇关于这方面很好的教程...

    生信菜鸟团
  • 构建Docker私有仓库

    上一篇说了如何利用Dockerfile在已有镜像的基础上构建自己的镜像,那么如果需要让镜像在一个团队中使用,就需要一个仓库,有几种方式可以共享私有镜像。

    Liusy
  • Docker 安装

    国内从 Docker Hub 拉取镜像有时会遇到困难,此时可以配置镜像加速器。Docker 官方和国内很多云服务商都提供了国内加速器服务,例如:

    traffic
  • Docker 学习系列二之基本管理

    ---- 概述 之前对docker的基本的工作原理进行了简单的介绍和学习Docker工作原理 今天开始不断的学习Docker的容器、镜像和仓库管理。 Docke...

    BrianLv
  • SpringBoot与docker

    用户1112962
  • Ubuntu 17.04 x64 安装 Docker CE 初窥 Dockerfile 部署 Nginx

    Docker 是个划时代的开源项目,它彻底释放了计算虚拟化的威力,极大提高了应用的运行效率,降低了云计算资源供应的成本!使用 Docker,可以让应用的部署、测...

    搜云库
  • 30 分钟快速入门 Docker 教程

    在没有 Docker 的时代,我们会使用硬件虚拟化(虚拟机)以提供隔离。这里,虚拟机通过在操作系统上建立了一个中间虚拟软件层 Hypervisor ,并利用物理...

    Java技术江湖

扫码关注云+社区

领取腾讯云代金券