加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

写给前端的Docker实战教程

发布时间:2019-09-27 22:04:18 所属栏目:建站 来源:花生PeA
导读:本篇文章详细而又简短的介绍了:一名完全不了解 Docker 前端程序员,将全站 Docker 化的过程。内容主要包含: Docker 基本概念 真实站点迁移过程: 静态站点 Nodejs 站点(Express) WordPress(PHP) 一些必备技巧:开机启动、常用Shell 文章会讲解使用 Docke

docker image build ./ -t hello-docker:1.0.0的意思是:基于路径./(当前路径)打包一个镜像,镜像的名字是hello-docker,版本号是1.0.0。该命令会自动寻找Dockerfile来打包出一个镜像

  1. Tips: 你可以使用docker images来查看本机已有的镜像 

不出意外,你应该能得到如下输出:

  1. Sending build context to Docker daemon  3.072kB 
  2. Step 1/3 : FROM nginx 
  3.  ---> 5a3221f0137b 
  4. Step 2/3 : COPY ./index.html /usr/share/nginx/html/index.html 
  5.  ---> 1c433edd5891 
  6. Step 3/3 : EXPOSE 80 
  7.  ---> Running in c2ff9ec2e945 
  8. Removing intermediate container c2ff9ec2e945 
  9.  ---> f6a472c1b0a0 
  10. Successfully built f6a472c1b0a0 
  11. Successfully tagged hello-docker:1.0.0 

可以看到其运行了 Dockerfile 中的内容,现在我们简单拆解下:

  • FROM nginx:基于哪个镜像
  • COPY ./index.html /usr/share/nginx/html/index.html:将宿主机中的./index.html文件复制进容器里的/usr/share/nginx/html/index.html
  • EXPOSE 80:容器对外暴露80端口

运行容器

我们刚刚使用 Dockerfile 创建了一个镜像。现在有镜像了,接下来要根据镜像创建容器:

  1. docker container create -p 2333:80 hello-docker:1.0.0 
  2. docker container start xxx # xxx 为上一条命令运行得到的结果 

然后在浏览器打开127.0.0.1:2333,你应该能看到刚刚自己写的index.html内容

在上边第一个命令中,我们使用docker container create来创建基于hello-docker:1.0.0镜像的一个容器,使用-p来指定端口绑定——将容器中的80端口绑定在宿主机的2333端口。执行完该命令,会返回一个容器ID

而第二个命令,则是启动这个容器

启动后,就能通过访问本机的2333端口来达到访问容器内80端口的效果了

  1. Tips: 你可以使用docker containers ls来查看当前运行的容器 

当容器运行后,可以通过如下命令进入容器内部:

  1. docker container exec -it xxx /bin/bash # xxx 为容器ID 

原理实际上是启动了容器内的/bin/bash,此时你就可以通过bash shell与容器内交互了。就像远程连接了SSH一样

发生了什么

我们总结下都发生了什么:

  1. 写一个 Dockerfile
  2. 使用docker image build来将Dockerfile打包成镜像
  3. 使用docker container create来根据镜像创建一个容器
  4. 使用docker container start来启动一个创建好的容器

写给前端的Docker实战教程

虽然很简单,但是也没有感觉到“广阔天地,大有可为,为所欲为”呢?

迁移静态站点

接下来我们实战迁移一个由 Vuejs 写的纯静态 SPA 单页站点:

  • 网址:pea3nut.info
  • 源码:github/pea3nut-info

我打算怎么做

在没迁移 Docker 之前,若我想更新线上网站中内容时,需要:

  1. 本地npm run build打包产出静态文件
  2. 手动通过 FTP 上传到服务器
  3. git push更新 Github 源码

稍微有点麻烦,因此我打算这样改:

  1. 执行git push
  2. 自动检测到 github 有代码更新,自动打包出一个 Docker 镜像
  3. CI 编译完成后,SSH 登录 VPS,删掉现有容器,用新镜像创建一个新容器

而这样做的好处是:

  1. 不必再手动 FTP 上传文件
  2. 当我进行修改错别字这样的简单操作时,可以免测。改完直接git push,而不必本地npm run build

Github中的CI

首先是让 Github 在我每次更新代码时打包出一个镜像

在 Github,可以有免费的 CI 资源用,它就是 Travis CI

在项目中根目录中添加.travis.yml文件,内容如下:

  1. language: node_js 
  2. node_js: 
  3.   - "12" 
  4. services: 
  5.   - docker 
  6.  
  7. before_install: 
  8.   - npm install 
  9.  
  10. script: 
  11.   - npm run build 
  12.   - echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin 
  13.   - docker build -t pea3nut/pea3nut-info:latest . 
  14.   - docker push pea3nut/pea3nut-info:latest 

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读