寫給前端的Docker實戰教程

本篇文章詳細而又簡短的介紹了：一名完全不瞭解 Docker 前端程序員，將全站 Docker 化的過程。

作者：花生PeA來源：segmentfault|2019-09-27 14:33

收藏

分享

本篇文章詳細而又簡短的介紹了：一名完全不瞭解 Docker 前端程序員，將全站 Docker 化的過程。內容主要包含：

• Docker 基本概念
• 真實站點遷移過程：

1. 靜態站點
2. Nodejs 站點(Express)
3. WordPress(PHP)

• 一些必備技巧：開機啟動、常用Shell

文章會講解使用 Docker 過程中用到的全部技術棧(Github CI、Nginx 反向代理、docker-compose)，絕不會出現“詳見：http://xxx”甩鏈接的情況

無需再查閱其他文檔，看著一篇就夠了!

當前有哪些問題

手動部署成本太高

筆者維護了諸多網站，其中包含：

• 我的簡歷：pea3nut.info，使用 Vuejs 構建的SPA單頁應用，純靜態
• 我的博客：pea3nut.blog，使用著名的 WordPress 搭建(PHP+Apache+MySQL)
• 一個開源項目——Pxer：pxer.pea3nut.org，官網使用 Nodejs + Express SSR 搭建

而每次我想修改某個網站內容是十分麻煩的。拿大家熟悉的純靜態站點來說，修改過程如下：

• 下載：從Github下載代碼，然後本地npm install
• 開發：npm run dev本地修改代碼，測試
• 編譯：npm run build使用 Webpack 進行編譯，產出靜態資源
• 上傳：打開FTP軟件，上傳替換文件
• 測試：看看網站是否在線上工作正常
• 提交：將代碼提交到 Github

哪怕我只是修改個錯別字，都要十幾分鍾

網站太多，改動太頻繁，而每次不管多小的改動都很麻煩。簡直讓我感覺自己在維護一個萬級QPS的大型項目

某個服務掛了，我不懂 Linux 無法排查

最近我發現我的 MySQL 進程總是掛掉，導致所有依賴於 MySQL 的站點都掛了

我也不知道為什麼，之前還是好好的

我嘗試了重啟進程、重啟服務器、撈報錯日誌百度，均未奏效

好吧，其實我不太懂 Linux，也不太懂 MySQL，我只是想用下他們搭建 WordPress 站點。而最近總出問題，讓我意識到：

我不僅要維護站點，我還要維護環境

這個對於一名前端來說太難了，裝個 nvm 就已經是我的極限了。MySQL無緣無故掛掉，我根本沒有能力查出個一二三四，然後解決它

我不僅要保證站點本地能跑通，還必須要部署在遠程VPS穩定運行。。。

重啟不行。。。那就只能重裝系統了

可是，由於搭建了許多站點，VPS服務器環境相當複雜(或許這就是 MySQL 掛掉的原因)，光 Apache 配置文件都幾百行了。重做系統的遷移成本，光是想一想就耗光了我所有的勇氣

新的技術方案——Docker

總結一下有如下問題：

• 手動部署成本太高，改錯別字都很麻煩
• 一臺服務器由於時間累積導致環境變得“髒亂差”
• 重裝系統成本太高，難以遷移

而 Docker，正是我解決所有問題SCP-500萬能藥!

那麼 Docker 是如何做的呢?

鏡像與容器

Docker 中有兩個重要概念。

一個是容器(Container)：容器特別像一個虛擬機，容器中運行著一個完整的操作系統。可以在容器中裝 Nodejs，可以執行npm install，可以做一切你當前操作系統能做的事情

另一個是鏡像(Image)：鏡像是一個文件，它是用來創建容器的。如果你有裝過 Windows 操作系統，那麼 Docker 鏡像特別像“Win7純淨版.rar”文件

上邊就是你所需要了解的 Docker 全部基礎知識。就這麼簡單

順便一提，在 Docker 中，我們通常稱你當前使用的真實操作系統為“宿主機”(Host)

安裝 Docker

安裝 Docker 在你的電腦上就像安裝 VS Code 一樣簡單

如果你使用的是Windows電腦，需要購買支持虛擬化的版本。如Win10專業版，Win10家庭版是不行的

