前端工程師學Docker ？ 看這篇就夠了 【原創精讀】

前端工程師，爲何要學習Docker ?

傳統的虛擬機，很是耗費性能

Docker能夠當作一個高性能的虛擬機，而且不會浪費資源，主要用於Linux環境的虛擬化，相似VBox這種虛擬機，不一樣的是Docker專門爲了服務器虛擬化，並支持鏡像分享等功能。前端工程師也能夠用於構建代碼等等

目前看，Dokcer不只帶火了GO語言，還會持續火下去

首先，咱們看看傳統的虛擬機和Docker的區別

傳統的虛擬機：

Docker:

能夠看到，傳統的虛擬機是每開一個虛擬機，至關於運行一個系統，這種是很是佔用系統資源的，可是Docker就不會。可是也作到了隔離的效果

Docker容器虛擬化的優勢:

1. 環境隔離

Docker實現了資源隔離，實現一臺機器運行多個容器互不影響。

1. 更快速的交付部署

使用Docker，開發人員能夠利用鏡像快速構建一套標準的研發環境，開發完成後，測試和運維人員能夠直接經過使用相同的環境來部署代碼。

1. 更高效的資源利用

Docker容器的運行不須要額外的虛擬化管理程序的支持，它是內核級的虛擬化，能夠實現更高的性能，同時對資源的額外需求很低。

1. 更易遷移擴展

Docker容器幾乎能夠在任意的平臺上運行，包括烏力吉、虛擬機、公有云、私有云、我的電腦、服務器等，這種兼容性讓用戶能夠在不一樣平臺之間輕鬆的遷移應用。

1. 更簡單的更新管理

使用Dockerfile，只須要小小的配置修改，就能夠替代以往的大量的更新工做。而且全部修改都是以增量的方式進行分發和更新，從而實現自動化和高效的容器管理。

正式開始

本文撰寫於2019年10月13日

電腦系統：Mac OS

使用最新版官網下載的Docker

如下代碼均手寫，可運行

下載官網的Docker安裝包，而後直接安裝

https://www.docker.com/

Docker官網下載地址
安裝後直接打開

打開終端命令行，輸入docker,會出現如下信息，那麼說明安裝成功

下載安裝成功後，首先學習下Docker的兩個核心知識點

container(容器)和image(鏡像)

Docker的整個生命週期由三部分組成：鏡像（image）+容器（container）+倉庫（repository）

思惟導圖以下：

該如何理解呢？

每臺宿主機（電腦），他下載好了Docker後，能夠生成多個鏡像，每一個鏡像，能夠建立多個容器。發佈到倉庫時，以鏡像爲單位。能夠理解成：一個容器就是一個獨立的虛擬操做系統，互不影響，而鏡像就是這個操做系統的安裝包。想要生成一個容器，就用安裝包（鏡像）生成一次

上面就是Docker的核心概念，下面開始正式操做

補充一點：若是想深刻Docker , 仍是要去認真學習下原理，今天咱們主要講應用層面的

首先，咱們回到終端命令行操做

輸入:

docker images

若是你的電腦上以前有建立過的鏡像，會獲得以下：

若是沒有的話就是空～

咱們首先建立一個本身的鏡像

先編寫一個Node.js服務

建立index.js

// index.js
const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
   ctx.body = 'Hello docker';
});

app.listen(3000);

而後配置package.json文件

{
    "name": "app",
    "version": "1.0.0",
    "private": true,
    "scripts": {
      "start": "node server.js"
    },
    "dependencies": {
      "koa": "^2.5.0"
    }
   }

正常狀況下 使用

npm start 或 node index.js 就能夠啓動服務
但是咱們這裏須要打包進Docker中，這裏就須要寫一個配置文件dockerfile

vsCode有自然插件支持

在目錄下新建文件dockerfile，加入以下配置

FROM  node 
ADD . /app/
EXPOSE 3000
WORKDIR /app
RUN npm install
CMD ["node","./index.js"]

解釋一下，上面這些配置的做用

FROM 是設置基礎鏡像，咱們這裏須要Node

ADD是將當前文件夾下的哪些文件添加到鏡像中 參數是 [src,target]

這裏咱們使用的 . 意思是全部文件，固然跟git同樣，能夠配置ignore文件

EXPOSE是向外暴露的端口號

WORKDIR是說工做目錄，咱們這裏將文件添加到的是app目錄，因此配置app目錄爲工做目錄，
這樣就不用在命令行前面加/app了

RUN是先要執行的腳本命令

CMD是執行的cmd命令

能夠想想，咱們打包好鏡像後，而後啓動鏡像會發生什麼？

文件編寫完，使用命令打包鏡像

使用命令打包已經好的文件目錄

docker image build ./ -t app

打包後出現提示：

此時咱們查看Docker鏡像，使用命令：

docker images

咱們能夠清楚看到，app鏡像已經打包成功，下面咱們啓動它

docker run -p 8000:3000 app

使用上面命令便可啓動咱們的鏡像，這時咱們在命令中輸入

curl 127.0.0.1:8000

獲得返回內容

Hello docker

瀏覽器輸入: 127.0.0.1:8000 便可訪問到頁面～

以上說明，咱們的第一個Docker鏡像已經制做成功

有人可能會以爲到這裏，鏡像和容器有點混淆了，不是先有鏡像再有容器嗎？

實際上是咱們啓動的鏡像有腳本命令幫咱們啓動了服務，因而Docker幫咱們自動建立了容器

查看Docker容器命令：

docker ps -a 列出全部容器
不加 -a 僅列出正在運行的，像退出了的或者僅僅只是建立了的就不列出來
docker container ls 列出當前運行的容器

輸入上面 docker container ls

獲得結果

原來Docker看咱們啓動了腳本服務，幫咱們自動生成了容器？

