小編給大家分享一下使用docker部署前端應(yīng)用的案例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名與空間、虛擬主機、營銷軟件、網(wǎng)站建設(shè)、柯城網(wǎng)站維護、網(wǎng)站推廣。docker 變得越來越流行，它可以輕便靈活地隔離環(huán)境，進行擴容，方便運維管理。對開發(fā)者也更方便開發(fā)，測試與部署。
最重要的是， 當(dāng)你面對一個陌生的項目，你可以照著 Dockerfile，甚至不看文檔(文檔也不一定全，全也不一定對)就可以很快讓它在本地跑起來。
現(xiàn)在很強調(diào) devops 的理念，我把 devops 五個大字放在電腦桌面上，格物致知了一天?；砣婚_朗，devops 的意思就是寫一個 Dockerfile 去跑應(yīng)用(開玩笑。
這里介紹如何使用 Docker 部署前端應(yīng)用。千里之行，始于足下，足下的意思就是，先讓它能夠跑起來。
先讓它跑起來
首先，簡單介紹一下一個典型的前端應(yīng)用部署流程
npm install, 安裝依賴
npm run build，編譯，打包，生成靜態(tài)資源
服務(wù)化靜態(tài)資源
介紹完部署流程后，簡單寫一個 Dockerfile
FROM node:alpine # 代表生產(chǎn)環(huán)境 ENV PROJECT_ENV production WORKDIR /code ADD . /code RUN npm install && npm run build && npm install -g http-server EXPOSE 80 CMD http-server ./public -p 80
現(xiàn)在這個前端服務(wù)已經(jīng)跑起來了。接下來你可以完成部署的其它階段了。一般情況下，以下就成了運維的工作了，不過，拓展自己的知識邊界總是沒錯的。
使用 nginx 或者 traefik 做反向代理
使用 kubernetes 或者 compose 等做編排。
使用 gitlab ci 或者 drone ci 等做 CI/CD
這時鏡像存在有兩個問題，導(dǎo)致每次部署時間過長，不利于產(chǎn)品的快速交付
構(gòu)建鏡像時間過長
構(gòu)建鏡像大小過大，1G+
從 dependencies 和 devDependencies 下手
陸小鳳說過，一個前端程序員若是每天工作八個小時，至少有兩個小時是白白浪費了的。一個小時用來 npm install，另一個小時用來 npm run build。
對于每次部署，如果能夠減少無用包的下載，便能夠節(jié)省很多鏡像構(gòu)建時間。eslint，mocha，chai 等代碼風(fēng)格測試模塊可以放到 devDependencies 中。在生產(chǎn)環(huán)境中使用 npm install --production 裝包。
關(guān)于兩者的區(qū)別可以參考文檔 https://docs.npmjs.com/files/package.json.html#dependencies
FROM node:alpine ENV PROJECT_ENV production WORKDIR /code ADD . /code RUN npm install --production && npm run build && npm install -g http-server EXPOSE 80 CMD http-server ./public -p 80
好像是快了那么一點點。
我們注意到，相對于項目的源文件來講，package.json 是相對穩(wěn)定的。如果沒有新的安裝包需要下載，則再次構(gòu)建鏡像時，無需重新裝包。則可以在 npm install 上節(jié)省一半的時間。
利用鏡像緩存
對于 ADD 來講，如果需要添加的內(nèi)容沒有發(fā)生變化，則可以利用緩存。把 package.json 與源文件分隔開寫入鏡像是一個很好的選擇。目前，如果沒有新的安裝包更新的話，可以節(jié)省一半時間
FROM node:alpine ENV PROJECT_ENV production # http-server 不變動也可以利用緩存 RUN npm install -g http-server WORKDIR /code ADD package.json /code RUN npm install --production ADD . /code RUN npm run build EXPOSE 80 CMD http-server ./public -p 80
關(guān)于利用緩存有更多細節(jié)，需要特別注意一下，如 RUN git clone
參考官方文檔 https://docs.docker.com/develop/develop-images/dockerfile_best-practices/#leverage-build-cache
多階段構(gòu)建
得益于緩存，現(xiàn)在鏡像構(gòu)建時間已經(jīng)快了不少。但是，鏡像的體積依舊過于龐大，也會增加每次的部署時間
考慮下每次 CI 部署的流程
在構(gòu)建服務(wù)器構(gòu)建鏡像
把鏡像推至鏡像倉庫服務(wù)器，
在生產(chǎn)服務(wù)器拉取鏡像，啟動容器
顯而易見，鏡像體積過大造成傳輸效率低下，增加每次部署的延時。
即使，構(gòu)建服務(wù)器與生產(chǎn)服務(wù)器在同一節(jié)點下，沒有延時的問題。減少鏡像體積也能夠節(jié)省磁盤空間
關(guān)于鏡像體積的過大，很大一部分是因為node_modules 臭名昭著的體積
但最后我們只需要 public 文件夾下的內(nèi)容，對于源文件以及node_modules下文件，占用體積過大且不必要，造成浪費。
此時可以利用 Docker 的多階段構(gòu)建，僅來提取編譯后文件
參考官方文檔 https://docs.docker.com/develop/develop-images/multistage-build/
FROM node:alpine as builder ENV PROJECT_ENV production # http-server 不變動也可以利用緩存 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
此時，鏡像體積從 1G+ 變成了 50M+
使用 CDN
分析一下 50M+ 的鏡像體積，nginx:alpine 的鏡像是16M，剩下的40M是靜態(tài)資源。
如果把靜態(tài)資源給上傳到 CDN，則沒有必要打入鏡像了，此時鏡像大小會控制在 20M 以下
關(guān)于靜態(tài)資源，可以分類成兩部分
/static，此類文件在項目中直接引用根路徑，打包時復(fù)制進 /public 下，需要被打入鏡像
/build，此類文件需要 require 使用，會被 webpack 打包并加 hash 值，并可以通過 publicPath 修改資源地址?？梢园汛祟愇募蟼髦?cdn，并加上永久緩存，不需要打入鏡像
FROM node:alpine as builder ENV PROJECT_ENV production # http-server 不變動也可以利用緩存 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
看完了這篇文章，相信你對“使用docker部署前端應(yīng)用的案例”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
重慶分公司
重慶分公司
