摘要：為確保系統里面沒有自帶的軟件的殘留，我們要清除一下舊版本的，雖然新系統一般都不會有就是了。更新軟件包緩存。

測試：褲襠你這頁面刷新就白屏啊，怎么了啊，而且你看這 network，怎么這些 js 這么大啊，很耗流量而且加載速度還很慢誒。

我：嗯，大佬說的是，頁面刷新白屏是因為沒有服務器沒有配置找不到資源重定向，js 可以用 CDN 或者啟動一下 gzip，這個讓后端或者運維小妹妹配一下就好了。

后端：啥，你說啥，我不會，話說，上次那個接口返回 null 的問題我還想找你，為啥我返回 null 就不行，數據庫就是 null 啊，你前端做一下判斷不就好了！

我：。。。干，我自己來！

以上的小劇場大家當成個段子看看就好了，我相信大部分的前端后端都是挺和諧的，一般來說合力懟產品才是程序員的第一要務（PM 別打我），關于劇場里提到的是否要返回 null 的問題，建議大家以后直接反手一個鏈接給后端 一千個不用 null 的理由，深藏功與名。

17年畢業到現在算算也有一年多了，前端的工作越來越得心應手，完成日常業務已經沒有大問題，前端方面對于一些比較前沿的工具也有了不少心得體會，前段時間手寫了一個 webpack 4.x 結合 vue-loader 的腳手架替換掉了公司項目里比較老舊的腳手架，自己寫的插件也在項目里面吭哧吭哧的跑的不亦樂乎，也可以帶領公司新入職的前端學習更多的姿勢了。

但是，總感覺還缺少了什么，以前寫過 PHP，對于接口如何實現的也沒有那么好奇，無非就是連接數據庫寫寫 sql，再大不了就是建建視圖查詢，用用 redis 之類的，再深入一點就是消息隊列 MQTT 結合 websocket 的應用了，那還缺少了什么，沒錯，就是服務器部署，關于這個，我很好奇！

關于工作初期，我的想法是先要有技術廣度的了解，再要技術深度的了解。曾經也有過寫腳手架寫上癮的時候，連續一個星期回家寫代碼寫到兩三點（大城市的大佬就不要吐槽我了 =3=），各種跑測試，最后出了成果成功運行在線上項目的成就感我至今還記得，但是期間碰到了不少的問題，很多問題在其他領域的人看來甚至都不是問題，只是因為自己知道的太少了，所以被自己限制住了。

想象一下，如果自己能夠掌握整個項目從零開始，從第一行代碼開始，到發布上線的整個流程，不管是前端后端服務端，自己都能夠了解到每個細節，那和后端理論起來，底氣都要足不少，不是么？=3=

廢話太多，開始正題，本篇文章可以幫助任何對 docker 有興趣的人有一個基礎的認識，最后會有一個簡單的基于 vue-cli 搭建的 nginx 服務器的實戰應用。

題主的系統環境是 windows win7 64位 系統，所以需要個 linux 系統的虛擬機，并且出于裝逼的目的，將不使用桌面版的 linux 系統，所有的操作均在命令行完成。

virtualBox 是一個開源的虛擬機軟件，相比較 VMware 他更小，且開源免費，對于本篇文章想要實現的功能，已經是非常足夠。

首先是安裝 virtualBox 虛擬機，屬于一直下一步到天亮的操作，但也附上安裝操作教程。

virtualBox 下載地址

virtualBox 安裝教程

ubuntu 是一款 Linux 系統，記住 Debian 這個單詞單詞可以在某些時候起到提示作用。另外，就我愈加深入了解服務器端，發現公司搭建更多用的是 centos，不過沒事兒，說來說去都是 linux 系統，對于用戶而言就是文件目錄或者下載工具不太一樣而已。

下一步，下載 ubuntu-server 的鏡像文件，我用的是 18.04.1 LTS 版本的，過個幾年如果這文章還會被人翻出來的話，那時候還請下載自己喜歡的版本。

ubuntu-server 下載地址

ubuntu-server 安裝教程

virtualBox

新建

這個基本上也是一直下一步到天亮的操作，值得一提的就是關于不能安裝 64位 系統的 ubuntu 的處理，有的電腦會發現新建的時候沒有 ubuntu 64位 的選項，可以的話請參考這篇文章。

開啟 BIOS 的虛擬化技術

設置

存儲

如上圖，點擊那個位置將你下載的 ubuntu-server 鏡像載入即可。

網絡

如上圖，使用橋接網卡選項，可以設置該虛擬機網絡環境為同一局域網下的另一臺設備，方便我們后續通過主機訪問虛擬機搭建的網絡。

