资讯专栏INFORMATION COLUMN

Docker 及 GitLab CI 在前端工作流上的实践分享(一)

wyk1184 / 3009人阅读

摘要:如今前端工程越来越复杂,打造一个好用的工作流也显得越来越重要。如果用户启动容器时指定了运行的命令,则会覆盖掉指定的命令。个人感觉在项目多协作人数多的情况下,还是很方便的。

如今前端工程越来越复杂,打造一个好用的工作流也显得越来越重要。
本文讲分成二个部分,通过简单例子,来介绍上图中那条鱼和狐狸 :)

part1 : docker 本文的项目代码
part2 : gitlab-ci 点我跳转

ok, 那么现在就开始第一部分

一、什么是 Docker ?

Docker是一个基于轻量级虚拟化技术的容器引擎开源项目,可以轻松的为任何应用创建一个容器
具体做的就是快速的帮助开发者搭建应用周期里所需的各种环境,快速地部署项目以缩短开发周期

docker 具备以下几个优势:

1.配置简单
2.可移植
3.独立自给自足
4.轻量级

Docker 的应用场景

1.web应用工作流中的各种环境快速搭建

自动化测试和持续集成、发布

二、安装 docker
首先下载安装包

这里以 mac 为例子

Mac 客户端:https://store.docker.com/edit...
其他版本:https://www.docker.com/get-do...

这时候打开终端,就可以使用docker命令了。

性能和网络设置

安装后,最好进行一些基本的性能和网络设置(在 docker app的设置菜单里,快捷键 commond + ,)


设置镜像加速(很重要),这里利用阿里云的加速 https://cr.console.aliyun.com...

三、Docker 的几个核心概念

在使用 docker 之前,有必要先了解 docker 的几个核心概念。

1.镜像 images

Images 镜像是 Docker 容器的模板文件,用来创建和运行Docker容器。

镜像可以从 Docker Hub 下载:
我们可以先用 docker search 命令来搜索 ubuntu 镜像

然后我们可以用 docker pull ubuntu 来获取那个 images

各个选项说明:

REPOSTITORY:表示镜像的仓库源

TAG:镜像的标签

IMAGE ID:镜像ID

CREATED:镜像创建时间

SIZE:镜像大小

2.容器 container

Container 容器是 Docker 镜像的一个运行实例,一个实例相当于创建了一个独立的环境,我们可以在
里面运行操作系统、程序应用、修改文件数据等等。

当你用 docker run 运行 images 的时候,就会创建对应的容器:

docker run -ti ubuntu:latest /bin/bash

-ti参数可以让容器保持终端交互 ( 退出在容器内输入 exit )
ubuntu:latest就是镜像名,/bin/bash 则是运行命令

想查看运行中的容器:docker ps

退出容器:docker stop 或者 docker kill 加上对应容器的ID (一般输入开头3~4个字母就行了)
重新启动容器: docker start加上对应容器的ID
更多容器相关命令,请查看官网文档,或者--help查看命令帮助

3.使用 Dockerfile 和 Docker-compose 定制镜像

Dockerfile 是一个文本格式的配置文件,用于快速方便的创建自定义镜像。
Docker-compose 则是用于组合多个镜像,创建一个模块化的容器集合。

Dockerfile 常用有以下指令选项:

- FROM
指定构建镜像的基础源镜像,如果本地没有指定的镜像,则会从 docker hub pull 镜像下来。

FROM ubuntu

- RUN
创建镜像过程中,用来执行命令,通常用于安装程序(RUN 会被缓存,可以使用docker build --no-cache 清除缓存)

RUN apt-get update && apt-get install git

- CMD
CMD可以让容器在启动时默认执行一个命令。如果用户启动容器时指定了运行的命令,则会覆盖掉CMD指定的命令。

CMD ["/bin/bash","/etc/php.sh"]

- EXPOSE
容器对外映射的本地端口,需要在 docker run 的时候使用-p或者-P选项生效。

EXPOSE 8080

- ENV
设置环境变量

ENV         # 只能设置一个变量
ENV = ...   # 允许一次设置多个变量

- ADD
- COPY
ADD 和 COPY 都是本地主机文件、目录到容器指定路径中 。,不同的是,ADD可以复制远程文件 URL,并且支持 Go 的正则模糊匹配,具体规则可参见 Go filepath.Match

ADD hom* /mydir/        # adds all files starting with "hom"
ADD hom?.txt /mydir/    # ? is replaced with any single character
COPY ... 

- VOLUME
本地目录到容器的映射

VOLUME ["/src","/www"]

- WORKDIR
初始执行命令的路径

WORKDIR /www/server
RUN pwd # 打印/www/server

以上配置 也可以在 Docker-compose 完成,只是关键字和值的写法不太一样,具体可以参考它们的文档:
Dockerfile: https://docs.docker.com/engin...
Docker-compose: https://docs.docker.com/compo...

四、一个简单案例

使用 docker 为一个spa应用起一个开发环境+测试环境

简单说要做的是:

在 docker 里起一个 node 服务热加载项目源码。

用 docker 起一个 nginx 服务,代理项目编译后的 dist 目录。

在这,我用 vue-cli 初始化了一个项目,然后新建了个 docker-compose 文件夹(用来配置docker)如下图:


上图是源码目录,

另外,docker-compose 的目录结构如下

docker-compose

docker-compose.yml

nginx

Dockerfile

nginx.conf

sites-enabled

www.docker-test.com.conf

node

Dockerfile

start.sh

、node 文件夹下各有一份 Dockerfile 文件,可以创建两个 images 镜像,docker-compose.yml 则用于将两个镜像服务整合使用。

