你好，我是@yusuke_yasuo。

我想要写一下用 Docker 在 Mac 和 Windows 上创建一个可以在一个命令下运行的 Angular 开发环境的方法。

此次雖然不在範圍之內，但為了整備CI/CD相關工作，我試著使用Angular CLI（https://github.com/angular/angular-cli）進行開發。

使用Docker的原因

这次使用Docker主要有两个原因：
1. 因为我们公司有Mac用户和Windows用户，所以要吸收由于环境差异引起的问题。
2. 由于未来会有新成员加入，所以需要缩短环境建设的时间。

這次的目標

我计划将Angular公式网站的教程(https://angular.io/docs/ts/latest/tutorial/)能在Docker上运行作为本次的目标。

以下是已经验证过的 GitHub 仓库链接：
https://github.com/yusukeyasuo/angular-cli-example

先不考虑Docker，直接开始制作。

首先，不考虑Docker，只需按照教程进行操作，进行雏形的创建或添加组件和类时，使用Angular CLI进行创建。

接下来，我们需要添加Docker的配置。

为了使用Docker，添加了以下四个文件：
1. .dockerignore
2. Dockerfile
3. docker-compose.yml
4. npm-shrinkwrap.json

1. .dockerignore文件

这个文件可以像.gitignore一样在Docker中指定要忽略的文件。当从Dockerfile构建镜像时，Docker会将包含Dockerfile的目录打包成tar文件并发送给守护进程，如果包含不需要的文件，构建过程会花费额外的时间，因此需要忽略的文件和目录应添加在这里。

node_modules
typings

2. Dockerfile

2. Dockerfile文件

这是一个简单的文本格式文件，用于总结和描述Docker容器的配置内容。

FROM kenjiskywalker/dockerfile-angular-cli-with-phantomjs
d
ARG APP_HOME

RUN mkdir -p $APP_HOME


COPY package.json npm-shrinkwrap.json $APP_HOME/
WORKDIR $APP_HOME

RUN npm install .

3. Docker组合配置文件。

这是一个描述Docker容器启动选项的文件，使用了yaml格式。

version: '2'
services:
  serve:
    build:
      context: .
      args:
        - APP_HOME=/myapp
    command: ng serve --host 0.0.0.0
    ports:
     - "4200:4200"
    volumes:
     - .:/myapp/
     - /myapp/typings
     - /myapp/node_modules
  test:
    build:
      context: .
      args:
        - APP_HOME=/myapp
    command: ng test --single-run
    ports:
     - "4200:4200"
    volumes:
     - .:/myapp/ 
     - /myapp/typings
     - /myapp/node_modules
  e2e:
    build:
      dockerfile: Dockerfile-e2e
      context: .
      args:
        - APP_HOME=/myapp
    # command: ng e2e
    ports:
     - "4200:4200"
    volumes:
     - .:/myapp/
     - /myapp/typings
     - /myapp/node_modules

4. npm-shrinkwrap.json

一个文件中记录了安装在node_modules中的所有模块的版本信息。

{
  "name": ":angular-cli-example",
  "version": "0.0.0",
  "dependencies": {
    "@angular/common": {
      "version": "2.2.1",
      "from": "@angular/common@2.2.1",
      "resolved": "https://registry.npmjs.org/@angular/common/-/common-2.2.1.tgz"
    },
    "@angular/compiler": {
      "version": "2.2.1",
      "from": "@angular/compiler@2.2.1",
      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-2.2.1.tgz"
    },
    "@angular/core": {
      "version": "2.2.1",
      "from": "@angular/core@2.2.1",
      "resolved": "https://registry.npmjs.org/@angular/core/-/core-2.2.1.tgz"
    },
    "@angular/forms": {
      "version": "2.2.1",
      "from": "@angular/forms@2.2.1",
      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-2.2.1.tgz"
    },
    "@angular/http": {
      "version": "2.2.1",
      "from": "@angular/http@2.2.1",
      "resolved": "https://registry.npmjs.org/@angular/http/-/http-2.2.1.tgz"
    },
    "@angular/platform-browser": {
      "version": "2.2.1",
      "from": "@angular/platform-browser@2.2.1",
      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-2.2.1.tgz"
    },
    "@angular/platform-browser-dynamic": {
      "version": "2.2.1",
      "from": "@angular/platform-browser-dynamic@2.2.1",
      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-2.2.1.tgz"
    },
    "@angular/router": {
      "version": "3.2.1",
      "from": "@angular/router@3.2.1",
      "resolved": "https://registry.npmjs.org/@angular/router/-/router-3.2.1.tgz"
    },
    "core-js": {
      "version": "2.4.1",
      "from": "core-js@>=2.4.1 <3.0.0",
      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.4.1.tgz"
    },
    "rxjs": {
      "version": "5.0.0-beta.12",
      "from": "rxjs@5.0.0-beta.12",
      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.0.0-beta.12.tgz"
    },
    "symbol-observable": {
      "version": "1.0.4",
      "from": "symbol-observable@>=1.0.1 <2.0.0",
      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.4.tgz"
    },
    "ts-helpers": {
      "version": "1.1.2",
      "from": "ts-helpers@>=1.1.1 <2.0.0",
      "resolved": "https://registry.npmjs.org/ts-helpers/-/ts-helpers-1.1.2.tgz"
    },
    "zone.js": {
      "version": "0.6.26",
      "from": "zone.js@>=0.6.23 <0.7.0",
      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.6.26.tgz"
    }
  }
}

结果

通过执行上述操作，

$ git clone https://github.com/yusukeyasuo/angular-cli-example
$ cd angular-cli-example
$ docker-compose up serve

只需这么简单，Angular的开发环境就能完善。

哎呀，Docker太方便了~