在此，默認各位已經在虛擬機中安裝好了 ubuntu 系統，并且也成功進入了系統，在我們開始了解 docker 之前，有必要對我們所處環境的墻做一些處理，你知道的，這墻就是那墻。

ubuntu 默認安裝的下載、更新用的軟件是 apt，軟件安裝更新的時候都是從一個存放了大量軟件的地方下載的，至于從哪里下載，默認的如下。

$ cat /etc/apt/sources.list

重新設置下載源，這里還備份了一份以防不時之需。sed 指令是替換一個文件中的指定字符串為另一個字符串，注意中間的豎線分隔符號，前面是被替換的字符串，我們將地址替換為國內的源地址。

$ sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
$ sudo sed -i "s|deb.debian.org|mirrors.ustc.edu.cn|g" /etc/apt/sources.list
$ sudo sed -i "s|security.debian.org|mirrors.ustc.edu.cn/debian-security|g" /etc/apt/sources.list

更新一下 apt-get 的源的地址，這個操作我們以后會經常做。

$ sudo apt-get update

安裝我們后續需要的包，里面包括了對 https 地址的解析所用的工具包等。

$ sudo apt-get install apt-transport-https ca-certificates software-properties-common curl

為確保系統里面沒有自帶的 docker 軟件的殘留，我們要清除一下舊版本的 docker，雖然新系統一般都不會有就是了。

$ sudo apt-get remove docker docker-engine docker.io

添加 docker 的 GPG 密鑰，并添加 docker-ce 的軟件源，這告訴了 apt 去哪里下載 docker-ce。

$ curl -fsSL https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
$ sudo add-apt-repository "deb [arch=amd64] https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu $(lsb_release -cs) stable"

更新軟件包緩存。

$ sudo apt-get update

下載 docker。

$ sudo apt-get install docker-ce

設置開機的時候啟動 docker，并啟動 docker。

$ sudo systemctl enable docker
$ sudo systemctl start docker

添加當前用戶到 docker 的用戶組，以后可以不用輸入 sudo 直接使用 docker。

$ sudo groupadd docker
$ sudo usermod -aG docker $USER

更改 docker-ce 內部使用的下載鏡像的地址源，對于 ubuntu 16.04 + 的系統，我們只要在 /etc/docker/daemon.json 更改即可，注意，你可能需要 root 的權限才可以對該文件做更改。

# 使用 root 權限
$ sudo -i
$ vim /etc/docker/daemon.json
# 修改 daemon.json 為如下
{"registry-mirrors": ["https://docker.mirrors.ustc.edu.cn/"]}
# 重啟 docker 服務
$ sudo systemctl restart docker
# 記得退出當前的 root 環境
$ exit or ctrl + d

至此，對于前期環境的配置已經完成的差不多了，我們已經替換了 apt-get 下載新的軟件的源地址為國內地址，也替換了 docker-ce 下載新的鏡像時候使用的源地址為國內地址，現在讓我們來測一發 docker。

docker run 為運行一個鏡像文件，如果本地沒有找到該鏡像，會去鏡像地址地址下載拉取。如果提示 permission 之類的錯誤，但你已經做了添加當前用戶到 docker 用戶組的操作，重啟一下虛擬機即可，這是權限不夠的意思。

$ docker run hello-world

因為我們后期會用到 git 到我的 github 上拉取 vue-cli-base 的代碼，所以這里可以提前安裝一個 git。

$ sudo apt-get install git
# 配置用戶名和伊妹兒
$ git config –global user.name "你的用戶名"
$ git config –global user.email "你的伊妹兒"

然后既然是用了 vue-cli 那 nodeJs 自然是不能少的，因為我們會用 webpack 進行打包，那就順便安裝個 nodeJs，我這里選擇的 nodeJs 官方長期支持的版本 8.x，需要安裝 10.x 版本的把 setup_8.x 改為 setup_10.x 即可。

$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
$ sudo apt-get install -y nodejs

下載了 nodeJs 那自然是需要對 nodeJs 切換一下國內的源。

$ npm config set registry https://registry.npm.taobao.org

至此，前期準備已經告一段落，接下來就是開始實戰部分。

docker 是個啥，我就近期在 linux 系統中使用之后的使用感受來簡單介紹一下。
首先來幾個英文單詞的解釋。

image

鏡像

可以理解成操作系統的鏡像，但又不是所有的鏡像都是操作系統。

container

容器

docker 跑起來的時候會新建一個容器，該容器里面會運行鏡像。

registry

鏡像源；倉庫