• Mac：https://download.docker.com/mac/stable/Docker.dmg
• Windows：https://download.docker.com/win/stable/Docker%20for%20Windows%20Installer.exe
• Linux：https://get.docker.com/

安裝完Docker後，你可能會發現自己可以打開一個漂亮的 Docker 窗口。其實這個窗口沒什麼用處，通常我們都是通過CLI命令行的方式操作 Docker的，就像 Git 一樣

運行 Docker

接下來我們搭建一個能夠託管靜態文件的 Nginx 服務器

容器運行程序，而容器哪來的呢?容器是鏡像創建出來的。那鏡像又是哪來的呢?

鏡像是通過一個 Dockerfile 打包來的，它非常像我們前端的package.json文件

所以創建關係為：

Dockerfile: 類似於“package.json” 
 | 
 V 
Image: 類似於“Win7純淨版.rar” 
 | 
 V 
Container: 一個完整操作系統 

創建文件

我們創建一個目錄hello-docker，在目錄中創建一個index.html文件，內容為：

Hello docker
 

然後再在目錄中創建一個Dockerfile文件，內容為：

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

此時，你的文件結構應該是：

hello-docker 
 |____index.html 
 |____Dockerfile 

打包鏡像

文件創建好了，現在我們就可以根據Dockerfile創建鏡像了!

在命令行中(Windows優先使用PowerShell)鍵入：

cd hello-docker/ # 進入剛剛的目錄 
docker image build ./ -t hello-docker:1.0.0 # 打包鏡像 
注意！Docker 中的選項（Options）放的位置非常有講究，docker —help image和docker image —help是完全不同的命令 

docker image build ./ -t hello-docker:1.0.0的意思是：基於路徑./(當前路徑)打包一個鏡像，鏡像的名字是hello-docker，版本號是1.0.0。該命令會自動尋找Dockerfile來打包出一個鏡像

Tips: 你可以使用docker images來查看本機已有的鏡像 

不出意外，你應該能得到如下輸出：

Sending build context to Docker daemon 3.072kB 
Step 1/3 : FROM nginx 
 ---> 5a3221f0137b 
Step 2/3 : COPY ./index.html /usr/share/nginx/html/index.html 
 ---> 1c433edd5891 
Step 3/3 : EXPOSE 80 
 ---> Running in c2ff9ec2e945 
Removing intermediate container c2ff9ec2e945 
 ---> f6a472c1b0a0 
Successfully built f6a472c1b0a0 
Successfully tagged hello-docker:1.0.0 

可以看到其運行了 Dockerfile 中的內容，現在我們簡單拆解下：

• FROM nginx：基於哪個鏡像
• COPY ./index.html /usr/share/nginx/html/index.html：將宿主機中的./index.html文件複製進容器裡的/usr/share/nginx/html/index.html
• EXPOSE 80：容器對外暴露80端口

運行容器

我們剛剛使用 Dockerfile 創建了一個鏡像。現在有鏡像了，接下來要根據鏡像創建容器：

docker container create -p 2333:80 hello-docker:1.0.0 
docker container start xxx # xxx 為上一條命令運行得到的結果 

然後在瀏覽器打開127.0.0.1:2333，你應該能看到剛剛自己寫的index.html內容

在上邊第一個命令中，我們使用docker container create來創建基於hello-docker:1.0.0鏡像的一個容器，使用-p來指定端口綁定——將容器中的80端口綁定在宿主機的2333端口。執行完該命令，會返回一個容器ID

而第二個命令，則是啟動這個容器

啟動後，就能通過訪問本機的2333端口來達到訪問容器內80端口的效果了

Tips: 你可以使用docker containers ls來查看當前運行的容器 

當容器運行後，可以通過如下命令進入容器內部：

docker container exec -it xxx /bin/bash # xxx 為容器ID 

原理實際上是啟動了容器內的/bin/bash，此時你就可以通過bash shell與容器內交互了。就像遠程連接了SSH一樣

發生了什麼

我們總結下都發生了什麼：

1. 寫一個 Dockerfile
2. 使用docker image build來將Dockerfile打包成鏡像
3. 使用docker container create來根據鏡像創建一個容器
4. 使用docker container start來啟動一個創建好的容器

