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

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

我：嗯，大佬說的是，頁面刷新白屏是因?yàn)闆]有服務(wù)器沒有配置找不到資源重定向，js 可以用 CDN 或者啟動(dòng)一下 gzip，這個(gè)讓后端或者運(yùn)維小妹妹配一下就好了。

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

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

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

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

但是，總感覺還缺少了什么，以前寫過 PHP，對(duì)于接口如何實(shí)現(xiàn)的也沒有那么好奇，無非就是連接數(shù)據(jù)庫寫寫 sql，再大不了就是建建視圖查詢，用用 redis 之類的，再深入一點(diǎn)就是消息隊(duì)列 MQTT 結(jié)合 websocket 的應(yīng)用了，那還缺少了什么，沒錯(cuò)，就是服務(wù)器部署，關(guān)于這個(gè)，我很好奇！

關(guān)于工作初期，我的想法是先要有技術(shù)廣度的了解，再要技術(shù)深度的了解。曾經(jīng)也有過寫腳手架寫上癮的時(shí)候，連續(xù)一個(gè)星期回家寫代碼寫到兩三點(diǎn)（大城市的大佬就不要吐槽我了 =3=），各種跑測(cè)試，最后出了成果成功運(yùn)行在線上項(xiàng)目的成就感我至今還記得，但是期間碰到了不少的問題，很多問題在其他領(lǐng)域的人看來甚至都不是問題，只是因?yàn)樽约褐赖奶倭?，所以被自己限制住了?/p>

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

廢話太多，開始正題，本篇文章可以幫助任何對(duì) docker 有興趣的人有一個(gè)基礎(chǔ)的認(rèn)識(shí)，最后會(huì)有一個(gè)簡(jiǎn)單的基于 vue-cli 搭建的 nginx 服務(wù)器的實(shí)戰(zhàn)應(yīng)用。

題主的系統(tǒng)環(huán)境是 windows win7 64位 系統(tǒng)，所以需要個(gè) linux 系統(tǒng)的虛擬機(jī)，并且出于裝逼的目的，將不使用桌面版的 linux 系統(tǒng)，所有的操作均在命令行完成。

virtualBox 是一個(gè)開源的虛擬機(jī)軟件，相比較 VMware 他更小，且開源免費(fèi)，對(duì)于本篇文章想要實(shí)現(xiàn)的功能，已經(jīng)是非常足夠。

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

virtualBox 下載地址

virtualBox 安裝教程

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

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

ubuntu-server 下載地址

ubuntu-server 安裝教程

virtualBox

新建

這個(gè)基本上也是一直下一步到天亮的操作，值得一提的就是關(guān)于不能安裝 64位 系統(tǒng)的 ubuntu 的處理，有的電腦會(huì)發(fā)現(xiàn)新建的時(shí)候沒有 ubuntu 64位 的選項(xiàng)，可以的話請(qǐng)參考這篇文章。

開啟 BIOS 的虛擬化技術(shù)

設(shè)置

存儲(chǔ)

如上圖，點(diǎn)擊那個(gè)位置將你下載的 ubuntu-server 鏡像載入即可。

網(wǎng)絡(luò)

如上圖，使用橋接網(wǎng)卡選項(xiàng)，可以設(shè)置該虛擬機(jī)網(wǎng)絡(luò)環(huán)境為同一局域網(wǎng)下的另一臺(tái)設(shè)備，方便我們后續(xù)通過主機(jī)訪問虛擬機(jī)搭建的網(wǎng)絡(luò)。

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

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

$ cat /etc/apt/sources.list

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

$ 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 的源的地址，這個(gè)操作我們以后會(huì)經(jīng)常做。

$ sudo apt-get update

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

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

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

$ 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

設(shè)置開機(jī)的時(shí)候啟動(dòng) docker，并啟動(dòng) docker。

$ sudo systemctl enable docker
$ sudo systemctl start docker

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

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

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

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

至此，對(duì)于前期環(huán)境的配置已經(jīng)完成的差不多了，我們已經(jīng)替換了 apt-get 下載新的軟件的源地址為國(guó)內(nèi)地址，也替換了 docker-ce 下載新的鏡像時(shí)候使用的源地址為國(guó)內(nèi)地址，現(xiàn)在讓我們來測(cè)一發(fā) docker。

docker run 為運(yùn)行一個(gè)鏡像文件，如果本地沒有找到該鏡像，會(huì)去鏡像地址地址下載拉取。如果提示 permission 之類的錯(cuò)誤，但你已經(jīng)做了添加當(dāng)前用戶到 docker 用戶組的操作，重啟一下虛擬機(jī)即可，這是權(quán)限不夠的意思。

$ docker run hello-world

因?yàn)槲覀兒笃跁?huì)用到 git 到我的 github 上拉取 vue-cli-base 的代碼，所以這里可以提前安裝一個(gè) git。

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

然后既然是用了 vue-cli 那 nodeJs 自然是不能少的，因?yàn)槲覀儠?huì)用 webpack 進(jìn)行打包，那就順便安裝個(gè) nodeJs，我這里選擇的 nodeJs 官方長(zhǎng)期支持的版本 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 那自然是需要對(duì) nodeJs 切換一下國(guó)內(nèi)的源。

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

至此，前期準(zhǔn)備已經(jīng)告一段落，接下來就是開始實(shí)戰(zhàn)部分。

