這篇“怎么使用docker部署前端應用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么使用docker部署前端應用”文章吧。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供臨桂網(wǎng)站建設、臨桂做網(wǎng)站、臨桂網(wǎng)站設計、臨桂網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、臨桂企業(yè)網(wǎng)站模板建站服務，10年臨桂做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

docker 變得越來越流行，它可以輕便靈活地隔離環(huán)境，進行擴容，方便運維管理。對開發(fā)者也更方便開發(fā)，測試與部署。
最重要的是， 當你面對一個陌生的項目，你可以照著 dockerfile，甚至不看文檔(文檔也不一定全，全也不一定對)就可以很快讓它在本地跑起來。

先讓它跑起來

首先，簡單介紹一下一個典型的前端應用部署流程

1. npm install, 安裝依賴

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

3. 服務化靜態(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)在這個前端服務已經(jīng)跑起來了。接下來你可以完成部署的其它階段了。一般情況下，以下就成了運維的工作了，不過，拓展自己的知識邊界總是沒錯的。

• 使用 nginx 或者 traefik 做反向代理

• 使用 kubernetes 或者 compose 等做編排。

• 使用 gitlab ci 或者 drone ci 等做 ci/cd

這時鏡像存在有兩個問題，導致每次部署時間過長，不利于產(chǎn)品的快速交付

• 構建鏡像時間過長

• 構建鏡像大小過大，1g+

從 dependencies 和 devdependencies 下手

陸小鳳說過，一個前端程序員若是每天工作八個小時，至少有兩個小時是白白浪費了的。一個小時用來 npm install，另一個小時用來 npm run build。

對于每次部署，如果能夠減少無用包的下載，便能夠節(jié)省很多鏡像構建時間。eslint，mocha，chai 等代碼風格測試模塊可以放到 devdependencies 中。在生產(chǎn)環(huán)境中使用 npm install --production 裝包。

關于兩者的區(qū)別可以參考文檔

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)定的。如果沒有新的安裝包需要下載，則再次構建鏡像時，無需重新裝包。則可以在 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

關于利用緩存有更多細節(jié)，需要特別注意一下，如 run git clone <repo> 的緩存此類

參考官方文檔

多階段構建

得益于緩存，現(xiàn)在鏡像構建時間已經(jīng)快了不少。但是，鏡像的體積依舊過于龐大，也會增加每次的部署時間
考慮下每次 ci 部署的流程

1. 在構建服務器構建鏡像

2. 把鏡像推至鏡像倉庫服務器，

3. 在生產(chǎn)服務器拉取鏡像，啟動容器

顯而易見，鏡像體積過大造成傳輸效率低下，增加每次部署的延時。

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

關于鏡像體積的過大，很大一部分是因為node_modules 臭名昭著的體積

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

參考官方文檔

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

# 選擇更小體積的基礎鏡像
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 以下

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

• /static，此類文件在項目中直接引用根路徑，打包時復制進 /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


# 選擇更小體積的基礎鏡像
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部署前端應用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關的知識內(nèi)容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞名稱：怎么使用docker部署前端應用
本文鏈接：http://www.rwnh.cn/article30/peopso.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、虛擬主機、App開發(fā)、外貿(mào)建站、ChatGPT、營銷型網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)