前端自动部署方法与流程

1.本发明涉及软件开发技术领域，特别涉及一种前端自动部署方法。


背景技术：

2.目前，市面上存在着很多的网页版软件，软件开发过程中，随着需求的不断更新，软件版本的迭代也异常地迅速。在前后端分离的软件中，前端和后端都是单独去打包部署的。就前端代码而言，如果手动去打包部署不仅费时费力，还容易出错，亟需一种自动化部署方案来满足软件不断迭代的现状。以web服务器nginx，代码托管平台gitlab，前端构建工具vite为例来说，一般的自动化部署方案主要分为4步。第一，更改nginx配置文件，指定网站根目录的位置（第四步中打包文件所在的文件夹）；第二，先去gitlab中拉取最新代码；第三，安装依赖包；第四，开始打包(覆盖发布或者非覆盖发布，可通过命令行参数
‘‑‑
emptyoutdir’设置)。
3.对于一般的覆盖发布而言，有2个问题，第一个问题是代码部署期间（大项目可能要好几分钟甚至几十分钟），网站不能访问，第二个问题是当代码出问题时，不能够快速回退（还是需要重新去拉取代码，安装依赖，重复打包）；对于一般的非覆盖发布而言，整个静态资源文件夹会越来越大，不能清晰地看到目前已存在的版本个数及其对应的提交版本，而且后面去手动删除不需要的版本时，既麻烦，又容易出错，同时，版本回退时也需要重新打包，不能做到快速回退。
4.

技术实现要素：

5.根据本发明实施例，提供了一种前端自动部署方法，包含如下步骤：获取一台linux服务器；在linux服务器中创建带有nginx的docker容器，设置nginx的根目录rootpath，在根目录rootpath的倒数第二级下创建目录versions；创建一个jenkins服务器，在linux服务器中去执行自动部署的shell脚本。
6.进一步，linux服务器内安装有git及nodejs工具。
7.进一步，自动部署的shell脚本包含如下操作：切换工作目录到linux服务器中的gitlab项目代码所在目录；拉取master分支的代码；执行“npm run install”安装依赖包；执行“npm run build”执行打包操作，打包完的内容默认存放在打包后生成的dist目录下；根据当前时间，设置变量名称为version，用变量version给当前项目打个git tag；将dist目录下的内容拷贝到docker容器的versionpath目录下；
在docker容器中设置软链接，源文件为versionpath，目标文件为rootpath。
8.进一步，jenkins服务器在监测到代码提交时使linux服务器去执行自动部署的shell脚本。
9.进一步，jenkins服务器还可定时的使linux服务器去执行自动部署的shell脚本。
10.根据本发明实施例的前端自动部署方法，既能支持版本的快速回退，又方便查看每个打包内容对应的提交历史；解决了一般覆盖发布方案中，网站一段时间内不能访问的问题和一般非覆盖发布方案中，内容不清晰，不能快速回退的问题。
11.要理解的是，前面的一般描述和下面的详细描述两者都是示例性的，并 且意图在于提供要求保护的技术的进一步说明。
12.附图说明
13.图1为根据本发明实施例前端自动部署方法的流程图。
14.图2为根据本发明实施例前端自动部署方法的shell脚本的流程图。
15.具体实施方式
16.以下将结合附图，详细描述本发明的优选实施例，对本发明做进一步阐述。
17.首先，将结合图1~2描述根据本发明实施例的前端自动部署方法，用于在软件开发中，进行前端的自动部署，其应用场景很广。
18.如图1~2所示，本发明实施例的前端自动部署方法，包含如下步骤：在s1中，如图1所示，获取一台linux服务器。进一步，在本实施例中，linux服务器内安装有git及nodejs工具。
19.在s2中，如图1所示，在linux服务器中创建带有nginx的docker容器，设置nginx的根目录rootpath，在根目录rootpath的倒数第二级下创建目录versions。在本实施例中，nginx的根目录rootpath的内容可以为“/usr/share/nginx/html/netdevops
”ꢀ
即根目录rootpath的倒数第二级内容为“/usr/share/nginx/html”。
20.在s3中，如图1所示，创建一个jenkins服务器，在linux服务器中去执行自动部署的shell脚本。在本实施例中，进一步，jenkins服务器在监测到代码提交时或定时的去linux服务器中执行自动部署的shell脚本。
21.进一步，如图2所示，自动部署的shell脚本包含如下操作：在s31中，如图2所示，切换工作目录到linux服务器中的gitlab项目代码所在目录。
22.在s32中，如图2所示，拉取master分支的代码。
23.在s33中，如图2所示，执行“npm run install”安装依赖包。
24.在s34中，如图2所示，执行“npm run build”执行打包操作，打包完的内容默认存放在打包后生成的dist目录下。
25.在s35中，如图2所示，根据当前时间，设置变量名称为version，用变量version给当前项目打个git tag。在本实施例中变量version内容为“date 2021-12-15-13-23-33”，
当前这步的操作是为了代码快速回滚时，能找到对应的提交版本及内容。
26.在s36中，如图2所示，将dist目录下的内容拷贝到docker容器的versionpath目录下。在本实施例中，versionpath的内容为“/usr/share/nginx/html/versions/${version}”，其中${version}为变量version。
27.在s37中，如图2所示，在docker容器中设置软链接，源文件为versionpath，目标文件为rootpath。
28.以上，参照图1~2描述了根据本发明实施例的前端自动部署方法，既能支持版本的快速回退，又方便查看每个打包内容对应的提交历史；解决了一般覆盖发布方案中，网站一段时间内不能访问的问题和一般非覆盖发布方案中，内容不清晰，不能快速回退的问题。
29.需要说明的是，在本说明书中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包含
……”
限定的要素，并不排除在包括要素的过程、方法、物品或者设备中还存在另外的相同要素。
30.尽管本发明的内容已经通过上述优选实施例作了详细介绍，但应当认识到上述的描述不应被认为是对本发明的限制。在本领域技术人员阅读了上述内容后，对于本发明的多种修改和替代都将是显而易见的。因此，本发明的保护范围应由所附的权利要求来限定。