考慮下每次 CI 部署的流程

  1. 在構(gòu)建服務(wù)器構(gòu)建鏡像
  2. 把鏡像推至鏡像倉(cāng)庫(kù)服務(wù)器，
  3. 在生產(chǎn)服務(wù)器拉取鏡像，啟動(dòng)容器

顯而易見(jiàn)，鏡像體積過(guò)大造成傳輸效率低下，增加每次部署的延時(shí)。

即使，構(gòu)建服務(wù)器與生產(chǎn)服務(wù)器在同一節(jié)點(diǎn)下，沒(méi)有延時(shí)的問(wèn)題。減少鏡像體積也能夠節(jié)省磁盤空間

關(guān)于鏡像體積的過(guò)大，很大一部分是因?yàn)閚ode_modules 臭名昭著的體積

但最后我們只需要 public 文件夾下的內(nèi)容，對(duì)于源文件以及node_modules下文件，占用體積過(guò)大且不必要，造成浪費(fèi)。
此時(shí)可以利用 Docker 的多階段構(gòu)建，僅來(lái)提取編譯后文件

參考官方文檔 https://docs.docker.com/develop/develop-images/multistage-build/

FROM node:alpine as builder

ENV PROJECT_ENV production

# http-server 不變動(dòng)也可以利用緩存
WORKDIR /code

ADD package.json /code
RUN npm install --production

ADD . /code
RUN npm run build

# 選擇更小體積的基礎(chǔ)鏡像
FROM nginx:alpine
COPY --from=builder /code/public /usr/share/nginx/html

此時(shí)，鏡像體積從 1G+ 變成了 50M+

使用 CDN

分析一下 50M+ 的鏡像體積，nginx:alpine 的鏡像是16M，剩下的40M是靜態(tài)資源。

如果把靜態(tài)資源給上傳到 CDN，則沒(méi)有必要打入鏡像了，此時(shí)鏡像大小會(huì)控制在 20M 以下

關(guān)于靜態(tài)資源，可以分類成兩部分

FROM node:alpine as builder

ENV PROJECT_ENV production

# http-server 不變動(dòng)也可以利用緩存
WORKDIR /code

ADD package.json /code
RUN npm install --production

ADD . /code
# npm run uploadCdn 是把靜態(tài)資源上傳至 cdn 上的腳本文件
RUN npm run build && npm run uploadCdn


# 選擇更小體積的基礎(chǔ)鏡像
FROM nginx: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
贊(4)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享網(wǎng)絡(luò)內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-62778877-8306；郵箱：fanjiao@west.cn。本站原創(chuàng)內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明出處：西部數(shù)碼知識(shí)庫(kù) » 如何使用docker部署前端應(yīng)用

登錄

找回密碼

注冊(cè)