前言
由于去年的烧烤摊营收达预期,烧烤哥给自己买了台新电脑。但新电脑上啥都没有,导致晚上收摊后回去无法加班,很是苦恼。
为了不影响烧烤摊今年的业绩,烧烤哥还是在自己的游戏本(玩游戏的本子)上搭起了一个前端开发环境。
怎么搭?
面临的一个问题就是,该怎么搭这个环境
?
我们先来捋一捋,烧烤哥的业务涉及到web开发、taro小程序
。所以只要电脑上有node、git
,然后再利用npm去安装一些全局库(如typescript、taro-cli
等)不就可以了嘛?
确实如此,但烧烤哥不是一个容易满足的人,不然也不会去搞烧烤了。
在烧烤哥的认知范围内,有如下方式可以搭建一个开发环境。
直接安装不考虑,属于烧烤哥能力圈的舒适区(能力圈可以分为舒适区、拉伸区和困难区,处在拉伸区时个人成长最快
),做了等于浪费时间。虚拟机呢估计每次启动环境得先花个半小时(夸张修辞手法)也不考虑。而使用docker
呢,正好处于烧烤哥的拉伸区,非常值得尝试。
初探docker
本来开发,只要能speak javascript就ok了,现在还要能speak docker。
docker的一些概念
docker是什么就不多说了,先来了解下本文会涉及到的一些概念
。
image
:镜像,是一个只读模版,用来创建容器。container
: 容器,是一个可运行的镜像实例。Dockerfile
: 镜像构建的模版,描述镜像构建的步骤。
所以它们之间的关系是,通过Dockerfile构建出镜像,然后通过镜像来创建容器,程序就跑在容器中
。并且一个镜像可以随意创建N个容器,各个容器间相互隔离。
写一个hello world
来做个demo,写一个hello world的node程序,然后在容器里面跑该程序。
照葫芦画瓢,编写代码文件index.js -> 编写Dockerfile -> image -> container
.
编写代码文件
创建一个docker-test目录,在里面新建一个index.js,键入以下指令
console.log('hello world');
编写Dockerfile
继续在里面新建一个Dockerfile文件(不需要后缀),键入以下指令
FROM node:15.10.0-slim
COPY . ./demo
WORKDIR /demo
CMD node index.js
简单解释一下这几个指令。
FROM node:15.10.0-slim
就是说我们的镜像会继承 node:15.10.0-slim 这个镜像,这个镜像在哪里找呢?没错,你可能也猜到了,在Docker交流网站Docker Hub中。
COPY . ./demo
是把当前目录拷贝到镜像的/demo目录下,当然你也可以使用.dockerignore来排除你不需要打包的文件。
WORKDIR /demo
类似于 cd /demo
。
CMD node index.js
容器启动后执行node index.js
命令。
构建镜像
在bash中运行 docker image build -t demo .
构建好之后,运行docker image ls
就可以查看到demo镜像了。
运行容器
运行docker container run demo
,不出意外你会在hello world打印出来。
docker说到这里就差不多了,下面我们来看看如何搭建开发环境。
搭建开发环境
我们的开发环境需要全局安装有node、git、typescript、taro-cli
。
先让项目跑起来
我们先让项目在本地跑起来,假设机器上已经有了一个项目,该项目是用create-react-app创建的项目。
整体步骤跟上面的demo是一致的,只是把index.js
替换成了项目文件
,还有一个区别是由于是开发运行(不是构建项目后运行),所以我们需要安装package.json中的依赖。
其实整体区别只在Dockerfile,下面来看看Dockerfile。
FROM node:15.10.0-slim
COPY . ./demo
WORKDIR /demo
RUN npm install
CMD npm run start
构建iamge:docker image build -t react-demo .
。
运行容器: docker container run -p 3000:3000 react-demo
。
这里运行容器时需要指定-p参数
将容器的3000端口映射到本机的3000端口。
此时,react项目就跑起来了。
存在问题
可以看到,按开发的模式来说,这样是存在问题的。比如:
- 将代码打包进镜像中,每次修改代码都必须要
重新构建镜像
- 打包出来的镜像指包含node环境,
缺少开发时需要的依赖
我们希望的是,通过容器来提供开发时需要的依赖,然后通过vscode修改的代码实时跑在容器中
。
解决
构建自己开发镜像
要让我们的镜像提供开发时需要的依赖,其实就是让我们的镜像包含node(typescript、taro-cli)、git就行了。
其实我们之前的node镜像node:15.10.0-slim
启动后的容器,可以看成一个只带有node环境虚拟化的linux虚拟系统
,我们可以进入到容器里面去看看,运行docker container run -it node:15.10.0-slim /bin/bash
就可以进入到容器的bash中。
所以只需要依赖现有的node镜像,并在构建我们的镜像时安装需要的程序即可。来看看Dockerfile。
FROM node:15.10.0-slim
RUN apt-get update && apt-get install -y git
RUN npm install -g typescript @tarojs/cli
这次我们没有把代码打包到镜像中了,而是执行了apt-get upgrade && apt-get install git
和 npm install -g typescript @taro-cli
两个命令。
构建镜像:docker image build -t frontend-dev .
。
运行容器: docker container run -it frontend-dev /bin/bash
。
进入到容器,就可以看到我们安装的程序了。
此时,我们的镜像就已经具备开发时需要的环境了。
挂载点
docker提供了挂载点,可以让容器访问我们本机的文件系统。
只需要在我们的项目中启动容器时指定-v 参数
就行,即docker container run -v "${pwd}:/demo" -it frontend-dev /bin/bash
。
你会发现我们的frontend-dev镜像
启动的容器中多了/demo目录
,而且进去里面可以看到就是我们的项目。
然后在/demo目录
中执行项目启动命令npm run start
,我们的项目就运行起来了。
这时你就可以使用vscode修改我们的项目代码了,所有的修改都会跟/demo目录
同步。
此时,我们的镜像就只做环境依赖作用了,我们也可以愉快的加班了。
不过大家肯定会说,这种方式好是好,但是也太麻烦了吧。
利用vscode
Remote-Containers
其实我们上面做的,vscode有对应的插件已经帮我们完成了。
怎么用?
用三张图告诉你怎么用。
只要你机器装了docker,按上面三步走下来,你的代码就在容器中了。
大家肯定又要说了,烧烤哥你怎么不早说啊?
因为烧烤哥想说,其实上面说的都不重要
。对!你没听错,是都不重要
。
一个想法
其实烧烤哥这篇文章想说的,是有一个想法
。
Remote-SSH
我们先再来看一个东西,一个vscode的插件。
看名字就能知道这个插件是干啥的,它能让我们利用vscode通过ssh登录到一个远程机器上
,登录上去之后看到的目录就是远程目录了,并且对文件的修改,都是实实在在的修改远程机器上的文件。
这也就意味着我们可以通过vscode从本地直接编辑远程服务器的文件
。
想法
结合上述说的,烧烤哥有个想法,就是:
利用linux系统的
多用户多任务特点
,和docker快速搭建、迁移环境的能力
,团队在一个远程机器上进行业务开发
。
这样做的优点
是:
方便复制环境
:有新人来时,只需要在远程机器上为ta开一个账户,然后把镜像(或Dockerfile)给ta,一个新的个人开发环境就搭建好了。方便统一环境
:团队中大家可以使用同一个image,有需要时,可以统一对环境依赖进行更换或升级。方便随时随地加班
:在远程开发的话,对本地终端基本就没有什么限制了。本地装个vscode(甚至是有个浏览器)就能随时随地愉快的加班了。
最后
想说的都放在文章里了,烧烤哥也该去加班了。
如果决定对您有帮助的话,麻烦点个赞吧~!