雖然很簡單，但是也沒有感覺到“廣闊天地，大有可為，為所欲為”呢?

遷移靜態站點

接下來我們實戰遷移一個由 Vuejs 寫的純靜態 SPA 單頁站點：

• 網址：pea3nut.info
• 源碼：github/pea3nut-info

我打算怎麼做

在沒遷移 Docker 之前，若我想更新線上網站中內容時，需要：

1. 本地npm run build打包產出靜態文件
2. 手動通過 FTP 上傳到服務器
3. git push更新 Github 源碼

稍微有點麻煩，因此我打算這樣改：

1. 執行git push
2. 自動檢測到 github 有代碼更新，自動打包出一個 Docker 鏡像
3. CI 編譯完成後，SSH 登錄 VPS，刪掉現有容器，用新鏡像創建一個新容器

而這樣做的好處是：

1. 不必再手動 FTP 上傳文件
2. 當我進行修改錯別字這樣的簡單操作時，可以免測。改完直接git push，而不必本地npm run build

Github中的CI

首先是讓 Github 在我每次更新代碼時打包出一個鏡像

在 Github，可以有免費的 CI 資源用，它就是 Travis CI

在項目中根目錄中添加.travis.yml文件，內容如下：

language: node_js 
node_js: 
 - "12" 
services: 
 - docker 
 
before_install: 
 - npm install 
 
script: 
 - npm run build 
 - echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin 
 - docker build -t pea3nut/pea3nut-info:latest . 
 - docker push pea3nut/pea3nut-info:latest 

文件內容非常簡單，就是使用npm run build編譯靜態產出後，打包一個鏡像並且 push 到遠程。有幾點需要詳細說一下：

• 為了能夠讓鏡像上傳到服務器，你需要在hub.docker.com中註冊一個賬號，然後替換代碼中的pea3nut/pea3nut-info:latest為用戶名/包名:latest即可
• 使用 Github 登錄 Travis CI 後，在左邊點擊+加號添加自己的 Github 倉庫後，需要移步到 Setting 為項目添加DOCKER_USERNAME和DOCKER_PASSWORD環境變量。這樣保證我們可以秘密的登錄 Docker Hub 而不被其他人看到自己的密碼。如下圖

然後需要添加 Dockerfile 文件來描述如何打包 Docker 鏡像。

按照.travis.yml的命令次序，在打包鏡像時，npm run build已經執行過了，項目產出已經有了。不必在 Docker 容器中運行npm install和npm run build之類的，直接複製文件即可：

FROM nginx 
 
COPY ./dist/ /usr/share/nginx/html/ 
 
EXPOSE 80 
Note: 過程雖然簡單但是線條很長，建議本地多測試測試再進行git push 

若你編譯出的靜態站點也是一個 SPA 單頁應用，需要增加額外的 Nginx 配置來保證請求都能打到index.html。下邊是我寫的vhost.nginx.conf Nginx 配置文件，將不訪問文件的請求全部重定向到/index.html：

server { 
 listen 80; 
 server_name localhost; 
 location / { 
 root /usr/share/nginx/html; 
 index index.html index.htm; 
 proxy_set_header Host $host; 
 
 if (!-f $request_filename) { 
 rewrite ^.*$ /index.html break; 
 } 
 
 } 
 
 error_page 500 502 503 504 /50x.html; 
 location = /50x.html { 
 root /usr/share/nginx/html;  

 } 
} 

然後在 Dockerfile 中新加一行，將本機的vhost.nginx.conf文件複製到容器的/etc/nginx/conf.d/pea3nut-info.conf，讓 Nginx 能夠讀取該配置文件：

 FROM nginx 
 
 COPY ./dist/ /usr/share/nginx/html/ 
+ COPY ./vhost.nginx.conf /etc/nginx/conf.d/pea3nut-info.conf 
 
 EXPOSE 80 

然後執行git push後，你可以在 Travis CI 看到 CI 的編譯結果。如果編譯沒問題，遠程實際上就有了pea3nut/pea3nut-info:latest這個鏡像。本地可以試試看該鏡像工作是否正常：

docker image pull pea3nut/pea3nut-info:latest 
docker container create -p 8082:80 pea3nut/pea3nut-info:latest 
docker container start xxx # xxx 為上一條命令執行的返回值 