我们先看 node 文件夹下的
Dockerfile:

# docker-compose/php/Dockerfile

#基于 node 镜像
FROM node  

# 复制宿主机的 start.sh 到 容器 /etc/start.sh
ADD start.sh /etc/start.sh

# 设置初始命令执行目录
WORKDIR /www

# 通过 RUN 可以在容器里执行自定义命令
RUN node -v
RUN pwd

CMD ["/bin/bash","/etc/start.sh"]

start.sh:

#!/bin/bash

# 启动 php 服务
npm run dev 

再来看 nginx 下的
Dockerfile:

# docker-compose/nginx/Dockerfile

#基于 nginx 镜像
FROM nginx  

#基于 nginx 相关配置复制到容器
ADD nginx.conf /etc/nginx/nginx.conf
ADD sites-enabled/* /etc/nginx/conf.d/

#创建 nginx log 和用户相关路径
RUN mkdir /opt/htdocs && mkdir /opt/log && mkdir /opt/log/nginx
RUN chown -R www-data.www-data /opt/htdocs /opt/log

这样,两个服务的 Dockerfile 都创建完成了,但是我们还没暴露端口,也没配置 volumes 映射,这里我们可以在 docker-compose.yml 中设置:

nginx:
  build: ./nginx
  ports:
    - "80:80" #映射到本地的端口
  volumes: 
    - /Users/mr.yun/docker-test/docker-demo/dist:/www

node:
  build: ./node
  ports: 
    - "8085:8080"   #映射到本地的端口 本地访问8085,即访问容器内的8080
  volumes:
    - /Users/mr.yun/docker-test/docker-demo:/www

注意,上面代码中,volumes 的值,要根据你自己的实际项目目录来配置。

配置完以上变量后,cd 进入 docker-compose 文件目录

直接运行命令

# 启动容器集合,会同时创建两个image,并启动两个容器,也可以加 -d 在后台运行
# 运行后可以通过 docker images,docker ps查看生成的镜像和容器
docker-compose up --biuld

等待下载完成,并自动运行

然后在浏览器输入 127.0.0.1:8050 ,就能看到 vue项目,并且修改源码能热加载。

输入 127.0.0.1,则可以看到静态资源 hash 过的项目。(别忘了在本地先 npm run build)

哦了,以上就是 docker 的基本使用介绍,更多玩法和技巧,到实际项目中探索。
个人感觉在项目多、协作人数多的情况下,docker 还是很方便的。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/27058.html

相关文章

  • Docker GitLab CI 前端工作流上实践分享

    摘要:如今前端工程越来越复杂,打造一个好用的工作流也显得越来越重要。如果用户启动容器时指定了运行的命令,则会覆盖掉指定的命令。个人感觉在项目多协作人数多的情况下,还是很方便的。 showImg(https://segmentfault.com/img/remote/1460000011553749?w=1100&h=225); 如今前端工程越来越复杂,打造一个好用的工作流也显得越来越重要。本...

    godruoyi 评论0 收藏0
  • CI Weekly #6 | 再谈 Docker / CI / CD 实践经验

    摘要:阿里云效平台基于理念的私有平台实践本文将系统的从个方面,分享互娱运维团队对于运维平台实践经验及未来展望,希望对大家有一些参考意义。 CI Weekly 围绕『 软件工程效率提升』 进行一系列技术内容分享,包括国内外持续集成、持续交付,持续部署、自动化测试、 DevOps 等实践教程、工具与资源,以及一些工程师文化相关的程序员 Tips 。同步于 flow.ci Blog、微信公众号、官...

    justCoding 评论0 收藏0
  • CI Weekly #19 | 关于软件开发模型思考,以最新 CI/CD 实践分享

    摘要:以上是的所有技术分享,如有问题,请联系我们围绕软件工程效率提升进行一系列技术内容分享,包括国内外持续集成持续交付,持续部署自动化测试等实践教程工具与资源,以及一些工程师文化相关的程序员。 五月一来,夏天便悄然而至。flow.ci 也带来了几个新的变化,帮你进一步优化开发工作流。一起来看看这几个重点功能: 支持 iOS 项目 Xcode8.3 构建 iOSer 们重点来了,flow....

    CoderBear 评论0 收藏0
  • 2018 小回顾

    摘要:不过今儿与往年不同的是昨晚突然发高烧,今儿都没能去上班,感谢我的小可爱在照顾我。尤其要感谢小可爱,给了我很多支持。在这一年里小可爱的厨艺越来越棒,美滋滋,嘿嘿。 年底了,惯例做个小回顾,对这一年做个总结,也对下一年大致做个规划。 不过今儿与往年不同的是昨晚突然发高烧,今儿都没能去上班,感谢我的小可爱在照顾我。这篇文章也是躺在床上用手机编辑的。 还是按照惯例从工作,生活两方面来说。先聊聊...

    BaronZhang 评论0 收藏0
  • 2018 小回顾

    摘要:不过今儿与往年不同的是昨晚突然发高烧,今儿都没能去上班,感谢我的小可爱在照顾我。尤其要感谢小可爱,给了我很多支持。在这一年里小可爱的厨艺越来越棒,美滋滋,嘿嘿。 年底了,惯例做个小回顾,对这一年做个总结,也对下一年大致做个规划。 不过今儿与往年不同的是昨晚突然发高烧,今儿都没能去上班,感谢我的小可爱在照顾我。这篇文章也是躺在床上用手机编辑的。 还是按照惯例从工作,生活两方面来说。先聊聊...

    HelKyle 评论0 收藏0

发表评论

0条评论

wyk1184

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<