這篇文章主要介紹“怎么使用Docker高效部署前端應(yīng)用”，在日常操作中，相信很多人在怎么使用Docker高效部署前端應(yīng)用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用Docker高效部署前端應(yīng)用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)是一家專業(yè)提供樺川企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為樺川眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

先讓它跑起來

首先，簡單介紹一下一個(gè)典型的前端應(yīng)用部署流程

1.  npm install, 安裝依賴

2.  npm run build，編譯，打包，生成靜態(tài)資源

3.  服務(wù)化靜態(tài)資源，如 nginx

介紹完部署流程后，簡單寫一個(gè) Dockerfile

FROM node:10-alpine  # 代表生產(chǎn)環(huán)境  ENV PROJECT_ENV production  # 許多 package 會(huì)根據(jù)此環(huán)境變量，做出不同的行為  # 另外，在 webpack 中打包也會(huì)根據(jù)此環(huán)境變量做出優(yōu)化，但是 create-react-app 在打包時(shí)會(huì)寫死該環(huán)境變量  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

現(xiàn)在這個(gè)前端服務(wù)已經(jīng)跑起來了，接下來你可以完成部署的其它階段了。

一般情況下，以下就成了運(yùn)維的工作了，不過，拓展自己的知識邊界總是沒錯(cuò)的。其它階段介紹如下

•  使用 nginx 或者 traefik 做反向代理。在我內(nèi)部集群中使用了 traefik，詳見 traefik 簡易入門

•  使用 kubernetes 或者 docker compose 做容器編排。在我內(nèi)部集群中使用了 compose，詳見 docker compose 簡易入門

•  使用 gitlab ci，drone ci 或者 github actions 等做 CI/CD 自動(dòng)部署。

這時(shí)鏡像存在兩個(gè)問題，導(dǎo)致每次部署時(shí)間過長，不利于產(chǎn)品的快速交付，沒有快速交付，也就沒有敏捷開發(fā) (Agile)

•  構(gòu)建鏡像時(shí)間過長

•  構(gòu)建鏡像大小過大，多時(shí)甚至 1G+

利用鏡像緩存

我們注意到，相對于項(xiàng)目的源文件來講，package.json 是相對穩(wěn)定的。如果沒有新的安裝包需要下載，則再次構(gòu)建鏡像時(shí)，無需重新構(gòu)建依賴。則可以在 npm install 上節(jié)省一半的時(shí)間。

對于 ADD 來講，如果需要添加的文件內(nèi)容的 checksum 沒有發(fā)生變化，則可以利用緩存。把 package.json/package-lock.json 與源文件分隔開寫入鏡像是一個(gè)很好的選擇。目前，如果沒有新的安裝包更新的話，可以節(jié)省一半時(shí)間

FROM node:10-alpine  ENV PROJECT_ENV production  ENV NODE_ENV production  # http-server 不變動(dòng)也可以利用緩存  RUN npm install -g http-server  WORKDIR /code  # 首次添加此兩個(gè)文件，充分利用緩存  ADD package.json package-lock.json /code  RUN npm install --production  ADD . /code  RUN npm run build  EXPOSE80  CMD http-server ./public -p 80

關(guān)于利用緩存有更多細(xì)節(jié)，需要特別注意一下。如 RUN git clone ，如果命令字符串沒有更新，則將使用緩存，當(dāng)命令是非冪等性時(shí)，這將有可能導(dǎo)致問題。

關(guān)于緩存及可能導(dǎo)致的問題，可以參考我的文章 Dockerfile 最佳實(shí)踐

CI 環(huán)境下的優(yōu)化

FROM node:10-alpine  ENV PROJECT_ENV production  ENV NODE_ENV production  # http-server 不變動(dòng)也可以利用緩存  RUN npm install -g http-server  WORKDIR /code  # 首次添加此兩個(gè)文件，充分利用緩存  ADD package.json package-lock.json /code  RUN npm ci ADD . /code  RUN npm run build  EXPOSE80  CMD http-server ./public -p 80

在 CI 環(huán)境下主要做了一點(diǎn)改動(dòng)：使用 npm ci 代替 npm i，經(jīng)實(shí)驗(yàn)，npm ci 可以減少將近一半的的依賴安裝時(shí)間。

$ npm install  added 1154 packages in 60s  $ npm ci added 1154 packages in 35s

