如何使用docker部署前端應(yīng)用的方法步驟
docker 變得越來(lái)越流行,它可以輕便靈活地隔離環(huán)境,進(jìn)行擴(kuò)容,方便運(yùn)維管理。對(duì)開發(fā)者也更方便開發(fā),測(cè)試與部署。
最重要的是, 當(dāng)你面對(duì)一個(gè)陌生的項(xiàng)目,你可以照著 Dockerfile,甚至不看文檔(文檔也不一定全,全也不一定對(duì))就可以很快讓它在本地跑起來(lái)。
現(xiàn)在很強(qiáng)調(diào) devops 的理念,我把 devops 五個(gè)大字放在電腦桌面上,格物致知了一天?;砣婚_朗,devops 的意思就是寫一個(gè) Dockerfile 去跑應(yīng)用(開玩笑。
這里介紹如何使用 Docker 部署前端應(yīng)用。千里之行,始于足下,足下的意思就是,先讓它能夠跑起來(lái)。
先讓它跑起來(lái)
首先,簡(jiǎn)單介紹一下一個(gè)典型的前端應(yīng)用部署流程
- npm install, 安裝依賴
- npm run build,編譯,打包,生成靜態(tài)資源
- 服務(wù)化靜態(tài)資源
介紹完部署流程后,簡(jiǎn)單寫一個(gè) 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)在這個(gè)前端服務(wù)已經(jīng)跑起來(lái)了。接下來(lái)你可以完成部署的其它階段了。一般情況下,以下就成了運(yùn)維的工作了,不過(guò),拓展自己的知識(shí)邊界總是沒錯(cuò)的。
- 使用 nginx 或者 traefik 做反向代理
- 使用 kubernetes 或者 compose 等做編排。
- 使用 gitlab ci 或者 drone ci 等做 CI/CD
這時(shí)鏡像存在有兩個(gè)問(wèn)題,導(dǎo)致每次部署時(shí)間過(guò)長(zhǎng),不利于產(chǎn)品的快速交付
- 構(gòu)建鏡像時(shí)間過(guò)長(zhǎng)
- 構(gòu)建鏡像大小過(guò)大,1G+
從 dependencies 和 devDependencies 下手
陸小鳳說(shuō)過(guò),一個(gè)前端程序員若是每天工作八個(gè)小時(shí),至少有兩個(gè)小時(shí)是白白浪費(fèi)了的。一個(gè)小時(shí)用來(lái) npm install,另一個(gè)小時(shí)用來(lái) npm run build。
對(duì)于每次部署,如果能夠減少無(wú)用包的下載,便能夠節(jié)省很多鏡像構(gòu)建時(shí)間。eslint,mocha,chai 等代碼風(fēng)格測(cè)試模塊可以放到 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
好像是快了那么一點(diǎn)點(diǎn)。
我們注意到,相對(duì)于項(xiàng)目的源文件來(lái)講,package.json 是相對(duì)穩(wěn)定的。如果沒有新的安裝包需要下載,則再次構(gòu)建鏡像時(shí),無(wú)需重新裝包。則可以在 npm install 上節(jié)省一半的時(shí)間。
利用鏡像緩存
對(duì)于 ADD 來(lái)講,如果需要添加的內(nèi)容沒有發(fā)生變化,則可以利用緩存。把 package.json 與源文件分隔開寫入鏡像是一個(gè)很好的選擇。目前,如果沒有新的安裝包更新的話,可以節(jié)省一半時(shí)間
FROM node:alpine ENV PROJECT_ENV production # http-server 不變動(dòng)也可以利用緩存 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)于利用緩存有更多細(xì)節(jié),需要特別注意一下,如 RUN git clone <repo> 的緩存此類
參考官方文檔 https://docs.docker.com/develop/develop-images/dockerfile_best-practices/#leverage-build-cache
多階段構(gòu)建
得益于緩存,現(xiàn)在鏡像構(gòu)建時(shí)間已經(jīng)快了不少。但是,鏡像的體積依舊過(guò)于龐大,也會(huì)增加每次的部署時(shí)間
考慮下每次 CI 部署的流程
- 在構(gòu)建服務(wù)器構(gòu)建鏡像
- 把鏡像推至鏡像倉(cāng)庫(kù)服務(wù)器,
- 在生產(chǎn)服務(wù)器拉取鏡像,啟動(dòng)容器
顯而易見,鏡像體積過(guò)大造成傳輸效率低下,增加每次部署的延時(shí)。
即使,構(gòu)建服務(wù)器與生產(chǎn)服務(wù)器在同一節(jié)點(diǎn)下,沒有延時(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,則沒有必要打入鏡像了,此時(shí)鏡像大小會(huì)控制在 20M 以下
關(guān)于靜態(tài)資源,可以分類成兩部分
- /static,此類文件在項(xiàng)目中直接引用根路徑,打包時(shí)復(fù)制進(jìn) /public 下,需要被打入鏡像
- /build,此類文件需要 require 使用,會(huì)被 webpack 打包并加 hash 值,并可以通過(guò) publicPath 修改資源地址。可以把此類文件上傳至 cdn,并加上永久緩存,不需要打入鏡像
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
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Docker Base Image自己創(chuàng)建具體實(shí)現(xiàn)
這篇文章主要介紹了Docker Base Image創(chuàng)建具體實(shí)現(xiàn)的相關(guān)資料,這里提供了詳細(xì)的具體步驟,需要的朋友可以參考下2016-11-11Docker容器中運(yùn)行flume及啟動(dòng)不輸出運(yùn)行日志問(wèn)題
這篇文章主要介紹了 Docker容器中運(yùn)行flume及啟動(dòng)不輸出運(yùn)行日志問(wèn)題及解決方法,需要的朋友參考下吧2018-03-03docker環(huán)境下安裝jenkins容器的詳細(xì)教程
這篇文章主要介紹了docker環(huán)境下安裝jenkins容器的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05在Docker容器中部署Django的時(shí)區(qū)問(wèn)題
本文主要介紹了在Docker容器中部署Django的時(shí)區(qū)問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10Docker啟動(dòng)容器后自動(dòng)關(guān)閉問(wèn)題解決
在使用Docker創(chuàng)建并啟動(dòng)mysql容器時(shí),發(fā)現(xiàn)mysql容器并沒有啟動(dòng)而是自動(dòng)關(guān)閉了,本文主要介紹了Docker啟動(dòng)容器后自動(dòng)關(guān)閉問(wèn)題解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-07-07