使用码头工人部署前端应用的案例

　　介绍

小编给大家分享一下使用码头工人部署前端应用的案例,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

码头工人变得越来越流行,它可以轻便灵活地隔离环境,进行扩容,方便运维管理。对开发者也更方便开发,测试与部署。
最重要的是,当你面对一个陌生的项目,你可以照着Dockerfile,甚至不看文档(文档也不一定全,全也不一定对)就可以很快让它在本地跑起来。

现在很强调devops的理念,我把devops五个大字放在电脑桌面上,格物致知了一天。豁然开朗,devops的意思就是写一个Dockerfile去跑应用(开玩笑。

这里介绍如何使用码头工人部署前端应用。千里之行,始于足下,足下的意思就是,先让它能够跑起来。

<强>先让它跑起来

首先,简单介绍一下一个典型的前端应用部署流程

<李>

npm安装,安装依赖

<李>

npm运行构建,编译,打包,生成静态资源

<李>

服务化静态资源

介绍完部署流程后,简单写一个Dockerfile

得到节点:高山 　　 　　#,代表生产环境 　　ENV  PROJECT_ENV 生产 　　WORKDIR /代码 　　ADD 只/代码 　　RUN  npm  install ,,, npm  RUN  build ,,, npm  install  -g  http服务器 　　EXPOSE  80 　　 　　CMD  http-server 。/public  -p  80年

现在这个前端服务已经跑起来了。接下来你可以完成部署的其它阶段了。一般情况下,以下就成了运维的工作了,不过,拓展自己的知识边界总是没错的。

<李>

使用nginx或者traefik做反向代理

<李>

使用kubernetes或者组成等做编排。

<李>

使用gitlab ci或者无人机ci等做ci/CD

这时镜像存在有两个问题,导致每次部署时间过长,不利于产品的快速交付

<李>

构建镜像时间过长

<李>

构建镜像大小过大,1 g +

<强>从依赖项和devDependencies下手

陆小凤说过,一个前端程序员若是每天工作八个小时,至少有两个小时是白白浪费了的。一个小时用来npm安装,另一个小时用来npm运行构建。

对于每次部署,如果能够减少无用包的下载,便能够节省很多镜像构建时间.eslint,咖啡,茶等代码风格测试模块可以放到devDependencies中。在生产环境中使用npm安装——生产装包。

关于两者的区别可以参考文档https://docs.npmjs.com/files/package.json.html依赖性

得到节点:高山 　　 　　ENV  PROJECT_ENV 生产 　　WORKDIR /代码 　　ADD 只/代码 　　RUN  npm  install ——production ,,, npm  RUN  build ,,, npm  install  -g  http服务器 　　EXPOSE  80 　　 　　CMD  http-server 。/public  -p  80年

好像是快了那么一点点。

我们注意到,相对于项目的源文件来讲,包。json是相对稳定的。如果没有新的安装包需要下载,则再次构建镜像时,无需重新装包。则可以在npm安装上节省一半的时间。

<>强利用镜像缓存

对于添加来讲,如果需要添加的内容没有发生变化,则可以利用缓存。把包。json与源文件分隔开写入镜像是一个很好的选择。目前,如果没有新的安装包更新的话,可以节省一半时间

得到节点:高山 　　 　　ENV  PROJECT_ENV 生产 　　 　　#,http-server 不变动也可以利用缓存 　　RUN  npm  install  -g  http服务器 　　 　　WORKDIR /代码 　　 　　ADD  package.json /代码 　　RUN  npm  install ——生产 　　 　　ADD 只/代码 　　RUN  npm  RUN 构建 　　EXPOSE  80 　　 　　CMD  http-server 。/public  -p  80年

关于利用缓存有更多细节,需要特别注意一下,如git克隆& lt; repo>的缓存此类

参考官方文档https://docs.docker.com/develop/develop-images/dockerfile_best-practices/leverage-build-cache

<强>多阶段构建

得益于缓存,现在镜像构建时间已经快了不少。但是,镜像的体积依旧过于庞大,也会增加每次的部署时间
考虑下每次CI部署的流程

<李>

在构建服务器构建镜像

<李>

把镜像推至镜像仓库服务器,

使用码头工人部署前端应用的案例