另外，當(dāng) package.json 與 package-lock.json 版本不匹配時(shí)，npm ci 將會(huì)報(bào)出異常，提前檢測出不安全信息，及早發(fā)現(xiàn)問題，及早解決問題。

多階段構(gòu)建

得益于緩存，現(xiàn)在鏡像構(gòu)建時(shí)間已經(jīng)快了不少。但是，此時(shí)鏡像的體積依舊過于龐大，這也將會(huì)導(dǎo)致部署時(shí)間的加長。原因如下

考慮下每次 CI/CD 部署的流程

•  在構(gòu)建服務(wù)器 (Runer) 構(gòu)建鏡像

•  把鏡像推至鏡像倉庫服務(wù)器

•  在生產(chǎn)服務(wù)器拉取鏡像，啟動(dòng)容器

顯而易見，鏡像體積過大會(huì)在前兩步上傳及下載時(shí)造成傳輸效率低下，增加每次部署的延時(shí)。

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

關(guān)于鏡像體積的過大，完全是因?yàn)閚ode_modules 臭名昭著的體積:

node_modules的體積

但最后我們只需要構(gòu)建生成的靜態(tài)資源，對于源文件以及 node_modules 下文件，占用體積過大且不必要，造成浪費(fèi)。

此時(shí)可以利用 Docker 的多階段構(gòu)建，僅來提取編譯后文件，即打包生成的靜態(tài)資源，對 Dockerfile 做一改進(jìn)

FROM node:10-alpine as builder  ENV PROJECT_ENV production  ENV NODE_ENV production  # http-server 不變動(dòng)也可以利用緩存  WORKDIR /code  ADD package.json package-lock.json /code  RUN npm ci  ADD . /code  RUN npm run build  # 選擇更小體積的基礎(chǔ)鏡像  FROM nginx:10-alpine  COPY --from=builder /code/public /usr/share/nginx/html

此時(shí)，鏡像體積從 1G+ 變成了 50M+。若此時(shí)的部署僅僅是在測試環(huán)境或者多分支環(huán)境下為了方便測試，那就大功告成，完美解決問題了。

使用對象存儲(chǔ)服務(wù) (OSS)

分析一下 50M+ 的鏡像體積，nginx:10-alpine 的鏡像是16M，剩下的40M是靜態(tài)資源。生產(chǎn)環(huán)境的靜態(tài)資源往往會(huì)在獨(dú)立域名上維護(hù)，并使用 cdn 進(jìn)行加速。

如果把靜態(tài)資源給上傳到文件存儲(chǔ)服務(wù)，即OSS，并使用 CDN 對 OSS 進(jìn)行加速，則沒有必要打入鏡像了。而在生產(chǎn)環(huán)境下也有對靜態(tài)資源上 CDN 的強(qiáng)烈需求。

此時(shí)鏡像大小會(huì)控制在 20M 以下。雖然極大地減小了鏡像體積，但是它會(huì)增加復(fù)雜度與增加鏡像構(gòu)建時(shí)間(如上傳到OSS)，對于測試環(huán)境或者分支環(huán)境沒必要使用 OSS。

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

•  /build，此類文件在項(xiàng)目中使用 require/import 引用，會(huì)被 webpack 打包并加 hash 值，并通過 publicPath 修改資源地址?？梢园汛祟愇募蟼髦?oss，并加上永久緩存，不需要打入鏡像

•  /static，此類文件在項(xiàng)目中直接引用根路徑，直接打入鏡像，如果上傳至 OSS 可能增加復(fù)雜度 (批量修改 publicPath)

此時(shí)通過一個(gè)腳本命令 npm run uploadOss，來把靜態(tài)資源上傳至 OSS。更新后的 Dockerfile 如下

FROM node:10-alpine as builder  ENV PROJECT_ENV production  ENV NODE_ENV production  # http-server 不變動(dòng)也可以利用緩存  WORKDIR /code  ADD package.json package-lock.json /code  RUN npm ci  ADD . /code  # npm run uploadOss 是把靜態(tài)資源上傳至 oss 上的腳本文件  RUN npm run build && npm run uploadOss  # 選擇更小體積的基礎(chǔ)鏡像  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

到此，關(guān)于“怎么使用Docker高效部署前端應(yīng)用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！