運行完成後，瀏覽器訪問127.0.0.1:8082應該就能看到效果了!

然後你可以登錄遠程 VPS 服務器，安裝 Docker，執行同樣的命令。然後訪問遠程 VPS 服務器的公網 IP + 8082 端口號，應該能看到和本地相同的效果

Tips: 忘了如何在 VPS 上安裝 Docker?在上文“安裝 Docker”一節，你可能需要的是 Linux 的安裝方式

curl https://get.docker.com/ > install-docker.sh # 下載安裝腳本 
sh install-docker.sh # 執行安裝腳本  

Nginx 反向代理

Note: 接下來的操作都是在你的遠程 VPS 服務器上操作，並非本地電腦，或者容器中

目前我們將容器掛到了 8082 端口，但是線上不可能讓用戶手動輸入 8082 端口進行訪問。而如果將容器直接掛到 80 端口，雖然這樣用戶可以直接不加端口直接訪問，但是如果有第二個容器，或者更多容器呢?

這時候就需要在宿主機跑一個 Nginx，由它來獨佔 80 端口，然後根據域名來講請求分發給響應的容器。如下圖：

這種方案叫做“反向代理”

登錄VPS服務器，安裝 Nginx。因為我是 Ubuntu，所以可以用apt安裝。其他 Linux 發行版可以百度下安裝方法，通常2行內可以搞定：

apt update # 更新軟件包 
apt-get install nginx # 安裝 Nginx 
systemctl status nginx # 查看 Nginx 狀態 

此時本地通過瀏覽器訪問 VPS 的公網 IP 可用看到 Nginx 的歡迎頁面

然後在 VPS 服務器的/etc/nginx/conf.d/中建立一個vhost.conf文件，配置如下內容：

server { 
 listen 80; 
 server_name pea3nut.info; 
 
 location / { 
 proxy_pass http://127.0.0.1:8082; 
 } 
} 

配置的意思是，監聽來自 80 端口的流量，若訪問域名是pea3nut.info(替換為你自己的域名)，則全部轉發到http://127.0.0.1:8082中

配置完成後，重啟 Nginx 服務器。若是 Ubuntu 可以使用systemctl restart nginx命令，不同 Linux 發行版稍有不同

配置成功後，訪問pea3nut.info會看到和VPS公網IP:8082相同的效果

更新站點

而遷移完成 Docker 後，我想改一個錯別字的流程變為：

• 本地修改完成，執行git push
• 等待 CI 編譯完成
• 登錄 VPS 服務器，執行：

docker image pull pea3nut/pea3nut-info:latest 
docker container create -p 8082:80 pea3nut/pea3nut-info:latest # 得到 yyy 
docker container stop xxx # xxx 為當前運行的容器ID，可用 docker container ls 查看 
docker container start yyy # yyy 第二條命令返回值 

命令還是有些長?我們在下面會進一步優化它

遷移 Nodejs 站點(Express)

接下來我們實戰遷移一個由 Nodejs 寫的 Express SSR 站點

• 網址：pxer.pea3nut.org
• 源碼：github/pxer-homepage

我打算怎麼做

網站使用 Ejs 模板渲染頁面。在沒遷移 Docker 之前，若我想更新線上網站中內容時，需要：

1. 本地修改好 Ejs 或者其他文件
2. 手動通過 FTP 上傳到服務器
3. 在服務器端重啟 Nodejs 進程。若有 npm 包依賴改動，需要在VPS服務器上手動執行npm install
4. git push更新 Github 源碼

稍微有點麻煩，因此我打算這樣改：

1. 執行git push
2. 自動檢測到 github 有代碼更新，自動打包出一個 Docker 鏡像
3. CI 編譯完成後，SSH 登錄 VPS，刪掉現有容器，用新鏡像創建一個新容器

而這樣做的好處是：

1. 不必再手動 FTP 上傳文件
2. 不必手動維護服務器的 Nodejs 運行環境

實施

具體的過程和處理靜態站點沒有什麼特別的區別，無非是：

1. 編寫 Dockerfile 文件
2. 在 CI 時自動打包鏡像
3. 在VPS增加一個 Nginx 反向代理

這次就不重複講了，具體的配置可以參考項目中的相關文件