可以理解成 docker 需要拉取鏡像的時候所訪問的地方。

有一些比較特殊的概念，可以看著留個印象，docker 里面的鏡像是分層的，打個比方，一個操作系統的鏡像，里面可能分別安裝了 git node，然后加上系統的基礎鏡像，一共三層，我們稱他為 A鏡像，如果這時候還有個 B鏡像，他里面有 git node docker，然后加上系統的基礎鏡像，那 git node 層 AB鏡像 就可以共用。

相信作為前端，“nginx 做個反代理就好了”，這種話應該看到不少過，實戰我們就直接用 nginx 做個主要例子，期間會對對常用的一些 docker 語法做解釋。

首先，我們先拉取 nginx 的鏡像文件。

$ docker pull nginx

新建一個用于測試 docker 的文件夾，方便管理。

$ mkdir /home/$USER/docker-demo
$ cd /home/$USER/docker-demo
$ mkdir html

新建一個用于 nginx 的默認展示頁，我們的第一步就是要讓這個代碼跑在頁面上。

$ cd html
$ echo "
Hello World
" > index.html
$ cd ..

將 docker 跑起來吧，當然在跑起來之前，還是需要解釋一下參數。

docker run

這將新建一個容器，并在里面跑一個鏡像。

-d

將該容器運行在后臺，我們使用 nginx 那肯定是需要持續跑在后臺的，又叫守護進程。

-p

將容器對外曝露的端口映射到宿主機的端口（也就是我們上面花了半天功夫裝的虛擬機）。

說白了就是訪問宿主機的 8888 端口就好像訪問容器的 80 端口一樣。

--name

給我們新建的容器起一個名字。

-v

這是 docker 里面比較特殊的東西，volume，可以這么理解，冒號前面的為宿主機的路徑，后面為容器內的路徑，這個參數可以將宿主機路徑下的東西同步到容器內，因為 /usr/share/nginx/html 這個目錄就是 nginx 中默認的對外展示的目錄，所以我們將剛才新建的 html 文件夾同步到默認目錄里面，我們就可以訪問該頁面了。

nginx

這里是指向我們新建容器所需要用到的鏡像文件，如果你上面沒有做 docker pull 的操作，docker 也會自動到倉庫去拉取過來。

$ docker run -d -p 8888:80 --name my-first-nginx -v $PWD/html:/usr/share/nginx/html nginx

ok，不出意外會輸出一串字符串，這個就代表了你新建容器的 id，我們新建的所有的容器都會有一個用作標識的 id，不過我們不需要記住它，以后可以用 docker ps 來查詢。

查看一下我們新建的容器是否有在好好工作。

$ docker ps

若見到類似如下，那代表我們的容器有在好好工作，驗證一下吧。

在命令行中看看效果。

$ curl localhost:8888

看到如下，那就成功了。

命令行看著不過癮，我們到真機上看看效果，不過在這之前，我們需要知道我們宿主機的 ip 地址，在上面的步驟中我們已經將網絡改成了橋接網卡，所以現在我們的虛擬機用是和主機存在同一個局域網下的另一個 ip。

查看網絡接口上分配的 ip 地址，再加個篩選 IPv4 的參數。

$ ip -4 a

找到如下，192.168 開頭的，這就是虛擬機的 ip 地址了。

接著，我們只需要打開主機，訪問 192.168.0.200:8888 不要忘記帶上端口號即可。

上面那些都是基操，接下來我們來點不一樣的，我們會找一個基于 vue-cli 的 webpack 腳手架，然后依舊是跑在 nginx 容器里面的應用，會有 shell 腳本的書寫，方便運維朋友們進行項目一鍵更新發布。這更加適用于日常我們的項目發布流程。

在準備階段我們安裝了 nodeJs，我也準備了一個基礎的 vue-cli 項目，用于打包生產項目。

在開始之前，我們要先停止剛才我們跑的容器。

# 這是停止容器的指令
# 因為 nginx 是運行在后臺的，所以要先停止他才可以移除
# 還記得上面生成的容器唯一 id 么，這里只需要輸入前幾位即可停止該容器
$ docker stop 5af87

當然，光光停止還不夠，出于潔癖的心理，還要把容器移除，減少占用空間。

$ bash rm 5af87

接下來創建一個新的文件夾，用于演示接下來的項目。

$ mkdir /home/$USER/docker-demo-two
$ cd /home/$USER/docker-demo-two

復制 github 上的項目到該文件夾，這是基于最新版的 vue-cli 生成的例子，當然官方還沒有用上 webpack 4.x，不過問題不大，演示足矣。

$ git clone https://github.com/jsjzh/vue-cli-base.git

