实战容器编程好基友之Visual Studio Code + Docker篇

前言

就在上星期，微软connect()大会新鲜在纽约召开，现场真是锣鼓喧天，鞭炮齐鸣，红旗招展，people mountain people sea。第一个演示就是Chris Dias大叔用VSCode 直接在IDE里面编译和运行docker。看完后十分激动，立马蠢蠢欲动，但又担心能不能在中国使用这个功能，因为从国内访问dockerhub的速度十分的慢而且不稳定。终于经过一系列的踩坑，终于找出了一些办法，下面分享出来。

准备工作

我这里用的是一个干净的OS X环境：
1. 首先当然先装VSCode了。安装地址https://code.visualstudio.com/
2. 安装nodejs，我们要用它来装各种依赖包
3. 安装mongodb，参考这篇文档，也可以不安装后面我会介绍。
4. 安装docker for mac。
5. 因为国内访问dockerhub很慢，我找了一个国内的公有镜像源:XX云（避免广告之嫌，大家可以自行搜索国内著名的公有Hub），国内也有很多其他的选择，这里只是做一个示例。

OK! 都弄好了就开始干活了。这里我们就用Chris大叔在connect上面演示用的项目作为示例了，项目地址clone地址https://github.com/scotch-io/node-todo.git
打开VSCode，按command +shift + p，在命令窗口输入git clone 然后copy git地址。

趁着clone项目的时候，咱们去装今天的主角，vscode extension：docker－support，在extensiontab输入dockersupport，选第一个安装。

装好以后，再按command +shift + p，在命令窗口输入docker，我们会看到一系列的docker命令

在我们构建docker之前，我们先对源代码做一些修改，Chris大叔在代码里面埋了一个小坑，我们打开server.js文件，会看到这么一段代码

我们定位到localurl然后按f12，会看到实际是他将数据库连接字符串硬编码了。这里我们稍微修改下，传入一个环境变量，让数据库连接字符串可以在运行时动态修改，这个稍后会用到。修改如下

下面就要配置我们的docker了。
首先我们需要先新建一个Dockerfile啊。老办法，command＋shift＋P然后输入docker，选择adddocker file to workspace，选择node.js环境，输入我们要暴露的端口号，这里我们用8080.一个完整的Dockerfile就生成了，是不是很容易?

FROM node:latest
COPY package.json /tmp/package.json
RUN cd /tmp && npm install --production
RUN mkdir -p /usr/src/app && mv /tmp/node_modules/usr/src
WORKDIR /usr/src/app
COPY . /usr/src/app
EXPOSE 8080
CMD node server.js

但是仔细看上面的Dockerfile，我们会发现它会使用一个基础的node镜像，因为我们本地没有，所以它会默认从Docker hub 上面去下载，考虑到国内这个龟速的下载速度，我们需要改成国内一个镜像地址。一个镜像的名称结构默认是这样的：{镜像地址}/{用户名}/{镜像名称}:{标签}，利用这种方式我们可以指向自定义的镜像地址，这里用XX云的地址作为例子index..com/docker_library/node:latest，这样它就会从国内的公有镜像下载。
好了，这里我们在vscode快捷命令窗口再次输入docker run，选择我们刚生成的Dockerfile，然后输入我们要编译的docker镜像的名称，这里要注意，为了后面能把镜像推回指定的国内公有镜像，我们在生成镜像时也用一样的命名规则例如命名为index..com/{用户名}/node-todo:latest.敲回车就会开始编译过程。在terminal的输出如下

我们会看到，它首先去我们指定的位置下载基础node镜像，然后按照Dockerfile的配置执行环境的配置。
好了，我们要运行先看下效果，输入docker run , 我们会发现vscode会很贴心的把你本机的镜像列出来，你只需要选择你刚生成的镜像就可以了。哈哈，终于可以很容易的跑起来了。别高兴的太早，看一下命令行的输出，你会发现有些错误:

这是因为node-todo这个项目在运行时要连接一个mongodb，而它默认指向了localhost，这怎么办呢，在docker run 命令的时候似乎只能指定镜像名称，没办法制定其他参数。我们再仔细看vscode的docker相关命令,支持docker-compose的。我们再看下我们的项目文件，之前当我们在用命令添加Dockerfile的，vscode还顺带添加了docker－compose.yml文件，这就方便了。打开docker－compose文件，修改如下

这里我们要注意一个地方就是environment, MONGODB是我们之前修改代码时传入的系统变量，这里我们通过compose文件把这个变量在运行时传入，这样就可以根据不同的环境，动态的连接不同的数据库。如果你本机安装了mongodb可以把它替换成本机的连接字符串，如果你本机没有mongodb也没有关系，通过这个链接，申请一个azure1元试用，可以免费用1个月。然后登录www.portal.azure.cn 通过，新建>database,选择支持mongodb协议的documentDB, 根据提示可以很容易的建出一个documentDB.这样就可以免去你自己维护一个数据库的苦恼。

我们配置好了compose文件之后，再次在vs code中按command＋shift ＋p, 输入docker，选择dockercompose up, 再选择我们之前修改的compose 文件。
让我们打开浏览器，输入http://localhost:8080， ta-da，熟悉的页面出来了。

最后我们还想把我们镜像推回镜像仓库，这里需要用快捷键control+shift+`在vs code里面起一个命令行，然后输入dockerlogin {国内公有镜像地址}。登录以后，通过快捷命令行输入dockerpush选择我们生成的镜像，然后就耐心等待吧
好的今天就先简单介绍下vs code docker开发的支持。Docker-supportextension是一个完全开源的项目，大家如果有任何的想法和修改意见，可以访问https://github.com/Microsoft/vscode-docker讨论。