(首先,继续推荐我的Docker课程 系统学习Docker,践行DevOps理念课程,欢迎大家去学习)
不管是的开发还是学习Angular,环境是一个很大的问题,大家要在自己电脑上搭建一个Angular的开发测试环境还是非常麻烦的,请大家自行百度“搭建Angular开发环境”。OMG,要安装一堆东西。
但是有了Docker,一切变得简单至极,你的电脑只需要安装了Docker就万事大吉了。下面我们一起看一看。
测试环境我们以MAC为例,请安装好Docker
docker version
Client:
Version: 18.03.1-ce
API version: 1.37
Go version: go1.9.5
Git commit: 9ee9f40
Built: Thu Apr 26 07:13:02 2018
OS/Arch: darwin/amd64
Experimental: false
Orchestrator: swarm
Server:
Engine:
Version: 18.03.1-ce
API version: 1.37 (minimum version 1.12)
Go version: go1.9.5
Git commit: 9ee9f40
Built: Thu Apr 26 07:22:38 2018
OS/Arch: linux/amd64
Experimental: true
Angular项目的创建
我们这边给大家准备了一个Docker image,名字叫 xiaopeng163/angular-docker
Dockerfile也是非常简单,大家可以参考 https://github.com/oh-my-docker/angular-docker
我们这个image里安装好了Angular CLI,所以如果我们要创建一个叫做 demo
的project,在本地目录 /Users/penxiao/tmp/angular-docker
目录里,可以运行如下命令。
$ docker run --rm -it -v /Users/penxiao/tmp/angular-docker:/app xiaopeng163/angular-docker ng new demo
因为我们这里使用了 -v
volume,会把container里通过 ng create demo
创建的project映射到我们本地 /Users/penxiao/tmp/angular-docker
目录里。
产生的project在本地如下所示。
$ ls
demo
$ cd demo
$ls
README.md angular.json e2e node_modules package-lock.json package.json src tsconfig.json tslint.json
然后我们就可以使用我们顺手的IDE进行开发了。
等我们开发到一定程度以后,可以非常方便的通过 ng serve
去预览我们的项目, 注意本地Volume选择demo project的目录 /Users/penxiao/tmp/angular-docker/demo
$ docker run -d --rm --name=angular-demo -it -v /Users/penxiao/tmp/angular-docker/demo:/app -p 4200:4200 xiaopeng163/angular-docker ng serve --host=0.0.0.0
42cadd81f28e1705ce20edcdc42a765f5dcb1d5181c4222548a984cfd37e3a95
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
42cadd81f28e xiaopeng163/angular-docker "ng serve --host=0.0…" 4 minutes ago Up 5 minutes 0.0.0.0:4200->4200/tcp angular-demo
因为我们把4200端口映射到了本地,所以我们可以非常方便的预览,打开浏览器 http://127.0.0.1:4200/ 可以预览如下
如果我们修改了 package-lock.json package.json
我们可以通过npm install去安装,
$ docker run --rm -it -v /Users/penxiao/tmp/angular-docker/demo:/app xiaopeng163/angular-docker npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
up to date in 20.626s
是不是非常方便!有了docker,大家就可以尽情的玩耍了!!
热门评论
好文章
好文章