進入 vue-cli-base 之后就是前端基操了，使用 npm 包管理工具安裝項目依賴包，由于我們這里是要得到生產環境的代碼，所以直接執行 npm run build 將項目進行打包。

$ cd vue-cli-base
$ npm install
$ npm run build

項目打包好之后查看一下是否有相關的文件生成。

$ cd dist
$ ls

看到如下目錄就沒問題了。

完成之后進入到開始新建的目錄，進行容器的 volume 掛載操作。

$ cd /home/$USER/docker-demo-two
$ docker run -d -p 8889:80 -v $PWD/vue-cli-base/dist:/usr/share/nginx/html nginx

還是老樣子，命令行會輸出該容器的 id，但我們還是需要查看一下 nginx 有沒有好好的運行在后臺。

$ docker ps

查看到容器之后，在主機打開 192.168.0.200:8889 即可看到熟悉的 vue-cli 的界面了。

但是這還沒完，總不能讓運維小妹妹每次都跑一遍 npm 吧，作為貼心的開發哥哥，自然是要準備腳本供小妹妹使用，新建一個 shell 腳本，并保存內容如下。

提示：vim 編輯器編輯的操作是按 i，編輯完成之后 Esc ---> :x 即可。

$ cd /home/$USER/docker-demo-two
$ vim update-project.sh

# 腳本內容
cd vue-base-cli
git pull
npm install
npm run build

保存好之后，以后項目需要更新的時候，只需要跑一跑腳本就可以完成。

$ cd /home/$USER/docker-demo-two
$ /bin/bash update-project.sh

為看到效果，我們直接試著更改一下項目內容。

$ cd vue-cli-base/src
$ vim main.js

# 加入以下內容
console.log("file is change!");

退回到上層，執行我們的腳本。

$ /bin/bash update-project.sh

等運行完之后，在主機打開 192.168.0.200:8889，按 F12 打開控制臺，就看到了我們輸入的內容，至此，項目更新已成功。

不過既然說 docker 跑的都是容器，那自然是可以進到容器里面去一探究竟的，我們進入 nginx 的容器里面看看。

docker exec

在運行中的容器中執行命令。

-it

保持終端打開狀態。

/bin/bash

這里就是需要被執行的命令，這個命令是提供一個 bash 環境。

$ docker exec -it 26e52b8c6ffd9 /bin/bash

如果你在命令行看到 root@26e52b8c6ffd9:~# 就代表你進入了這個容器，我們再去看看 /usr/share/nginx/html 文件夾下有沒有 dist 中的文件。

$ cd /usr/share/nginx/html
$ ls

這里可以看到 index.html 文件和 static 文件夾，我們再去看看剛才的 file is change 在哪里。

$ cd static/js
# 注意 這里的名字是都不一樣的，你可以先敲個 app 再按 tab 鍵，會進行自動補全
$ cat app.86602636cb9e13f553fb.js

在底部的小角落我們看到了剛才輸入的代碼。

別忘了從容器里面退出來，依然是 $ exit 或者 ctrl + d 退出容器。

# 批量刪除容器
$ docker rm `docker ps -a -q`

# 批量刪除鏡像
$ docker rmi `docker images -q`

#卸載 docker
$ sudo apt-get purge docker-ce
$ sudo rm -rf /var/lib/docker

至此，docker 簡單的應用已經結束了，后續還會有關于 docker 的應用教程，想一想，如果我們可以把 static 目錄下的文件都傳到云空間，利用 CDN 加速，或者再配置一下 nginx 的 gzip 壓縮，再來一下反代理，然后了解一下容器新建數據庫，跑一個 nodeJs 的接口服務，再用 docker-compose 把前端后端數據庫連接起來，實現環境的一鍵部署，那不是自己一個人就是一個軍隊？

想想還有點小興奮，不過飯要一口口吃，代碼自然也是要一行行敲，在日益稀疏的頭發中找到代碼的真諦，不求聞達于諸侯，只求一方天地寧靜。

代碼如人生，我甘之如飴。

我在這里 gayhub@jsjzh 歡迎大家來找我玩兒。

環境配置（DONE）

virtualBox 下載安裝

ubuntu-server 下載安裝

虛擬機相關配置

系統裝填成功，開始系統內配置（DONE）

配置 apt-get 下載源

配置 docker 鏡像源

下載 git 和 nodeJs

docker 實戰（DONE）

簡單的 nginx 應用

結合 vue-cli 的 nginx 應用

TODO（TODO）[分篇]

Dockerfile

docker-compose

nginx

上傳 app.js 等至云空間