前端工程师学Docker ？ 看这篇就够了 【原创精读】

时间  2019-11-05 标签 前端 工程师 docker 看这 够了 原创精读
前端工程师，为何要学习Docker ?

传统的虚拟机，很是耗费性能

Docker能够当作一个高性能的虚拟机，而且不会浪费资源，主要用于Linux环境的虚拟化，相似VBox这种虚拟机，不一样的是Docker专门为了服务器虚拟化，并支持镜像分享等功能。前端工程师也能够用于构建代码等等

目前看，Dokcer不只带火了GO语言，还会持续火下去html

首先，咱们看看传统的虚拟机和Docker的区别

传统的虚拟机：前端

Docker:node

能够看到，传统的虚拟机是每开一个虚拟机，至关于运行一个系统，这种是很是占用系统资源的，可是Docker就不会。可是也作到了隔离的效果react

Docker容器虚拟化的优势:

  1. 环境隔离

Docker实现了资源隔离，实现一台机器运行多个容器互不影响。nginx

  1. 更快速的交付部署

使用Docker，开发人员能够利用镜像快速构建一套标准的研发环境，开发完成后，测试和运维人员能够直接经过使用相同的环境来部署代码。git

  1. 更高效的资源利用

Docker容器的运行不须要额外的虚拟化管理程序的支持，它是内核级的虚拟化，能够实现更高的性能，同时对资源的额外需求很低。github

  1. 更易迁移扩展

Docker容器几乎能够在任意的平台上运行，包括乌力吉、虚拟机、公有云、私有云、我的电脑、服务器等，这种兼容性让用户能够在不一样平台之间轻松的迁移应用。docker

  1. 更简单的更新管理

使用Dockerfile，只须要小小的配置修改，就能够替代以往的大量的更新工做。而且全部修改都是以增量的方式进行分发和更新，从而实现自动化和高效的容器管理。npm

正式开始

本文撰写于2019年10月13日json

电脑系统：Mac OS

使用最新版官网下载的Docker

如下代码均手写，可运行

下载官网的Docker安装包，而后直接安装

https://www.docker.com/

Docker官网下载地址
安装后直接打开

打开终端命令行，输入docker,会出现如下信息，那么说明安装成功

下载安装成功后，首先学习下Docker的两个核心知识点

container(容器)和image(镜像)

Docker的整个生命周期由三部分组成：镜像（image）+容器（container）+仓库（repository）

思惟导图以下：

该如何理解呢？

每台宿主机（电脑），他下载好了Docker后，能够生成多个镜像，每一个镜像，能够建立多个容器。发布到仓库时，以镜像为单位。能够理解成：一个容器就是一个独立的虚拟操做系统，互不影响，而镜像就是这个操做系统的安装包。想要生成一个容器，就用安装包（镜像）生成一次

上面就是Docker的核心概念，下面开始正式操做

补充一点：若是想深刻Docker , 仍是要去认真学习下原理，今天咱们主要讲应用层面的

首先，咱们回到终端命令行操做

输入:

docker images

若是你的电脑上以前有建立过的镜像，会获得以下：

若是没有的话就是空～

咱们首先建立一个本身的镜像

先编写一个Node.js服务

建立index.js

// index.js
const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
   ctx.body = 'Hello docker';
});

app.listen(3000);

而后配置package.json文件

{
    "name": "app",
    "version": "1.0.0",
    "private": true,
    "scripts": {
      "start": "node server.js"
    },
    "dependencies": {
      "koa": "^2.5.0"
    }
   }

正常状况下 使用

npm start 或 node index.js 就能够启动服务
但是咱们这里须要打包进Docker中，这里就须要写一个配置文件dockerfile

vsCode有自然插件支持

在目录下新建文件dockerfile，加入以下配置

FROM  node 
ADD . /app/
EXPOSE 3000
WORKDIR /app
RUN npm install
CMD ["node","./index.js"]

解释一下，上面这些配置的做用

FROM 是设置基础镜像，咱们这里须要Node

ADD是将当前文件夹下的哪些文件添加到镜像中 参数是 [src,target]

这里咱们使用的 . 意思是全部文件，固然跟git同样，能够配置ignore文件

EXPOSE是向外暴露的端口号

WORKDIR是说工做目录，咱们这里将文件添加到的是app目录，因此配置app目录为工做目录，
这样就不用在命令行前面加/app了

RUN是先要执行的脚本命令

CMD是执行的cmd命令

能够想想，咱们打包好镜像后，而后启动镜像会发生什么？

文件编写完，使用命令打包镜像

使用命令打包已经好的文件目录

docker image build ./ -t app

打包后出现提示：

此时咱们查看Docker镜像，使用命令：

docker images

咱们能够清楚看到，app镜像已经打包成功，下面咱们启动它

docker run -p 8000:3000 app

使用上面命令便可启动咱们的镜像，这时咱们在命令中输入

curl 127.0.0.1:8000

获得返回内容

Hello docker

浏览器输入: 127.0.0.1:8000 便可访问到页面～

以上说明，咱们的第一个Docker镜像已经制做成功

有人可能会以为到这里，镜像和容器有点混淆了，不是先有镜像再有容器吗？

实际上是咱们启动的镜像有脚本命令帮咱们启动了服务，因而Docker帮咱们自动建立了容器

查看Docker容器命令：

docker ps -a 列出全部容器
不加 -a 仅列出正在运行的，像退出了的或者仅仅只是建立了的就不列出来
docker container ls 列出当前运行的容器

输入上面 docker container ls

获得结果

