利用Docker+Git快速搭建前端开发环境
发布在Docker && FE2015年6月15日view:6987Docker
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

Docker 的深入说明,可以参考Hello Docker.这里只是个人的Docker应用理解。

应用场景

  • 新入职人员,不熟悉团队使用工具,浪费大量时间在环境搭建
  • 公司电脑为 OS X,家里电脑为Win, 环境配置不统一
  • 服务端环境扩展plugin等,只在Linux等机器上可以运行,iMac或者Win系统无法兼容
  • 公司团队,需要统一升级node或者其他环境版本,时间成本太高
  • 。。。等

原理简单说明

  • 利用Git 来管理代码
  • 利用Docker来管理环境配置

这样理解

  • Docker根据统一的配置文件,生成一套环境,即container(类似一个虚拟机)
  • 这个container里面有团队开发所需要的环境
  • 在宿主机上,用Git管理代码,利用Shared Foldercontainer进行共享文件,进而利用container的环境进行编译,处理

对于前端代码开发的好处

  • 有了Docker,可以把所有的环境配置,都扔到一个container里面
  • OS X或者Win等宿主环境, 只需要安装一个Git进行代码管理
  • 对于前端的开发工作,可以更加集中于页面制作,逻辑书写,代码规范等更重要的地方

开始简单配置

注意

  • OSX 系统需要安装Boot2docker ,一个docker运行的环境

示意图展示

1. 含有Boot2docker的系统,例如OS X

宿主机 -> Boot2docker VM -> container

2.Linux 系统

 宿主机 -> container

从示例图,可以知道,OS X的系统与container 之间隔了一个VM。所以接下来的,container的端口映射等是与VM 进行的

配置说明

详细说明,请看My Github

配置目的
  • nginx(用于指向代理)
  • ssh(用于登陆调试)
  • vim(方便vi更改配置文件)
  • node && npm (前端最基本的包管理工具)
  • gulp && grunt(前端工作流开发工具)
  • ruby && sass ( css 预编译语言 )
。。。。

通过上面的简单配置,完全可以搭建一个干净整洁统一的前端开发环境,如果需要php等环境,可以继续在container里面安装,然后制作为一个镜像,所有团队成员,共享同一个镜像,生成container,就可以了


补充:使用docker之后的工作流

第一次安装并启动docker,请看My Github

$ docker ps

可以看到一个正在运行的container ,记住22端口对应的xxxxx端口(此端口用于SSH连接), 准备工作ok了

  • 使用Sublime 或者vim 打开本地代码(假设你的本地代码在/Users/daben下面)或者通过Git 更新本地代码。

  • 打开Terminal,

$ ssh root@$(boot2docker ip) -p xxxxx

xxxxx为端口号, 提示是否连接,写yes,提示密码,默认密码为nicai

默认共享目录在/home/data下面,对应的宿主机目录为/Users/daben/下面。这两个目录可以在启动container的时候,进行修改,详情请看My Github

  • 进入/home/data下面的任意一个前端项目中,运行gulpor grunt任务,用Sublime修改代码的同时,各种编译任务也可以很好的完成了。
评论
发表评论
5年前
赞了此文章!
5年前
赞了此文章!
5年前

@时间之刃6868 恩。我有空,补充一下,改变后的工作流程。

5年前

文章虽然不错,但是和前端统一环境配置这个标题似乎没什么关系,倒更像是Docker简介。应该说明一下在Docker中部署前端运行环境后如何结合客户端代码来进行开发,否则公司mac和家里的win又有什么却别呢?

PUBLISHED IN
Docker && FE

讲述Docker 在前端开发中的应用,以及带来的便捷之处,及使用过程

我的收藏