「来源:|ReactID:react_native」
开篇,我们先来看一下远古时代的构建部署流程。想必大家对这个都不陌生:
开发将源码经过编译、压缩打包生成打包文件将打包生成的文件上传服务器显然这个流程不仅繁琐,而且效率也不高,开发每次发布都要耗费很长的时间在部署构建上面。
后面为了解决这个问题,就出现了CI/CD。
接下来我们来聊一下什么是CI/CD?
CI/CD是ContinuousIntergration/ContinuousDeploy的简称,翻译过来就是持续集成/持续部署。CD也会被解释为持续交付(ContinuousDelivery)
再具体一点就是:
持续集成:当代码仓库代码发生变更,就会自动对代码进行测试和构建,反馈运行结果。持续交付:持续交付是在持续集成的基础上,可以将集成后的代码依次部署到测试环境、预发布环境、生产环境中聊了这么多,相信很多同学一定会说:
这一般不都是运维搞的吗?和业务也不相关啊,了解它有什么用?全是服务器相关的东西,docker、nginx、云服务器啥的,我该怎么学习呢?很早之前,我也是这么想的,感觉与自己的业务也没啥关系,没有太大的必要去了解。
但是最近我在搞一个全栈项目(做这个项目是为了突破自己的瓶颈)时,就遇到了这些问题,发现陷入了知识盲区。
没办法,只能一顿恶补。
但是当我通过学习这些知识和在项目中实践这些流程后,我在知识面上得到了很大的扩展。对操作系统,对实际的构建部署,甚至对工程化拥有了全新的认识。
这里也放下前面提到的全栈项目的架构图吧:
这个大的项目以lowcode为核心,囊括了编辑器前端、编辑器后端、C端H5、组件库、组件平台、后台管理系统前端、后台管理系统后台、统计服务、自研CLI九大系统。
其中的编辑器前端在如何设计实现H5营销页面搭建系统文章中已经有很详细的说明。
目前整个项目做了70%左右,过程中遇到了很多问题,也得到了很大的提升。后续会有一波文章是关于项目中的一个个小点展开的,也都是满满的干货。
回到本篇文章的主题:使用DockerCompose、Nginx、SSH和GithubActions实现前端自动化部署测试机。本文是以后台管理系统前端为依托详细说明了如何借助Docker、nginx、GithubCI/CD能力自动化发布一个纯前端项目。选这个项目来讲解自动化发布测试机有两个出发点:
后台管理系统业务较简单,可将重心放在自动化部署流程上纯前端项目更适用于大部分前端同学现状,拿去即用整体思路
前端代码,打包出来的是静态文件,可用nginx做服务。思路:
构建一个Docker容器(有nginx)将dist/目录拷贝到Docker容器中启动nginx服务宿主机端口,对应到Docker容器端口中,即可访问核心代码变动:
nginx.conf(给Docker容器的nginx使用)Dockerfiledocker-