前端高級進階：使用Docker高效部署你的前端應用
Docker 變得越來越流行，它可以輕便靈活地隔離環境，進行擴容，運維管理。對于業務開發者而言，隨著持續集成的發展，對代碼質量及快速迭代的要求也越來越高。
對于前端而言，在 CI 環境中使用也更容易集成開發，測試與部署。比如可以為流水線(Pipeline)設置 Lint/Test/Security/Audit/Deploy/Artifact 等任務，更好地把控項目質量。
現在無論是前端，后端還是運維，都很強調 devops 的理念，接下來我將會寫一系列關于 devops 在前端中應用的文章。
這里將介紹如何使用 Docker 部署前端應用，千里之行，始于足下。始于足下的意思就是，先讓它能夠跑起來。
先讓它跑起來
首先，簡單介紹一下一個典型的前端應用部署流程
- npm install, 安裝依賴
- npm run build，編譯，打包，生成靜態資源
- 服務化靜態資源，如 nginx
介紹完部署流程后，簡單寫一個 Dockerfile
- FROM node:10-alpine
- # 代表生產環境
- ENV PROJECT_ENV production
- # 許多 package 會根據此環境變量，做出不同的行為
- # 另外，在 webpack 中打包也會根據此環境變量做出優化，但是 create-react-app 在打包時會寫死該環境變量
- ENV NODE_ENV production
- WORKDIR /code
- ADD . /code
- RUN npm install && npm run build && npm install -g http-server
- EXPOSE80
- CMD http-server ./public -p 80
現在這個前端服務已經跑起來了，接下來你可以完成部署的其它階段了。
一般情況下，以下就成了運維的工作了，不過，拓展自己的知識邊界總是沒錯的。其它階段介紹如下
- 使用 nginx 或者 traefik 做反向代理。在我內部集群中使用了 traefik，詳見 traefik 簡易入門
- 使用 kubernetes 或者 docker compose 做容器編排。在我內部集群中使用了 compose，詳見 docker compose 簡易入門
- 使用 gitlab ci，drone ci 或者 github actions 等做 CI/CD 自動部署。
這時鏡像存在兩個問題，導致每次部署時間過長，不利于產品的快速交付，沒有快速交付，也就沒有敏捷開發 (Agile)
- 構建鏡像時間過長
- 構建鏡像大小過大，多時甚至 1G+
利用鏡像緩存
我們注意到，相對于項目的源文件來講，package.json 是相對穩定的。如果沒有新的安裝包需要下載，則再次構建鏡像時，無需重新構建依賴。則可以在 npm install 上節省一半的時間。
對于 ADD 來講，如果需要添加的文件內容的 checksum 沒有發生變化，則可以利用緩存。把 package.json/package-lock.json 與源文件分隔開寫入鏡像是一個很好的選擇。目前，如果沒有新的安裝包更新的話，可以節省一半時間
- FROM node:10-alpine
- ENV PROJECT_ENV production
- ENV NODE_ENV production
- # http-server 不變動也可以利用緩存
- RUN npm install -g http-server
- WORKDIR /code
- # 首次添加此兩個文件，充分利用緩存
- ADD package.json package-lock.json /code
- RUN npm install --production
- ADD . /code
- RUN npm run build
- EXPOSE80
- CMD http-server ./public -p 80
關于利用緩存有更多細節，需要特別注意一下。如 RUN git clone <repo>，如果命令字符串沒有更新，則將使用緩存，當命令是非冪等性時，這將有可能導致問題。
關于緩存及可能導致的問題，可以參考我的文章 Dockerfile 最佳實踐
CI 環境下的優化
- FROM node:10-alpine
- ENV PROJECT_ENV production
- ENV NODE_ENV production
- # http-server 不變動也可以利用緩存
- RUN npm install -g http-server
- WORKDIR /code
- # 首次添加此兩個文件，充分利用緩存
- ADD package.json package-lock.json /code
- RUN npm ci
- ADD . /code
- RUN npm run build
- EXPOSE80
- CMD http-server ./public -p 80
在 CI 環境下主要做了一點改動：使用 npm ci 代替 npm i，經實驗，npm ci 可以減少將近一半的的依賴安裝時間。
- $ npm install
- added 1154 packages in 60s
- $ npm ci
- added 1154 packages in 35s
另外，當 package.json 與 package-lock.json 版本不匹配時，npm ci 將會報出異常，提前檢測出不安全信息，及早發現問題，及早解決問題。
多階段構建
得益于緩存，現在鏡像構建時間已經快了不少。但是，此時鏡像的體積依舊過于龐大，這也將會導致部署時間的加長。原因如下
考慮下每次 CI/CD 部署的流程
- 在構建服務器 (Runer) 構建鏡像
- 把鏡像推至鏡像倉庫服務器
- 在生產服務器拉取鏡像，啟動容器
顯而易見，鏡像體積過大會在前兩步上傳及下載時造成傳輸效率低下，增加每次部署的延時。
即使，構建服務器與生產服務器在同一節點下，沒有延時的問題 (基本沒可能)。減少鏡像體積也能夠節省磁盤空間。
關于鏡像體積的過大，完全是因為node_modules 臭名昭著的體積:
node_modules的體積
但最后我們只需要構建生成的靜態資源，對于源文件以及 node_modules 下文件，占用體積過大且不必要，造成浪費。
此時可以利用 Docker 的多階段構建，僅來提取編譯后文件，即打包生成的靜態資源，對 Dockerfile 做一改進
- FROM node:10-alpine as builder
- ENV PROJECT_ENV production
- ENV NODE_ENV production
- # http-server 不變動也可以利用緩存
- WORKDIR /code
- ADD package.json package-lock.json /code
- RUN npm ci
- ADD . /code
- RUN npm run build
- # 選擇更小體積的基礎鏡像
- FROM nginx:10-alpine
- COPY --from=builder /code/public /usr/share/nginx/html
此時，鏡像體積從 1G+ 變成了 50M+。若此時的部署僅僅是在測試環境或者多分支環境下為了方便測試，那就大功告成，完美解決問題了。
使用對象存儲服務 (OSS)
分析一下 50M+ 的鏡像體積，nginx:10-alpine 的鏡像是16M，剩下的40M是靜態資源。生產環境的靜態資源往往會在獨立域名上維護，并使用 CDN 進行加速。
如果把靜態資源給上傳到文件存儲服務，即OSS，并使用 CDN 對 OSS 進行加速，則沒有必要打入鏡像了。而在生產環境下也有對靜態資源上 CDN 的強烈需求。
此時鏡像大小會控制在 20M 以下。雖然極大地減小了鏡像體積，但是它會增加復雜度與增加鏡像構建時間(如上傳到OSS)，對于測試環境或者分支環境沒必要使用 OSS。
關于靜態資源，可以分類成兩部分：
- /build，此類文件在項目中使用 require/import 引用，會被 webpack 打包并加 hash 值，并通過 publicPath 修改資源地址。可以把此類文件上傳至 oss，并加上永久緩存，不需要打入鏡像
- /static，此類文件在項目中直接引用根路徑，直接打入鏡像，如果上傳至 OSS 可能增加復雜度 (批量修改 publicPath)
此時通過一個腳本命令 npm run uploadOss，來把靜態資源上傳至 OSS。更新后的 Dockerfile 如下
- FROM node:10-alpine as builder
- ENV PROJECT_ENV production
- ENV NODE_ENV production
- # http-server 不變動也可以利用緩存
- WORKDIR /code
- ADD package.json package-lock.json /code
- RUN npm ci
- ADD . /code
- # npm run uploadOss 是把靜態資源上傳至 oss 上的腳本文件
- RUN npm run build && npm run uploadOss
- # 選擇更小體積的基礎鏡像
- FROM nginx:10-alpine
- COPY --from=builder code/public/index.html code/public/favicon.ico /usr/share/nginx/html/
- COPY --from=builder code/public/static /usr/share/nginx/html/static
小結
經過本篇文章總結，在前端中構建鏡像需要注意以下幾點
- 鏡像中使用基于 alpine 的鏡像，減小鏡像體積。
- 鏡像中需要鎖定 node 的版本號，盡可能也鎖定 alpine 的版本號，如 node:10.19-alpine3.11。(我示例代碼中未如此詳細地指出)
- 選擇合適的環境變量 NODE_ENV 及 PROJECT_ENV，如在測試環境下進行構建
- npm ci 替代 npm i，避免版本問題及提高依賴安裝速度
- package.json 單獨添加，充分利用鏡像緩存
- 使用多階段構建，減小鏡像體積
- 如有必要，靜態資源請上 CDN
