前端 Docker 鏡像體積優化

若是 2019 年技術圈有十大流行詞，容器化確定佔有一席之地，隨着 Docker 的風靡，前端領域應用到 Docker 的場景也愈來愈多，本文主要來說述下開源的分佈式圖數據庫 Nebula Graph 是如何將 Docker 應用到可視化界面中，並將 1.3G 的 Docker 鏡像優化到 0.3G 的實踐經驗。

爲何要用 Docker

對於前端平常開發而言，有時也會用到 Docker，結合到 Nebula Graph Studio （分佈式圖數據庫 Nebula Graph 的圖形界面工具）使用 Docker 主要基於如下考慮:

• 統一運行環境：咱們的工具背後有好幾個服務組合在一塊兒，諸如不一樣技術棧的現有服務，純前端的靜態資源。
• 用戶使用成本低：目前雲服務還在開發中，想讓用戶對服務組合無感，能直接在本地一鍵啓動應用並使用。
• 快速部署：團隊本就提供有 Nebula鏡像版本 實踐，給了咱們前端一些參考和借鑑。

Docker 鏡像的構建

既然要使用 Docker 來承載咱們的應用，就得將項目進行鏡像構建。與全部 build 鏡像相似，須要配置一份命名爲Dockerfile 的文件，文件是一些步驟的描述，簡單來講就是把項目複製到鏡像裏，並設置好啓動方式：

# 選擇基礎鏡像
FROM node:10
# 設置工做目錄
WORKDIR /nebula-web-console
# 把當前項目內容拷貝到鏡像中的 /nebula-web-console 目錄下
ADD . /nebula-web-console
# 在鏡像中下載前端依賴
RUN npm install
# 執行構建
RUN npm run build
EXPOSE 7001
# 鏡像啓動時執行的部署命令
CMD ["npm", "run", "docker-start"]

Docker 鏡像體積優化

若是按照上述的配置文件來構建 Docker 鏡像，以咱們的項目爲例，將會生成一個體積約爲 1.3GB 的鏡像，這個看起來有點嚇人，由於即便在網速快的用戶電腦光下載鏡像也須要等待很多時間，這是不能接受的。

在調研了相應的資料後，瞭解到能夠從如下幾個方面縮小 Docker 鏡像體積進行優化：

基礎鏡像源的選擇

所謂基礎鏡像源，就是咱們在進行構建步驟時，選擇的一個基礎環境（如上 node:10 )，經過查看 Dockerhub 上有關 Node.js 的基礎環境鏡像時，咱們會發現有多個版本，雖然都是 Node.js 相關基礎鏡像，但不一樣版本，他們除了 Node.js 版本不一樣外，在內部集成的環境也不同，例如帶有 alpine 的版本，至關因而一個比較精巧的 Linux 系統鏡像，在此版本運行的容器中會發現不存在咱們常規系統中所附帶的工具，好比 bash、curl 等，由此來縮小體積。

根據項目實際須要，當我把基礎鏡像換爲 alpine 版本後，再次進行構建，此時鏡像體積已大幅度減少，從 1.3GB 直降爲 500+MB，體積優化效果明顯，因此當你發現本身構建的鏡像體積過大時，能夠考慮從更換基礎鏡像源的方式來着手，看看是否使用了過於臃腫的鏡像源。

Multi-stage 構建鏡像

所謂 multi-stage 便是 Docker 鏡像構建的時候採起的策略，詳細可點擊連接提供的資料。

Docker 構建規則

簡言之就是利用 Docker 構建提供的規則：Dockerfile 的操做都會增長一個所謂鏡像的「層」，每一層都會增長鏡像體積，經過採用多步驟策略，每一步驟包含具備相贊成義的一系列操做（例如構建，部署），步驟與步驟之間經過產物鏡像引用的方式，由此來縮減最終構建鏡像所須要的層數，具體操做好比：

# 設置第一步驟產生的鏡像，並命名爲builder
FROM node:10-alpine as builder
WORKDIR /nebula-web-console
# 複製當前項目內容至鏡像中
ADD . /nebula-web-console
# 進行相應的構建
RUN npm install
RUN npm run build
....

# 進行第二步驟構建
FROM node:10-alpine
WORKDIR /nebula-web-console
# 複製第一步構建鏡像的產物內容至當前鏡像，只用到了一層鏡像層從而節約了以前構建步驟的鏡像層數
COPY --from=builder . /nebula-web-console
CMD ["npm", "run", "docker-start"]

.dockerignore

相似咱們熟悉的 .gitignore ，就是當咱們在進行 COPY 或 ADD 文件複製操做時，將沒必要要的文件忽略掉（諸如文檔文件、git文件、node_modules以及一些非生成必要文件等），從而減少鏡像體積，更詳細內容可參考文檔鏈接：.dockerignore。

操做合併

基於上述提到在 Dockerfile 構建鏡像的過程作，每個操做都會在前一步鏡像基礎上增長一「層」，能夠利用 & 來合併多個操做，減小層數，好比：

# 如下兩個操做分別表明兩層
RUN npm install
RUN npm run build

改成：

# 使用 & 後變了爲一層
RUN npm install && npm run build

由此咱們減小了層數的增長，即減小了鏡像的體積。同時，在構建鏡像的過程當中，咱們也能夠經過在達到相同目的的前提下，儘可能減小沒必要要的操做來減小「層數」的添加。

前端常規性體積優化

• 壓縮醜化代碼，移除源碼

     此操做能夠放在構建步驟階段，這樣會進一步縮小鏡像的文件體積。

• node_modules 只下載生產環境須要的代碼

     此操做能夠放在部署階段，只下載生產環境所須要的第三方依賴代碼: npm install --production 。

• 公共資源放在CDN

     若是鏡像被期待運行在聯網環境，能夠考慮將一些體積相比較大的公共文件（圖片、第三方庫等）放在CDN服務 器上，將部分資源剝離出去，也會進一步縮小體積。

• ...

以上只做爲一個線索參考，更多前端常規的優化步驟，均可以遷移至鏡像中進行，畢竟和咱們本地開發同樣，鏡像構建也是一個運行代碼的環境嘛。

小結

以上即是我在這次使用 Docker 鏡像來運行咱們 Nebula Studio 所用到的一些優化鏡像體積的方法，但願能給須要的人一些幫助和參考，可能還有一些認識不許確的地方，歡迎指出，一樣歡迎你來試用 Nebula Graph Studio：https://github.com/vesoft-inc/nebula-web-docker