桂哥网络与您分享了使用docker部署前端应用程序的案例。希望你看完这篇文章有所收获。大家一起讨论一下。
码头工人越来越受欢迎。它可以隔离环境,扩大容量,方便运维管理。开发人员开发、测试和部署也更加方便。
最重要的是,当你面对一个奇怪的项目时,你可以通过遵循Dockerfile使它在本地快速运行,甚至不用看文档(文档不一定完整或正确)。
现在我非常强调devops的想法。我把五个字devops放在电脑桌面上,一天就学会了一切。突然,devops的意思是写一个Dockerfile来运行应用(开玩笑。
下面是如何使用Docker部署前端应用程序。千里之行,始于足下,即能先跑。
先让它跑起来
首先,简单介绍一个典型的前端应用部署流程
Npm安装,安装相关性
Npm运行构建、编译、打包和生成静态资源
服务静态资源
在介绍了部署过程之后,只需编写一个Dockerfile
FROMnode:alpine
#代表生产环境
ENVPROJECT_ENVproduction
工作目录/代码
添加。/code
runpminstallnpmrunbuildnpminstall-ghttp-服务器
曝光80
CMDhttp-服务器。/public-p80现在这个前端服务正在运行。然后,您可以完成部署的其他阶段。一般来说,以下是运维工作,但拓展你的知识边界总是对的。
使用nginx或traefik作为反向代理
使用kubernetes或compose进行编辑。
使用gitlab ci或无人机ci作为配置项/光盘
此时镜像存在两个问题,导致部署时间过长,不利于产品的快速交付
建筑镜子的时间太长了
构建图像太大,1G
从 dependencies 和 devDependencies 下手
陆小凤说,如果一个前端程序员一天工作八个小时,至少浪费两个小时。一个小时用于npm安装,另一个小时用于npm运行构建。
对于每个部署,如果能减少无用包的下载,可以节省大量的映像构建时间。诸如eslint、mocha和chai这样的代码风格测试模块可以放入devDependencies中。在生产环境中使用npm安装-生产包装。
关于两者之间的区别,请参阅文件https://docs.npmjs.com/files/package.json.html#dependencies
FROMnode:alpine
ENVPROJECT_ENVproduction
工作目录/代码
添加。/code
runnminstall-productionnpmrunbuildnpminstal-ghttp-server
曝光80
CMDhttp-服务器。/public-p80好像快了一点。
我们注意到package.json相对于项目的源文件是比较稳定的。如果没有新的安装包可以下载,那么在重新构建映像时就不需要重新打包了。您可以节省一半的时间在npm安装。
利用镜像缓存
对于ADD,如果要添加的内容没有改变,可以使用缓存。将package.json从源文件中分离出来并写入映像是一个很好的选择。目前,如果没有新的安装包更新,可以节省一半的时间
FROMnode:alpine
ENVPROJECT_ENVproduction
# http-服务器可以在不改变的情况下利用缓存
runnminstall-ghttp-服务器
工作目录/代码
ADDpackage.json/code
运行安装-生产
添加。/code
RUNnpmrunbuild
曝光80
CMDhttp-服务器。/public-p80关于利润
用缓存有更多细节,需要特别注意一下,如 RUN git clone <repo> 的缓存此类参考官方文档 https://docs.docker.com/develop/develop-images/dockerfile_best-practices/#leverage-build-cache
多阶段构建
得益于缓存,现在镜像构建时间已经快了不少。但是,镜像的体积依旧过于庞大,也会增加每次的部署时间
考虑下每次 CI 部署的流程
在构建服务器构建镜像
把镜像推至镜像仓库服务器,
在生产服务器拉取镜像,启动容器
显而易见,镜像体积过大造成传输效率低下,增加每次部署的延时。
即使,构建服务器与生产服务器在同一节点下,没有延时的问题。减少镜像体积也能够节省磁盘空间
关于镜像体积的过大,很大一部分是因为node_modules 臭名昭著的体积
但最后我们只需要 public 文件夹下的内容,对于源文件以及node_modules下文件,占用体积过大且不必要,造成浪费。
此时可以利用 Docker 的多阶段构建,仅来提取编译后文件
参考官方文档 https://docs.docker.com/develop/develop-images/multistage-build/
FROMnode:alpineasbuilder ENVPROJECT_ENVproduction #http-server不变动也可以利用缓存 WORKDIR/code ADDpackage.json/code RUNnpminstall--production ADD./code RUNnpmrunbuild #选择更小体积的基础镜像 FROMnginx:alpine COPY--from=builder/code/public/usr/share/nginx/html
此时,镜像体积从 1G+ 变成了 50M+
使用 CDN
分析一下 50M+ 的镜像体积,nginx:alpine 的镜像是16M,剩下的40M是静态资源。
如果把静态资源给上传到 CDN,则没有必要打入镜像了,此时镜像大小会控制在 20M 以下
关于静态资源,可以分类成两部分
/static,此类文件在项目中直接引用根路径,打包时复制进 /public 下,需要被打入镜像
/build,此类文件需要 require 使用,会被 webpack 打包并加 hash 值,并可以通过 publicPath 修改资源地址。可以把此类文件上传至 cdn,并加上永久缓存,不需要打入镜像
FROMnode:alpineasbuilder ENVPROJECT_ENVproduction #http-server不变动也可以利用缓存 WORKDIR/code ADDpackage.json/code RUNnpminstall--production ADD./code #npmrunuploadCdn是把静态资源上传至cdn上的脚本文件 RUNnpmrunbuild&&npmrunuploadCdn #选择更小体积的基础镜像 FROMnginx:alpine COPY--from=buildercode/public/index.htmlcode/public/favicon.ico/usr/share/nginx/html/ COPY--from=buildercode/public/static/usr/share/nginx/html/static
看完了这篇文章,相信你对“使用docker部署前端应用的案例”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
TikTok千粉号购买平台:https://tiktokusername.com/
TOP