想開發Angular項目，但是沒有開發環境？使用Docker So Easy!

來自專欄猿論

不管是的開發還是學習Angular，環境是一個很大的問題，大家要在自己電腦上搭建一個Angular的開發測試環境還是非常麻煩的，請大家自行百度「搭建Angular開發環境」。OMG，要安裝一堆東西。

但是有了Docker，一切變得簡單至極，你的電腦只需要安裝了Docker就萬事大吉了。下面我們一起看一看。

測試環境

我們以MAC為例，請安裝好Docker

docker versionClient: 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: swarmServer: 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/xiaopeng163/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在本地如下所示。

$ lsdemo$ cd demo$lsREADME.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.042cadd81f28e1705ce20edcdc42a765f5dcb1d5181c4222548a984cfd37e3a95$ docker psCONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES42cadd81f28e 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 installnpm 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，大家就可以盡情的玩耍了！！

推薦課程：

Docker環境下的前後端分離項目部署與運維-慕課網實戰

系統學習Docker，踐行DevOps理念-慕課網實戰

作者：麥兜搞IT

鏈接：https://www.imooc.com/article/30241

來源：慕課網

本文原創發佈於慕課網 ，轉載請註明出處，謝謝合作

推薦閱讀：

【重磅】認證作者招募 | 打造個人品牌 so easy ！

記一次tablayout的tabView偷偷自帶padding的問題

Vue.js、vue安裝步驟、單文件組件、模板指令

TensorFlow深度學習（一）：環境搭建

實戰-動手開發第一個區塊鏈投票DAPP