建站
咨詢
售后
建站咨詢
新聞中心
Docker 變得越來(lái)越流行，它可以輕便靈活地隔離環(huán)境，進(jìn)行擴(kuò)容，運(yùn)維管理。對(duì)于業(yè)務(wù)開(kāi)發(fā)者而言，隨著持續(xù)集成的發(fā)展，對(duì)代碼質(zhì)量及快速迭代的要求也越來(lái)越高。
成都創(chuàng)新互聯(lián)專注于津市企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開(kāi)發(fā),購(gòu)物商城網(wǎng)站建設(shè)。津市網(wǎng)站建設(shè)公司,為津市等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
對(duì)于前端而言，在 CI 環(huán)境中使用也更容易集成開(kāi)發(fā)，測(cè)試與部署。比如可以為流水線(Pipeline)設(shè)置 Lint/Test/Security/Audit/Deploy/Artifact 等任務(wù)，更好地把控項(xiàng)目質(zhì)量。
現(xiàn)在無(wú)論是前端，后端還是運(yùn)維，都很強(qiáng)調(diào) devops 的理念，接下來(lái)我將會(huì)寫(xiě)一系列關(guān)于 devops 在前端中應(yīng)用的文章。
這里將介紹如何使用 Docker 部署前端應(yīng)用，千里之行，始于足下。始于足下的意思就是，先讓它能夠跑起來(lái)。
先讓它跑起來(lái)
首先，簡(jiǎn)單介紹一下一個(gè)典型的前端應(yīng)用部署流程
- npm install, 安裝依賴
- npm run build，編譯，打包，生成靜態(tài)資源
- 服務(wù)化靜態(tài)資源，如 nginx
介紹完部署流程后，簡(jiǎn)單寫(xiě)一個(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ì)寫(xiě)死該環(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)跑起來(lái)了，接下來(lái)你可以完成部署的其它階段了。
一般情況下，以下就成了運(yùn)維的工作了，不過(guò)，拓展自己的知識(shí)邊界總是沒(méi)錯(cuò)的。其它階段介紹如下
- 使用 nginx 或者 traefik 做反向代理。在我內(nèi)部集群中使用了 traefik，詳見(jiàn) traefik 簡(jiǎn)易入門(mén)
- 使用 kubernetes 或者 docker compose 做容器編排。在我內(nèi)部集群中使用了 compose，詳見(jiàn) docker compose 簡(jiǎn)易入門(mén)
- 使用 gitlab ci，drone ci 或者 github actions 等做 CI/CD 自動(dòng)部署。
這時(shí)鏡像存在兩個(gè)問(wèn)題，導(dǎo)致每次部署時(shí)間過(guò)長(zhǎng)，不利于產(chǎn)品的快速交付，沒(méi)有快速交付，也就沒(méi)有敏捷開(kāi)發(fā) (Agile)
- 構(gòu)建鏡像時(shí)間過(guò)長(zhǎng)
- 構(gòu)建鏡像大小過(guò)大，多時(shí)甚至 1G+
利用鏡像緩存
我們注意到，相對(duì)于項(xiàng)目的源文件來(lái)講，package.json 是相對(duì)穩(wěn)定的。如果沒(méi)有新的安裝包需要下載，則再次構(gòu)建鏡像時(shí)，無(wú)需重新構(gòu)建依賴。則可以在 npm install 上節(jié)省一半的時(shí)間。
對(duì)于 ADD 來(lái)講，如果需要添加的文件內(nèi)容的 checksum 沒(méi)有發(fā)生變化，則可以利用緩存。把 package.json/package-lock.json 與源文件分隔開(kāi)寫(xiě)入鏡像是一個(gè)很好的選擇。目前，如果沒(méi)有新的安裝包更新的話，可以節(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
關(guān)于緩存及可能導(dǎo)致的問(wèn)題，可以參考我的文章 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)出異常，提前檢測(cè)出不安全信息，及早發(fā)現(xiàn)問(wèn)題，及早解決問(wèn)題。
多階段構(gòu)建
得益于緩存，現(xiàn)在鏡像構(gòu)建時(shí)間已經(jīng)快了不少。但是，此時(shí)鏡像的體積依舊過(guò)于龐大，這也將會(huì)導(dǎo)致部署時(shí)間的加長(zhǎng)。原因如下
考慮下每次 CI/CD 部署的流程
- 在構(gòu)建服務(wù)器 (Runer) 構(gòu)建鏡像
- 把鏡像推至鏡像倉(cāng)庫(kù)服務(wù)器
- 在生產(chǎn)服務(wù)器拉取鏡像，啟動(dòng)容器
顯而易見(jiàn)，鏡像體積過(guò)大會(huì)在前兩步上傳及下載時(shí)造成傳輸效率低下，增加每次部署的延時(shí)。
即使，構(gòu)建服務(wù)器與生產(chǎn)服務(wù)器在同一節(jié)點(diǎn)下，沒(méi)有延時(shí)的問(wèn)題 (基本沒(méi)可能)。減少鏡像體積也能夠節(jié)省磁盤(pán)空間。
關(guān)于鏡像體積的過(guò)大，完全是因?yàn)閚ode_modules 臭名昭著的體積:
node_modules的體積
但最后我們只需要構(gòu)建生成的靜態(tài)資源，對(duì)于源文件以及 node_modules 下文件，占用體積過(guò)大且不必要，造成浪費(fèi)。
此時(shí)可以利用 Docker 的多階段構(gòu)建，僅來(lái)提取編譯后文件，即打包生成的靜態(tài)資源，對(duì) 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í)的部署僅僅是在測(cè)試環(huán)境或者多分支環(huán)境下為了方便測(cè)試，那就大功告成，完美解決問(wèn)題了。
使用對(duì)象存儲(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 對(duì) OSS 進(jìn)行加速，則沒(méi)有必要打入鏡像了。而在生產(chǎn)環(huán)境下也有對(duì)靜態(tài)資源上 CDN 的強(qiáng)烈需求。
此時(shí)鏡像大小會(huì)控制在 20M 以下。雖然極大地減小了鏡像體積，但是它會(huì)增加復(fù)雜度與增加鏡像構(gòu)建時(shí)間(如上傳到OSS)，對(duì)于測(cè)試環(huán)境或者分支環(huán)境沒(méi)必要使用 OSS。
關(guān)于靜態(tài)資源，可以分類成兩部分：
- /build，此類文件在項(xiàng)目中使用 require/import 引用，會(huì)被 webpack 打包并加 hash 值，并通過(guò) publicPath 修改資源地址。可以把此類文件上傳至 oss，并加上永久緩存，不需要打入鏡像
- /static，此類文件在項(xiàng)目中直接引用根路徑，直接打入鏡像，如果上傳至 OSS 可能增加復(fù)雜度 (批量修改 publicPath)
此時(shí)通過(guò)一個(gè)腳本命令 npm run uploadOss，來(lái)把靜態(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
小結(jié)
經(jīng)過(guò)本篇文章總結(jié)，在前端中構(gòu)建鏡像需要注意以下幾點(diǎn)
- 鏡像中使用基于 alpine 的鏡像，減小鏡像體積。
- 鏡像中需要鎖定 node 的版本號(hào)，盡可能也鎖定 alpine 的版本號(hào)，如 node:10.19-alpine3.11。(我示例代碼中未如此詳細(xì)地指出)
- 選擇合適的環(huán)境變量 NODE_ENV 及 PROJECT_ENV，如在測(cè)試環(huán)境下進(jìn)行構(gòu)建
- npm ci 替代 npm i，避免版本問(wèn)題及提高依賴安裝速度
- package.json 單獨(dú)添加，充分利用鏡像緩存
- 使用多階段構(gòu)建，減小鏡像體積
- 如有必要，靜態(tài)資源請(qǐng)上 CDN
網(wǎng)站標(biāo)題：前端高級(jí)進(jìn)階：使用Docker高效部署你的前端應(yīng)用
網(wǎng)頁(yè)網(wǎng)址：http://www.dlmjj.cn/article/djgjidh.html
