成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

如何使用 docker 部署前端應(yīng)用

DesGemini / 2475人閱讀

摘要：如何使用部署前端應(yīng)用變得越來(lái)越流行，它可以輕便靈活地隔離環(huán)境，進(jìn)行擴(kuò)容，方便運(yùn)維管理。對(duì)開(kāi)發(fā)者也更方便開(kāi)發(fā)，測(cè)試與部署。這里介紹如何使用部署前端應(yīng)用。使用或者做反向代理使用或者等做編排。

如何使用 docker 部署前端應(yīng)用

docker 變得越來(lái)越流行，它可以輕便靈活地隔離環(huán)境，進(jìn)行擴(kuò)容，方便運(yùn)維管理。對(duì)開(kāi)發(fā)者也更方便開(kāi)發(fā)，測(cè)試與部署。

最重要的是， 當(dāng)你面對(duì)一個(gè)陌生的項(xiàng)目，你可以照著 Dockerfile，甚至不看文檔(文檔也不一定全，全也不一定對(duì))就可以很快讓它在本地跑起來(lái)。

現(xiàn)在很強(qiáng)調(diào) devops 的理念，我把 devops 五個(gè)大字放在電腦桌面上，格物致知了一天?；砣婚_(kāi)朗，devops 的意思就是寫(xiě)一個(gè) Dockerfile 去跑應(yīng)用(開(kāi)玩笑。

這里介紹如何使用 Docker 部署前端應(yīng)用。千里之行，始于足下，足下的意思就是，先讓它能夠跑起來(lái)。

本文地址 http://shanyue.tech/post/depl...
先讓它跑起來(lái)

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

npm install, 安裝依賴(lài)

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

服務(wù)化靜態(tài)資源

介紹完部署流程后，簡(jiǎn)單寫(xiě)一個(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í)邊界總是沒(méi)錯(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/...

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)定的。如果沒(méi)有新的安裝包需要下載，則再次構(gòu)建鏡像時(shí)，無(wú)需重新裝包。則可以在 npm install 上節(jié)省一半的時(shí)間。

利用鏡像緩存

對(duì)于 ADD 來(lái)講，如果需要添加的內(nèi)容沒(méi)有發(fā)生變化，則可以利用緩存。把 package.json 與源文件分隔開(kāi)寫(xiě)入鏡像是一個(gè)很好的選擇。目前，如果沒(méi)有新的安裝包更新的話(huà)，可以節(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 的緩存此類(lèi)

參考官方文檔 https://docs.docker.com/devel...
多階段構(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)容器

顯而易見(jiàn)，鏡像體積過(guò)大造成傳輸效率低下，增加每次部署的延時(shí)。

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

關(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/devel...

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，則沒(méi)有必要打入鏡像了，此時(shí)鏡像大小會(huì)控制在 20M 以下

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

/static，此類(lèi)文件在項(xiàng)目中直接引用根路徑，打包時(shí)復(fù)制進(jìn) /public 下，需要被打入鏡像

/build，此類(lèi)文件需要 require 使用，會(huì)被 webpack 打包并加 hash 值，并可以通過(guò) publicPath 修改資源地址?？梢园汛祟?lèi)文件上傳至 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
RUN npm run build

# 選擇更小體積的基礎(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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/27719.html

相關(guān)文章

  • [手把手系列之]Docker 部署 vue 項(xiàng)目

    摘要：部署項(xiàng)目寫(xiě)在前面作為輕量級(jí)虛擬化技術(shù)，擁有持續(xù)集成版本控制可移植性隔離性和安全性等優(yōu)勢(shì)。容器可以被創(chuàng)建啟動(dòng)停止刪除暫停等。重新運(yùn)行應(yīng)用容器直接基于鏡像來(lái)啟動(dòng)容器，運(yùn)行命令將宿主機(jī)的掛載到容器的目錄上。Docker 部署 vue 項(xiàng)目 1.寫(xiě)在前面： Docker 作為輕量級(jí)虛擬化技術(shù)，擁有持續(xù)集成、版本控制、可移植性、隔離性和安全性等優(yōu)勢(shì)。本文使用Docker來(lái)部署一個(gè)vue的前端應(yīng)用，并盡...

    VPointer 評(píng)論0 收藏0

  • 服務(wù)器部署工具 - 收藏集 - 掘金

    摘要：基本入門(mén)前端掘金作者本文屬于翻譯文章，原文鏈接為。如果如何把應(yīng)用放在容器中運(yùn)行掘金本文適合零基礎(chǔ)，且希望使用運(yùn)行應(yīng)用的人士。后端掘金使用構(gòu)建網(wǎng)站。 nginx 基本入門(mén) - 前端 - 掘金作者：villainthr 本文屬于翻譯文章，原文鏈接為 nginx Beginner’s Guide。是至今為止見(jiàn)過(guò)最好的 nginx 入門(mén)文章。額。。。沒(méi)有之一。 這篇教程簡(jiǎn)單介紹了 nginx ...

    Shonim 評(píng)論0 收藏0

  • 前端需要了解的 Docker 與 Kubernetes 知識(shí)

    摘要：打開(kāi)終端執(zhí)行，再開(kāi)一個(gè)終端輸入輸出，則表示該服務(wù)沒(méi)有問(wèn)題。將服務(wù)打包成鏡像，然后將鏡像實(shí)例化并運(yùn)行，方便部署。此處以我的賬號(hào)為例，需要推送到你自己的賬號(hào)。是一種自動(dòng)化運(yùn)維工具，本文主要需要了解，，三個(gè)概念。至此成功使用部署應(yīng)用。 本文將以一個(gè)簡(jiǎn)單的示例演示如何使用 Docker 與 Kubernetes 部署應(yīng)用上線(xiàn)。 Http Service 首先使用 Go 語(yǔ)言搭建一個(gè)簡(jiǎn)單的 Ht...

    ChristmasBoy 評(píng)論0 收藏0

  • 前端需要了解的 Docker 與 Kubernetes 知識(shí)

    摘要：打開(kāi)終端執(zhí)行，再開(kāi)一個(gè)終端輸入輸出，則表示該服務(wù)沒(méi)有問(wèn)題。將服務(wù)打包成鏡像，然后將鏡像實(shí)例化并運(yùn)行，方便部署。此處以我的賬號(hào)為例，需要推送到你自己的賬號(hào)。是一種自動(dòng)化運(yùn)維工具，本文主要需要了解，，三個(gè)概念。至此成功使用部署應(yīng)用。 本文將以一個(gè)簡(jiǎn)單的示例演示如何使用 Docker 與 Kubernetes 部署應(yīng)用上線(xiàn)。 Http Service 首先使用 Go 語(yǔ)言搭建一個(gè)簡(jiǎn)單的 Ht...

    孫吉亮 評(píng)論0 收藏0

  • 來(lái)說(shuō)說(shuō)Kubernetes的運(yùn)作機(jī)制

    摘要：提供用于獲取有關(guān)容器和容器組狀態(tài)的實(shí)時(shí)信息的服務(wù)，以及有關(guān)群集中開(kāi)發(fā)人員操作的詳細(xì)信息。集群最高級(jí)別的抽象是指運(yùn)行本身是集群應(yīng)用程序的一組機(jī)器及其管理的容器，一個(gè)集群必須有一個(gè)，即命令和控制集群中所有其他機(jī)器的系統(tǒng)。Docker容器改變了人們對(duì)開(kāi)發(fā)、部署和維護(hù)軟件的思考方式，利用現(xiàn)代操作系統(tǒng)的本機(jī)隔離功能，容器支持類(lèi)似于虛擬機(jī)的關(guān)注點(diǎn)分離，但是與基于虛擬機(jī)監(jiān)控程序的虛擬機(jī)相比，它的開(kāi)銷(xiāo)要小得...

    yanest 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<