原来Docker看咱们启动了脚本服务，帮咱们自动生成了容器？

下面咱们来一个生成镜像，再生成容器，最后手动启动容器的例子

此次咱们配置，加入Nginx反向代理服务器

首先,建立用户须要看到的html文件

这里咱们给一个普通的 hello-world内容的index.html文件便可

而后建立dickerfile文件,配置以下，将index.html文件添加到对应的位置

FROM nginx

COPY ./index.html /usr/share/nginx/html/index.html

EXPOSE 80

对外暴露端口号80

这里特别提示：配置文件怎么写，根据你的基础镜像来，百度基本都能找到，不用纠结这个

此时的文件结构：

老规矩，开始打包

docker build ./ -t html

打印信息：

输入终端命令：

docker images

获得结果：

新的镜像html已经构建成功，可是此时查看容器，是没有正在运行的

输入命令：

docker container ls //查看正在运行的全部容器
docker container ls -a //查看全部容器
获得结果是：

能够确认的是，咱们建立镜像不会自动生成和启动容器

咱们手动生成容器

docker container create -p 8000:80 html

此时命令行返回 一段值

输入

docker container ls

没有显示有任何启动的容器，这时候咱们手动启动

输入

docker container start ***(上面那段值)

再重复 docker container ls 命令

获得结果

此时访问localhost:8000便可正常访问页面～

至此，咱们能够肯定，建立镜像只要不启动，不会生成容器，更不会运行容器

那怎样将Docker用在前端的平常构建中呢？

咱们使用gitHub+travis+docker来造成一套完整的自动化流水线

只要咱们push新的代码到gitHub上，自动帮咱们构建出新的代码，而后咱们拉取新的镜像便可（gitLab也有对应的代码更新事件钩子，能够参考那位手动实现Jenkens的文章）

首先咱们先进入 Travis CI 官网配置，注册绑定本身的gitHub帐号

而后在左侧将本身须要git push后自动构建镜像的仓库加入

接着在项目根目录配置 .travis.yml 文件

language: node_js
node_js:
  - '12'
services:
  - docker

before_install:
  - npm install
  - npm install -g parcel-bundler

script:
  - parcel build ./index.js
  - echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
  - docker build -t jinjietan/mini-react:latest .
  - docker push jinjietan/mini-react:latest

每次更新push代码，都会下载，而后执行打包命令，这样你下载的镜像就是有最新的代码。再也不须要每一个人下载打开镜像再去build

为了下降复杂度，这里使用了Parcel打包工具，零配置

更改dockerfile内容，将parcel打包后的内容COPY进容器

FROM nginx
COPY ./index.html /usr/share/nginx/html/
COPY ./dist /usr/share/nginx/html/dist
EXPOSE 80

添加好了你的库以后，选择这里的设置

而后添加两个环境变量：

DOCKER_USERNAME和DOCKER_PASSWORD

这里，我将我编写的mini-react框架源码，放入docker中，而后使用parcel打包工具打包，再用nginx反向代理～

特别提示：这里的Docker容器，想要后台运行,就必须有一个前台进程。容器运行的命令若是不是那些一直挂起的命令（好比tcp，ping），就是会自动退出的

经过 docker ps -a 能够看到容器关闭的缘由

注意 ：jinejietan/mini-react应该换成你的用户名/包名，再push代码

这是思惟导图：

当配置成功，代码被推送到gitHub上后，travis-ci帮咱们自动构建发布新镜像

必定要学会使用: docker ps -a 查看容器的状态

成功的提示：

至此，发布，自动构建镜像已经完成

正式开始拉取镜像，启动容器

咱们刚才发布的镜像名称是：jinjietan/mini-react

先使用下面几条命令

docker中 启动全部的容器命令
 
docker start $(docker ps -a | awk '{ print $1}' | tail -n +2)
docker中 关闭全部的容器命令

docker stop $(docker ps -a | awk '{ print $1}' | tail -n +2)
docker中 删除全部的容器命令

docker rm $(docker ps -a | awk '{ print $1}' | tail -n +2)
docker中 删除全部的镜像

docker rmi $(docker images | awk '{print $3}' |tail -n +2)
tail -n +2 表示从第二行开始读取

清除当前宿主机上面全部的镜像，容器，依次执行

而后使用:

docker image pull jinjietan/mini-react:latest

拉取镜像，这时候须要下载

拉取完成后，使用

docker images

能够看到jinjietan/mini-react:latest镜像已经存在了

咱们使用

docker container create -p 8000:80 jinjietan/mini-react:latest

建立这个镜像的容器，而且绑定在端口号8000上

最后输入下面的命令，便可启动mini-react框架的容器

docker container start  ***(上面create的返回值)

浏览器输入 127.0.0.1:8000 发现，访问成功，框架生效。

Docker的使用，咱们大体就到这里，我的认为，用Docker比不用好，这个技术已经快跟TypeScript同样，到不学不行的阶段了。

并非说你非要用它，而是好比说，你若是不怎么懂TypeScript，你就没办法把现在那些优秀库的大部门的源码搞得那么清楚。

愈来愈多的技术在依赖Docker

固然，其实这个mini-react框架源码也是不错的，若是有兴趣能够了解如下，源码都在：

mini-react框架+镜像配置源码，记得切换到diff-async分支哦～

https://github.com/JinJieTan/...

若是以为写得不错，能够右下角点个在看

关注一下个人微信公众号：前端巅峰 ～ 回复加群便可加入大前端交流群

主要注重技术点：即时通信，跨平台重型应用开发，全栈工程师方向前沿技术

联系我们 沪ICP备13005482号-10