背景
很早之前就关注过docker，看过有关的资料，但是那时候docker并不支持window，使用需要使用 docker toolbox 采用VirtualBox虚拟机的方式来安装，觉得很麻烦，就一直没有尝试。
最近无意中发现docker for window发布了，可以在win10上使用，趁着最近不忙，倒腾一下。
docker安装
docker for window 跟 docker toolbox 不同，docker for window 依赖与微软的虚拟化技术Hyper V。所以我们首先要开启win10的Hyper V:
通过控制面板的程序和功能 -> 启用和关闭Windows功能查看 Hyper V 状态：
[图片上传失败...(image-45fbb1-1538453963032)]
安装非常简单，下载 docker for window 下一步安装就OK了
安装完成以后执行 docker version 查看安装结果
$ docker version
Client:
Version: 18.06.1-ce
API version: 1.38
Go version: go1.10.3
Git commit: e68fc7a
Built: Tue Aug 21 17:21:34 2018
OS/Arch: windows/amd64
Experimental: false
Server:
Engine:
Version: 18.06.1-ce
API version: 1.38 (minimum version 1.12)
Go version: go1.10.3
Git commit: e68fc7a
Built: Tue Aug 21 17:29:02 2018
OS/Arch: linux/amd64
Experimental: false
常用命令
记录一些常用命令，其他的可以执行 docker --help 查看
// 下载image
docker pull ubuntu
//查看已下载image
docker image ls
// 删除image
docker image rm <imageName>
// 运行
docker run ubuntu --name ubuntu
// 使用ubuntu image 创建一个container 并设置名字为 ubuntu
// 运行时会检测系统中有没有该image如果没有会自动调用`docker pull unbutu`下载
// 查看run参数
docker run --help
// 停止ubuntu
docker stop ubuntu
// 进入容器
docker attach ubuntu
配置vue开发环境
1. 首先打开 Docker Hub 查找看有没有可以用的image：
[图片上传失败...(image-429fb-1538453963033)]
这里我们采用 [ebiven/vue-cli](https://hub.docker.com/r/ebiven/vue-cli/)
> 如果没有满足自己需求的image，也可以自己制作，这个下次再说
2. 下载 image
```
docker pull ebiven/vue-cli
```
3. 配置命令
众所周知，window下的命令行工具不太好用，为了便于操作，我这里使用 [cmder](http://cmder.net/) 作为命令行工具
image说明文件中的命令是linux下的命令，在window下执行会出错：
```
$ docker run -it --rm -v "$PWD":"$PWD" -w "$PWD" -u "$(id -u)" ebiven/vue-cli vue
docker: Error response from daemon: the working directory '$PWD' is invalid, it needs to be an absolute path.
See 'docker run --help'.
```
在window下需要使用 `%cd%` 输出当前目录，如下：
```
docker run -it --rm -v "%cd%":/code -w /code -p 8080:8080 ebiven/vue-cli vue
// -it: 进行交互式操作
// --rm：关闭该 container 后删除文件
// -v %cd%:/code: 将执行命令的目录映射到container的/code目录
// -w /code: 设置命令执行目录为/code
// -p 8080:8080：将本机的8080端口映射为container的8080端口
```
测试一下：
```
$ docker run -it --rm -v "%cd%":/code -w /code ebiven/vue-cli vue --version
3.0.1
```
执行成功！
新建一个项目试试：
```
$ docker run -it --rm -v "%cd%":/code -w /code ebiven/vue-cli vue create test
Vue CLI v3.0.1
? Please pick a preset: default (babel, eslint)
? Pick the package manager to use when installing dependencies: Yarn
Vue CLI v3.0.1
✨ Creating project in /code/test.
⚙ Installing CLI plugins. This might take a while...
yarn install v1.9.2
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[--------------------------------------------------------------------------------------------------------------------------] 0/1041(node:23) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
Done in 162.74s.
🚀 Invoking generators...
📦 Installing additional dependencies...
yarn install v1.9.2
[1/4] Resolving packages...
[2/4] Fetching packages...
[--------------------------------------------------------------------------------------------------------------------------] 0/1045(node:50) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 42.59s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project test.
👉 Get started with the following commands:
$ cd test
$ yarn serve
```
安装成功：
[图片上传失败...(image-dfceaf-1538453963033)]
不过，上面的命令也太长了，用起来非常不方便，可以使用`cmder`的别名功能：
使用`vscode`打开cmder目录下的`config`文件夹下的`user-aliases.cmd`文件，添加如下内容:
```
node=docker run -it --rm -v "%cd%":/code -w /code ebiven/vue-cli node $*
vue=docker run -it --rm -v "%cd%":/code -w /code -p 8080:8080 ebiven/vue-cli vue $*
npm=docker run -it --rm -v "%cd%":/code -w /code ebiven/vue-cli npm $*
yarn=docker run -it --rm -v "%cd%":/code -w /code -p 8080:8080 ebiven/vue-cli yarn $*
ubuntu=docker run -it --rm -v "%cd%":/code -w /code ebiven/vue-cli bash
```
执行一下 看看效果
```
$ node --version
v10.9.0
$ vue --version
3.0.1
```
搞定！完全看不出来是在docker里面执行的命令。
4. 监控文件修改
经过上面的配置，我们就可以在主机上使用喜欢的编辑器编辑代码，通过docker执行。但是使用 `yarn serve` 命令进行开发时，会发现一个问题：在编辑器中编辑文件后，docker无法监听到文件的修改，从而重新编译、刷新页面；我们可以采用 webpack 的轮询功能解决：
在项目根目录创建`vue.config.js`文件:
```
// vue.config.js
module.exports = {
devServer: {
watchOptions: {
poll: 1000 //设置轮询时间为1秒
}
}
}
```
再次执行`yarn serve`即可。
后记
经过一天的折腾，基本上搭建好了开发环境，但是并没有正式开始开发，总觉得还有很多坑在等着我；而且使用docker编译vue项目的速度总觉得还不太满意，会不会采用这种开发方式，还得看以后的测试，有兴趣的也可以尝试一下。
网友评论