docker 是個(gè)啥，我就近期在 linux 系統(tǒng)中使用之后的使用感受來簡(jiǎn)單介紹一下。
首先來幾個(gè)英文單詞的解釋。

image

鏡像

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

container

容器

docker 跑起來的時(shí)候會(huì)新建一個(gè)容器，該容器里面會(huì)運(yùn)行鏡像。

registry

鏡像源；倉(cāng)庫

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

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

相信作為前端，“nginx 做個(gè)反代理就好了”，這種話應(yīng)該看到不少過，實(shí)戰(zhàn)我們就直接用 nginx 做個(gè)主要例子，期間會(huì)對(duì)對(duì)常用的一些 docker 語法做解釋。

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

$ docker pull nginx

新建一個(gè)用于測(cè)試 docker 的文件夾，方便管理。

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

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

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

將 docker 跑起來吧，當(dāng)然在跑起來之前，還是需要解釋一下參數(shù)。

docker run

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

-d

將該容器運(yùn)行在后臺(tái)，我們使用 nginx 那肯定是需要持續(xù)跑在后臺(tái)的，又叫守護(hù)進(jìn)程。

-p

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

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

--name

給我們新建的容器起一個(gè)名字。

-v

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

nginx

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

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

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

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

$ docker ps

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

在命令行中看看效果。

$ curl localhost:8888

看到如下，那就成功了。

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

查看網(wǎng)絡(luò)接口上分配的 ip 地址，再加個(gè)篩選 IPv4 的參數(shù)。

$ ip -4 a

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

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

上面那些都是基操，接下來我們來點(diǎn)不一樣的，我們會(huì)找一個(gè)基于 vue-cli 的 webpack 腳手架，然后依舊是跑在 nginx 容器里面的應(yīng)用，會(huì)有 shell 腳本的書寫，方便運(yùn)維朋友們進(jìn)行項(xiàng)目一鍵更新發(fā)布。這更加適用于日常我們的項(xiàng)目發(fā)布流程。

在準(zhǔn)備階段我們安裝了 nodeJs，我也準(zhǔn)備了一個(gè)基礎(chǔ)的 vue-cli 項(xiàng)目，用于打包生產(chǎn)項(xiàng)目。

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

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

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

$ bash rm 5af87

接下來創(chuàng)建一個(gè)新的文件夾，用于演示接下來的項(xiàng)目。

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

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

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

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

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

項(xiàng)目打包好之后查看一下是否有相關(guān)的文件生成。

$ cd dist
$ ls

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

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

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

還是老樣子，命令行會(huì)輸出該容器的 id，但我們還是需要查看一下 nginx 有沒有好好的運(yùn)行在后臺(tái)。

$ docker ps

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

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

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

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

# 腳本內(nèi)容
cd vue-base-cli
git pull
npm install
npm run build

保存好之后，以后項(xiàng)目需要更新的時(shí)候，只需要跑一跑腳本就可以完成。

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

為看到效果，我們直接試著更改一下項(xiàng)目?jī)?nèi)容。

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

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

退回到上層，執(zhí)行我們的腳本。

$ /bin/bash update-project.sh

等運(yùn)行完之后，在主機(jī)打開 192.168.0.200:8889，按 F12 打開控制臺(tái)，就看到了我們輸入的內(nèi)容，至此，項(xiàng)目更新已成功。

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

docker exec

在運(yùn)行中的容器中執(zhí)行命令。

-it

保持終端打開狀態(tài)。

/bin/bash

這里就是需要被執(zhí)行的命令，這個(gè)命令是提供一個(gè) bash 環(huán)境。

$ docker exec -it 26e52b8c6ffd9 /bin/bash

如果你在命令行看到 root@26e52b8c6ffd9:~# 就代表你進(jìn)入了這個(gè)容器，我們?cè)偃タ纯?/usr/share/nginx/html 文件夾下有沒有 dist 中的文件。

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

這里可以看到 index.html 文件和 static 文件夾，我們?cè)偃タ纯磩偛诺?file is change 在哪里。

$ cd static/js
# 注意 這里的名字是都不一樣的，你可以先敲個(gè) app 再按 tab 鍵，會(huì)進(jìn)行自動(dòng)補(bǔ)全
$ 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 簡(jiǎn)單的應(yīng)用已經(jīng)結(jié)束了，后續(xù)還會(huì)有關(guān)于 docker 的應(yīng)用教程，想一想，如果我們可以把 static 目錄下的文件都傳到云空間，利用 CDN 加速，或者再配置一下 nginx 的 gzip 壓縮，再來一下反代理，然后了解一下容器新建數(shù)據(jù)庫，跑一個(gè) nodeJs 的接口服務(wù)，再用 docker-compose 把前端后端數(shù)據(jù)庫連接起來，實(shí)現(xiàn)環(huán)境的一鍵部署，那不是自己一個(gè)人就是一個(gè)軍隊(duì)？

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

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

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

環(huán)境配置（DONE）

virtualBox 下載安裝

ubuntu-server 下載安裝

虛擬機(jī)相關(guān)配置

系統(tǒng)裝填成功，開始系統(tǒng)內(nèi)配置（DONE）

配置 apt-get 下載源

配置 docker 鏡像源

下載 git 和 nodeJs

docker 實(shí)戰(zhàn)（DONE）

簡(jiǎn)單的 nginx 應(yīng)用

結(jié)合 vue-cli 的 nginx 應(yīng)用

TODO（TODO）[分篇]

Dockerfile

docker-compose

nginx

上傳 app.js 等至云空間