首先

这是一篇为了在公司内讲解Angular而创建的文章。本文将解释如何使用Docker来尝试Angular而不污染环境。

本文撰写时使用的版本是 Angular 6.1。

Docker环境将预先准备好。

准备与Docker相关的文件。

目录结构如下。

.
├── Dockerfile
└── docker-compose.yml

准备一个Dockerfile。

FROM node:10.8.0-stretch

RUN npm install -g @angular/cli && ng config -g cli.packageManager yarn
WORKDIR /projects

我选择的 Node.js 版本不是当前的 LTS 版本，而是未来的 LTS 版本，即版本 10 系列。为了确保文章中所述的可复现性，我详细指定了版本直到 10.8.0。在选择版本范围内，您可以根据要使用的 Angular 版本自行选择。

选择“stretch”是因为它最初就是一个功能齐全的开发环境，这样会更加方便。

我已经选择了yarn作为Angular使用的包管理器。

只用Docker命令就可以处理容器，但为了更方便，我们会使用Docker-compose。

准备一个docker-compose.yml文件。

version: '3'

services:
  node:
    build: .
    ports:
      - "4200:4200"
    volumes:
      - ".:/projects"
    tty: true

端口号4200是Angular开发服务器使用的。
为了使当前目录在容器的/projects目录中可见，进行了卷指定。
由于此容器不启动任何服务，因此需要指定tty: true，否则容器在启动时会立即退出，请注意。

在Docker容器上进行工作。

在包含docker-compose.yml的目录中运行以下命令，创建并启动Docker容器。由于首次需要构建镜像，所以可能会花费一些时间。

docker-compose up -d

当您启动后，您可以通过以下方法进入控制台。

docker-compose exec node bash

如果你不想使用根目录，请使用以下选项。我们使用预先存在的 node 用户。

docker-compose exec --user=node node bash

退出控制台后，执行以下步骤以停止容器。

docker-compose down

尝试使用Angular

Angular有官方的日语版，并且教程和参考资料也非常齐全。请参考”创建Angular 6项目后首先要做的事情”。

请注意，在启动开发服务器时需要加上参数–hots=0.0.0.0才能从容器外部访问。

ng serve --host=0.0.0.0

只使用 ng serve 的话，只能从本地主机上访问，因为对于Docker容器而言，本地主机也是指容器本身，并且主机端变成了外部。

总结

我建立了一个可以进行Angular开发的Docker环境。现在你可以轻松地尝试Angular而不必担心污染你的开发环境。