Tips: 你可能發現了 Dockerfile 中的ENTRYPOINT命令必須指定一個前臺進程。若你的 Nodejs 應用是使用 PM2 進行保活的，你需要替換pm2 start app.js為pm2-docker app.js

docker-compose

當將 Nodejs 站點遷移完成，我們的 VPS 服務器上已經運行了2個容器。每次鏡像更新都要手動的docker container create帶一堆參數是比較麻煩的，尤其是當日後容器日益增多的時候。而這時，就輪到docker-compose登場了~

docker-compose 是 Docker 官方提供的一個 Docker 管理工具。若你是通過桌面端的 Docker 安裝包安裝的 Docker，它是會默認為你安裝 docker-compose 的。可以試試如下命令：

docker-compose --help 

如果是在 Linux，可以通過如下命令安裝 docker-compose：

curl -L "https://github.com/docker/compose/releases/download/1.23.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose 
chmode +x /usr/local/bin/docker-compose 

docker-compose 和 Docker 差不多，也是隻要一份文件就能跑起來。docker-compose 主要的作用就是能夠讓你不必手敲那麼多 Docker 命令

建立一個目錄，然後在目錄中建立docker-compose.yml，內容如下：

version: "3.7" # 這個是配置文件的版本，不同的版本號聲明方式會有細微的不同 
services: 
 info: 
 container_name: pea3nut-info 
 image: pea3nut/pea3nut-info:latest 
 ports: 
 - "8082:80" 
 restart: on-failure  

然後在目錄中鍵入如下命令就能將服務跑起來：

docker-compose up info 

docker-compose 會幫我們自動去拉鏡像，創建容器，將容器中的80端口映射為宿主機的8082端口。restart字段還要求 docker-compose 當發現容器意外掛掉時重新啟動容器，類似於 pm2，所以你不必再在容器內使用 pm2

如果想要更新一個鏡像創建新容器，只需要：

docker-compose pull info 
docker-compose stop info 
docker-compose rm info 
docker-compose up -d info # -d 代表後臺運行 

筆者已將自己網站部署方式開源，可參考github/pea3nut-hub

遷移 WordPress 站點(Apache + PHP + MySQL)

接下來我們實戰遷移一個 WordPress 站點

• 網址：pea3nut.blog
• 源碼：非公開

可能你也發現了這個站點和其他站點的一個非常大的不同——他的源碼和數據是不能公開的

之前我們打包鏡像時，都是直接將代碼打進鏡像內的。這條方案用在這裡顯然是不行的，有兩個問題：

1. 我不想公開 MySQL 數據文件和網站內容(如圖片)。若將這些打包進鏡像，任何人都能docker image pull下載到鏡像，然後取得鏡像內的文件
2. 當容器被刪掉，存儲的 MySQL 數據都將丟失

Volume

Docker 提供了一個叫做 Volume 的東西，可以將容器內和宿主機的某個文件夾進行”綁定“，任何文件改動都會得到同步。所以，我可以將整個站點目錄和 MySQL 目錄都掛載為 Volume。這樣，當容器刪除時，所有數據文件和源碼都會保留。

在本地建立./blog/mysql-data目錄存儲 MySQL 數據，建立./blog/wordpress目錄存儲 WordPress 源碼。然後修改docker-compose.yml如下：

version: "3.7" 
services: 
 info: 
 container_name: pea3nut-info 
 image: pea3nut/pea3nut-info:latest 
 ports: 
 - "8082:80" 
 restart: on-failure 
+ blog: 
+ container_name: pea3nut-blog 
+ image: tutum/lamp:latest 
+ ports:  

+ - "8081:80" 
+ volumes: 
+ - ./blog/mysql-data:/var/lib/mysql 
+ - ./blog/wordpress:/app 
+ restart: on-failure 

可以看到這次根本沒有打包鏡像，而是直接使用tutum/lamp鏡像提供的 LAMP 環境(Linux + Apache + MySQL + PHP)，然後將 MySQL 數據目錄/var/lib/mysql和源碼目錄/app都掛載出來就可以了

Tips: 通過 Volume 我們只是解決了部署問題，而如何本地開發然後將源碼同步到服務器呢?用 FTP 當然是可以的，但是稍微有點麻煩。其實你可以自建一個 Git 服務器!