如何使用 docker 部署前端應用

DesGemini 發(fā)布于2019-06-28 17:06 / 2449人閱讀

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

如何使用 docker 部署前端應用

docker 變得越來越流行，它可以輕便靈活地隔離環(huán)境，進行擴容，方便運維管理。對開發(fā)者也更方便開發(fā)，測試與部署。

最重要的是， 當你面對一個陌生的項目，你可以照著 Dockerfile，甚至不看文檔(文檔也不一定全，全也不一定對)就可以很快讓它在本地跑起來。

現(xiàn)在很強調 devops 的理念，我把 devops 五個大字放在電腦桌面上，格物致知了一天。豁然開朗，devops 的意思就是寫一個 Dockerfile 去跑應用(開玩笑。

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

本文地址 http://shanyue.tech/post/depl...

先讓它跑起來

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

npm install, 安裝依賴

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

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

介紹完部署流程后，簡單寫一個 Dockerfile

FROM node:alpine

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

使用 nginx 或者 traefik 做反向代理

使用 kubernetes 或者 compose 等做編排。

使用 gitlab ci 或者 drone ci 等做 CI/CD

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

構建鏡像時間過長

構建鏡像大小過大，1G+

從 dependencies 和 devDependencies 下手

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

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

關于兩者的區(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

好像是快了那么一點點。

我們注意到，相對于項目的源文件來講，package.json 是相對穩(wěn)定的。如果沒有新的安裝包需要下載，則再次構建鏡像時，無需重新裝包。則可以在 npm install 上節(jié)省一半的時間。

利用鏡像緩存

對于 ADD 來講，如果需要添加的內容沒有發(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 的緩存此類

參考官方文檔 https://docs.docker.com/devel...

多階段構建

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

考慮下每次 CI 部署的流程

在構建服務器構建鏡像

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

在生產服務器拉取鏡像，啟動容器

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

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

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

但最后我們只需要 public 文件夾下的內容，對于源文件以及node_modules下文件，占用體積過大且不必要，造成浪費。

此時可以利用 Docker 的多階段構建，僅來提取編譯后文件

參考官方文檔 https://docs.docker.com/devel...

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
RUN npm run build

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

云服務器 GPU云服務器 docker應用使用演示 docker容器部署應用 docker部署java應用 docker部署web應用

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/27719.html

[手把手系列之]Docker 部署 vue 項目

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

VPointer 2019-05-22 16:41 評論0 收藏0
服務器部署工具 - 收藏集 - 掘金

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

Shonim 2019-07-25 13:56 評論0 收藏0
前端需要了解的 Docker 與 Kubernetes 知識

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

ChristmasBoy 2019-06-28 17:11 評論0 收藏0
前端需要了解的 Docker 與 Kubernetes 知識

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

孫吉亮 2019-07-01 17:12 評論0 收藏0
來說說Kubernetes的運作機制

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

yanest 2019-04-30 14:44 評論0 收藏0