为了账号安全,请及时绑定邮箱和手机立即绑定

想开发Angular项目,但是没有开发环境?使用Docker So Easy!

2018.05.21 15:29 5154浏览

(首先,继续推荐我的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进行开发了。
图片描述

Angular项目的运行

等我们开发到一定程度以后,可以非常方便的通过 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,大家就可以尽情的玩耍了!!

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

11人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消