array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助(Microsoft Help Viewer)的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v;报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文(变量对象,作用域链,this)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记:快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习(二)Flotr2,雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树(Expression)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例:事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 只需简单两步,轻松缩减 Node.js 应用的镜像大小 - 爱码网

只需简单两步,轻松缩减 Node.js 应用的镜像大小


出品丨Docker公司(ID:docker-cn)

编译丨小东

每周一、三、五晚6点10分  与您不见不散


说在前面


在处理 Node.js应用程序时,我注意到部署镜像的时间有时候需要很长时间,远超我的预期。于是,我开始深入研究这个问题,并且发现只需两个步骤就可以让 948M 大小的 Docker 镜像缩减至 78.6M,从而减少部署时间、提升效率。


如下图所示,这就是我尝试的结果(948MB缩减至78.6MB):


只需简单两步,轻松缩减 Node.js 应用的镜像大小

&

初始配置


该应用程序是一个典型的 Web 应用程序,它具有前端部分(React.js)和后端部分(在 Express.js 上的 Node.js 服务器)。构建过程包含以下4个步骤:


  1. 构建 NPM;

  2. 运行测试;

  3. 构建 Docker 镜像;

  4. 发布到 hub.docker.com ;

只需简单两步,轻松缩减 Node.js 应用的镜像大小


应用程序更改前的 Dockerfile (位于应用程序目录的根目录中),若下所示:


FROM node:8.10.0

 

RUN mkdir -p /usr/app/build

WORKDIR /usr/app

 

COPY ./build /usr/app/build

COPY ./node_modules /usr/app/node_modules

COPY ./package.json /usr/app/package.json

 

EXPOSE 3000

 

CMD [ "npm", "run", "start" ]


该 Dockerfile 做了以下几件事:


  • 将 /usr/app 设置为应用程序目录;

  • 将构建文件复制到应用程序目录;

  • 将所需的 Node.js 模块复制到应用程序目录;

只需简单两步,轻松缩减 Node.js 应用的镜像大小


步骤1:将基础的 Node.js 镜像替换为缩减后的镜像(948MB缩减至206MB)


Node.js 镜像仓库为每个 Node.js 版本提供了若干个镜像标签。例如,8.10.0版本就有6个不同的镜像标签:


  • 8.10.0 – 266MB compressed

  • 8.10.0-alpine – 23MB compressed

  • 8.10.0-onbuild – 266MB compressed

  • 8.10.0-slim – 92MB compressed

  • 8.10.0-stretch – 343MB compressed

  • 8.10.0-wheezy – 202MB compressed

有趣的是这个 alpine 版本。这是一个最小的可用镜像,因为它基于 Alpine Linux 项目。Alpine 使用的是 musl libc 而不是内部的 glibc ,但 Node.js 通常在典型的开发者系统中使用后者(glibc)。这可能会破坏您使用的一些函数库,但是我的基于 Express.js 的应用程序并没有问题。如下所示,切换到 alpine:


# change the first line from:

FROM node:8.10.0

 

# to:

FROM node:8.10.0-alpine


接下来,运行“docker build”命令。在我的案例中,镜像的大小已经缩减到206MB,比初始大小减少了78%!

只需简单两步,轻松缩减 Node.js 应用的镜像大小


步骤2:使用 NPM --production 标签(206 MB缩减至79 MB)


默认情况下,npm install 将安装所有依赖项,包括 devDependencies 部分。有了 --production  标签,我们就可以从 package.json 文件中仅安装所需的依赖项。在 devDependencies 部分中,我保留了构建系统、测试工具和一些其它的开发工具。我习惯于将 React.js 函数库和其它的 UI 依赖项一起保留在 package.json 文件中,但是它看起来是不正确的,因为我有 webpack 来生成所有的 UI 依赖项。因此,正确的方法是将所有不会直接用于在生产服务器上,也不会直接用于在 devDependencies 部分上的依赖项移除。


原则是:如果依赖项只是在构建期间需要用到,请将它移到 devDependencies 部分。


我没有为服务器文件打包,所以我将所有服务器依赖项保留在依赖项部分中,就像以前一样。这意味着工作流程应包含以下步骤:


  • 构建 UI 包;

  • 将UI包复制到 Docker 镜像;

  • 将服务器文件复制到 Docker 镜像;

  • 将 package.json 文件复制到 Docker 镜像;

  • 在镜像中执行“npm install --production”命令;

只需简单两步,轻松缩减 Node.js 应用的镜像大小


我得到的 Dockerfile 的最终版本,如下所示:


FROM node:8.10.0-alpine

 

RUN mkdir -p /usr/app/build

WORKDIR /usr/app

 

COPY ./build /usr/app/build

COPY ./package.json /usr/app/package.json

 

RUN cd /usr/app && npm install --production

 

EXPOSE 3000

 

CMD [ "npm", "run", "start" ]


再次运行“docker build”命令。在我的案例中,镜像大小缩减至79M,这一次比初始大小减少了91%!

只需简单两步,轻松缩减 Node.js 应用的镜像大小


结  论


只需简单两步,轻松缩减 Node.js 应用的镜像大小


两个简单的步骤可以将镜像大小从948 MB缩减到79 MB。现在容器部署过程所需的时间减少了很多。在hub.docker.com 上被压缩的镜像大小看起来更好!


只需简单两步,轻松缩减 Node.js 应用的镜像大小


点击下列标题,阅读更多干货



如果本文对你有帮助,欢迎分享到朋友圈!获取更多Docker实用技巧,扫描下图二维码!

 只需简单两步,轻松缩减 Node.js 应用的镜像大小

相关文章: