在Docker中轻松享受Angular的乐趣

嗯，我觉得如果只是试一下的话，StackBlitz是一个非常出色的选择。请务必使用它。

但是，如果你想要在命令行界面(cli)上做一些小小的操作，或者想要做一些稍微复杂的事情，我认为选项上也有docker的选择。虽然普通的安装可能更为理想，但是考虑到可以随时丢弃(discard)它，如果只是为了试用的话，使用docker也是可以的。

目录

1. 编写Docker文件

1. 创建Angular应用程序

进行简单的测试运行

创建Docker文件。

我在找docker的映像文件，但找不到，所以将使用nodejs的映像文件来创建。

$ mkdir sample && cd sample
$ touch Dockerfile

根据类似Angular的设置，我们将获取node的镜像并安装angular/cli。

FROM node:10.16.3-alpine
WORKDIR  /myapp
CMD [ "npm", "install", "-g", "@angular/cli" ]

由于Angular的开发服务器在端口4200上运行，因此添加端口和将整个项目绑定在一起是很麻烦的。

version: "3.7"

services:
  client:
    build: .
    tty: true
    ports:
      - "4200:4200"
    volumes:
      - type: bind
        source: .
        target: /myapp

当前的树结构如下所示。

$ tree -l
.
├── Dockerfile
├── README.md
└── docker-compose.yml

创建Angular应用程序

在进行流程时，创建docker容器并进入其中来创建项目。

创建Docker容器

$ pwd
project/path
$ docker-compse up

在这里花费了不少时间，还顺便给安装了 angular/cli。

2-2. 创建 Angular 应用程序

访问已创建的容器，并开始创建Angular项目。

我想直接在项目目录下创建该文件夹，但由于 Schematics 会报错，所以我会先创建一个 client 文件夹，然后把文件放进去。（nestjs可以这样做。。。）

$ docker exec -it CONTAINER_NAME bash
$ ng new client
# routingとstyleの質問に答えるとAngular applicationが作成されていきます。
# Google のPrivacy Policyの質問もいつのまにか増えた。

2-3. 让它稍微移动一下

我会稍微移动一下。
虽然我会启动服务器并让你在屏幕上看到情况。

# Containerの内部に入り、
$ docker exec -it CONTAINER_NAME bash
# hostをかえて、dev serverを起動させます。
$ npm run start -- --host=0.0.0.0

如果您从浏览器访问localhost:4200，并且能够看到下面的页面，那就说明没问题了。虽然作为开发环境更好使用更专业的设置，但我认为只是试试的话，这个水平也足够了。