下面咱們來一個生成鏡像，再生成容器，最後手動啓動容器的例子

此次咱們配置，加入Nginx反向代理服務器

首先,建立用戶須要看到的html文件

這裏咱們給一個普通的 hello-world內容的index.html文件便可

而後建立dickerfile文件,配置以下，將index.html文件添加到對應的位置

FROM nginx

COPY ./index.html /usr/share/nginx/html/index.html

EXPOSE 80

對外暴露端口號80

這裏特別提示：配置文件怎麼寫，根據你的基礎鏡像來，百度基本都能找到，不用糾結這個

此時的文件結構：

老規矩，開始打包

docker build ./ -t html

打印信息：

輸入終端命令：

docker images

獲得結果：

新的鏡像html已經構建成功，可是此時查看容器，是沒有正在運行的

輸入命令：

docker container ls //查看正在運行的全部容器
docker container ls -a //查看全部容器
獲得結果是：

能夠確認的是，咱們建立鏡像不會自動生成和啓動容器

咱們手動生成容器

docker container create -p 8000:80 html

此時命令行返回 一段值

輸入

docker container ls

沒有顯示有任何啓動的容器，這時候咱們手動啓動

輸入

docker container start ***(上面那段值)

再重複 docker container ls 命令

獲得結果

此時訪問localhost:8000便可正常訪問頁面～

至此，咱們能夠肯定，建立鏡像只要不啓動，不會生成容器，更不會運行容器

那怎樣將Docker用在前端的平常構建中呢？

咱們使用gitHub+travis+docker來造成一套完整的自動化流水線

只要咱們push新的代碼到gitHub上，自動幫咱們構建出新的代碼，而後咱們拉取新的鏡像便可（gitLab也有對應的代碼更新事件鉤子，能夠參考那位手動實現Jenkens的文章）

首先咱們先進入 Travis CI 官網配置，註冊綁定本身的gitHub帳號

而後在左側將本身須要git push後自動構建鏡像的倉庫加入

接着在項目根目錄配置 .travis.yml 文件

language: node_js
node_js:
  - '12'
services:
  - docker

before_install:
  - npm install
  - npm install -g parcel-bundler

script:
  - parcel build ./index.js
  - echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
  - docker build -t jinjietan/mini-react:latest .
  - docker push jinjietan/mini-react:latest

每次更新push代碼，都會下載，而後執行打包命令，這樣你下載的鏡像就是有最新的代碼。再也不須要每一個人下載打開鏡像再去build

爲了下降複雜度，這裏使用了Parcel打包工具，零配置

更改dockerfile內容，將parcel打包後的內容COPY進容器

FROM nginx
COPY ./index.html /usr/share/nginx/html/
COPY ./dist /usr/share/nginx/html/dist
EXPOSE 80

添加好了你的庫以後，選擇這裏的設置

而後添加兩個環境變量：

DOCKER_USERNAME和DOCKER_PASSWORD

這裏，我將我編寫的mini-react框架源碼，放入docker中，而後使用parcel打包工具打包，再用nginx反向代理～

特別提示：這裏的Docker容器，想要後臺運行,就必須有一個前臺進程。容器運行的命令若是不是那些一直掛起的命令（好比tcp，ping），就是會自動退出的

經過 docker ps -a 能夠看到容器關閉的緣由

注意 ：jinejietan/mini-react應該換成你的用戶名/包名，再push代碼

這是思惟導圖：

當配置成功，代碼被推送到gitHub上後，travis-ci幫咱們自動構建發佈新鏡像

必定要學會使用: docker ps -a 查看容器的狀態

成功的提示：

至此，發佈，自動構建鏡像已經完成

正式開始拉取鏡像，啓動容器

咱們剛纔發佈的鏡像名稱是：jinjietan/mini-react

先使用下面幾條命令

docker中 啓動全部的容器命令
 
docker start $(docker ps -a | awk '{ print $1}' | tail -n +2)
docker中 關閉全部的容器命令

docker stop $(docker ps -a | awk '{ print $1}' | tail -n +2)
docker中 刪除全部的容器命令

docker rm $(docker ps -a | awk '{ print $1}' | tail -n +2)
docker中 刪除全部的鏡像

docker rmi $(docker images | awk '{print $3}' |tail -n +2)
tail -n +2 表示從第二行開始讀取

清除當前宿主機上面全部的鏡像，容器，依次執行

而後使用:

docker image pull jinjietan/mini-react:latest

拉取鏡像，這時候須要下載

拉取完成後，使用

docker images

能夠看到jinjietan/mini-react:latest鏡像已經存在了

咱們使用

docker container create -p 8000:80 jinjietan/mini-react:latest

建立這個鏡像的容器，而且綁定在端口號8000上

最後輸入下面的命令，便可啓動mini-react框架的容器

docker container start  ***(上面create的返回值)

瀏覽器輸入 127.0.0.1:8000 發現，訪問成功，框架生效。

Docker的使用，咱們大體就到這裏，我的認爲，用Docker比不用好，這個技術已經快跟TypeScript同樣，到不學不行的階段了。

並非說你非要用它，而是好比說，你若是不怎麼懂TypeScript，你就沒辦法把現在那些優秀庫的大部門的源碼搞得那麼清楚。

愈來愈多的技術在依賴Docker

固然，其實這個mini-react框架源碼也是不錯的，若是有興趣能夠了解如下，源碼都在：

mini-react框架+鏡像配置源碼，記得切換到diff-async分支哦～

https://github.com/JinJieTan/...

若是以爲寫得不錯，能夠右下角點個在看

關注一下個人微信公衆號：前端巔峯 ～ 回覆加羣便可加入大前端交流羣

主要注重技術點：即時通信，跨平臺重型應用開發，全棧工程師方向前沿技術