0
点赞
收藏
分享

微信扫一扫

GitLab持续集成部署CI/CD初探：如何自动构建和发布个人前端博客

邯唐情感 2022-03-22 阅读 134
前端vuepressgitlabgitci

持续集成，持续部署简写为CI/CD，指的是代码频繁提交，且自动部署到生产环境。关于这些概念，阮一峰在博客中有讲（持续集成是什么？），这里就不再赘述了。

目前的GitLab也提供了CI/CD的工具，Easy-Serverless应用部署平台也提供了自动部署的辅助工具，因此我就用博客尝试一下。由于Serverless只提供内网访问，因此本文不涉及Serverless具体细节和地址。

博客使用CI/CD能做什么

我用的Serverless平台需要把构建后的dist文件夹中的内容放入GitLab。如果不想污染git库，就只能新建一个分支或者新建一个git库存放dist。这样，每次写博客需要做的步骤如下：

  • 步骤1. 撰写博客
  • 步骤2. 提交代码到git
  • 步骤3. 构建build
  • 步骤4. 提交构建成果到git
  • 步骤5. Serverless平台重新部署

通过CI/CD这些繁琐的流程可以自动化，实现自动提交，自动构建，自动部署。

  • 通过脚本自动化流程 可以自动化 步骤2-步骤5
  • 通过GitLab的持续集成工具 可以自动化 步骤3-步骤5

使用脚本自动化流程

这一部分是使用PowerShell脚本（适用于Windows环境，Linux下少许改动即可）在本地进行流程的自动化，不使用GitLab工具。只要执行一句话，就能实现“一键完成所有事情”。

yarn deploy:win

自动化脚本

在项目根目录创建autoDeploy.bat，内容如下：

git add .
git commit -m "auto update blog"
git push origin master

call yarn docs:build

cd docs/.vuepress/dist

git init
git add -A
git commit -m "auto construct blog"
git push -f http://XXXX.com/xxxx-blog.git master:gl-pages

cd ../../../
yarn deploy:xxx

自动化步骤2

前三行是常规的git代码提交脚本，提交VuePress博客代码到git。

自动化步骤3

call yarn docs:build
cd docs/.vuepress/dist

这一部分是VuePress的构建命令，构建的结果存放在docs/.vuepress/dist文件夹中。
构建命令前需要加call命令，否则构建完之后，脚本会自动结束，不执行后续的命令。

自动化步骤4

git init
git add -A
git commit -m "auto construct blog"
git push -f http://XXXX.com/xxxx-blog.git master:gl-pages

这部分是提交构建成果到git库。
创建一个git库，添加所有代码，commit后强制提送到GitLab库中gl-pages分支。

自动化步骤5

这部分是自动化部署到Serverless平台。serveless提供了辅助脚手架工具，具体细节这里就不介绍了，可以参考其他Serverless工具。

最后在项目的package.json的scripts中加入：

"scripts": {
  "deploy:win": "powershell ./autoDeploy.bat",
  "deploy:xxx": "xxx xxx",
  // .... 其他命令
}

deploy:xxx是执行自动化部署的命令。deploy:win是执行整个脚本的命令，后面会用到。

cd ../../../
yarn deploy:xxx

脚本中最后两行是返回到项目根目录，执行自动化部署。

小结

至此，就已经实现了步骤2到步骤5的自动化处理。这也是我一开始的做法。当然，所有提交记录都是"auto construct blog"有点不好看，可以在package.json的scripts脚本中加入传入参数功能来实现自定义提交描述。

如果只关心自动化构建和发布博客，而不想了解Git持续集成的方法，那么目前这种方法已经可以实现了。如果希望了解如何使用GitLab的集成工具来做到这些事，那么可以看下一种方法。

使用GitLab的持续集成工具

使用GitLab的持续集成工具，实际上也是在自己的电脑上执行类似的脚本，只不过变成了在push代码的时候自动执行。

安装和配置GitLab Runner

GitLab Runner 是一个与 GitLab CI/CD 一起使用以在管道中运行作业的应用程序，下载和文档地址。特别的，在Windows系统上安装的方法地址。下载之后直接放到系统中某个固定的位置即可。

然后去我们的GitLab库，在Settings >> CI/CD >> Runners 中找到 Set up a specific Runner manually。

在这里插入图片描述

然后注册和启动注册GitLab Runner。图中的2和3分别作为URL和token，在注册的命令行中输入。GitLab Runner执行命令需要管理员权限。

C:\>gitlab-runner.exe register
Runtime platform                                    arch=amd64 os=windows pid=3756 revision=c6e7e194 version=14.8.2
Enter the GitLab instance URL (for example, https://gitlab.com/):
http://xxxx.com/
Enter the registration token:
XXXXXXXXXXXXX
Enter a description for the runner:
[PC-xxxxx]:
Enter tags for the runner (comma-separated):

Enter optional maintenance note for the runner:

Registering runner... succeeded                     runner=Jxu_vhSj
Enter an executor: docker-ssh+machine, kubernetes, docker-ssh, shell, virtualbox, docker+machine, ssh, custom, docker, docker-windows, parallels:
shell
Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded!

但是这个设置在Windows环境中会出现问题，因此打开gitlab-runner.exe同级目录的config.toml，修改配置runners配置中的shell为powershell。

executor = "shell"
shell = "powershell"

最后再启动GitLab Runner。

C:\>gitlab-runner.exe install
Runtime platform                                    arch=amd64 os=windows pid=18064 revision=c6e7e194 version=14.8.2

C:\>gitlab-runner.exe start
Runtime platform                                    arch=amd64 os=windows pid=9560 revision=c6e7e194 version=14.8.2

配置 .gitlab-ci.yml

在项目根目录创建.gitlab-ci.yml，内容参考上面的autoDeploy.bat。

deploy:
  cache:
    paths:
      - node_modules/
  script:
    - yarn install
    - yarn docs:build
  after_script:
    - cd docs/.vuepress/dist
    - git init
    - git add -A
    - git commit -m "auto construct blog"
    - git push -f http://xxxxx:$PASSWORD@xxxxx.com/xxxx/xxxx-blog.git master:gl-pages
    - cd ../../../
    - yarn deploy:xxxx
  only:
    - master

可以看到，这就是把上面步骤3-步骤5的脚本写到了gitlab-ci中。但是还有一些不同点：

  • 代码和命令的执行位置并不在我们项目本身所在的位置，而是在GitLab Runner指定的其他位置，例如我在日志中看到的位置。
$ git init
Initialized empty Git repository in C:/builds/HEAJXxhy/0/[MASKED]/xxxx-blog/docs/.vuepress/dist/.git/

因此我们必须加入安装依赖的命令，如yarn install。

  • 每次都重新安装依赖花费时间较长，可以把node_modules作为缓存保存下来，不用每次全部重新安装，节约构建时间。

  • 我们直接使用脚本执行命令时，我们在windows环境自动赋予了我们Git的权限，因此我们不用输入Git账号密码。但是在GitLab Runner中执行的命令是没有Git权限的。因此我们必须加入账号密码。

git push -f http://账号:密码@xxxx.com/xxxx/xxxx-blog.git master:gl-pages
# 例如
git push -f http://xxxx:$PASSWORD@xxxx.com/xxxx/xxxx-blog.git master:gl-pages

但是这个.gitlab-ci.yml是其他人都能看到的，不能直接明文下入密码。因此我们会用到GitLab提供的变量功能。在Settings >> CI/CD >> Variables。我们增加密码变量，设置保护。然后在.gitlab-ci.yml中用$Key来替换变量。这样无论在.gitlab-ci.yml中还是在日志中，都会隐藏真实的密码。

在这里插入图片描述

  • 注意要设置只有master分支才执行，否则我们代码中的git push命令可能会引起无限循环。

触发CI和查看效果

我们把刚写的代码提交，然后在GitLab上查看效果。

E:\personalProject\xxxx-blog>git add .
E:\personalProject\xxxx-blog>git commit -m "测试提交"
E:\personalProject\xxxx-blog>git push

提交后，在GitLab的 提交记录中可以看到后面有个图标。其中扇形表示正在进行中，对号表示成功。叉号表示失败，Pending一般表示GitLab Runner没有生效。

在这里插入图片描述

我们点击图标，进入另一个页面，再点击deploy框，就能看到具体的日志。

在这里插入图片描述

等执行成功后，我们再去看看我们的博客，就已经成功更新啦。

CI/CD可以做很多很多事情，GitLab或GitHub提供工具的实际应用场景也远比我这里的博客复杂的多，这里仅仅是一次小小的尝试。

参考

  • 持续集成是什么？ —— 阮一峰
    https://www.ruanyifeng.com/blog/2015/09/continuous-integration.html
  • easy-serverless 功能分析
    https://juejin.cn/post/7057114641507287048
  • GitLab Runner 文档
    https://docs.gitlab.com/runner/
  • GitLab Runner 在Windows系统上安装的方法
    https://docs.gitlab.com/runner/install/windows.html
举报

相关推荐

GitLab CI/CD 进行持续集成

git服务器持续集成OpenStack云计算

前端docker jenkins nginx CI/CD持续集成持续部署-实战

spark大数据分布式python

Docker 与持续集成/持续部署 (CI/CD)

Docker应用程序开发者Python后端开发

Jenkins持续集成CI，持续部署CD、集成Allure报告

自动化测试软件测试测试工具Jenkins

CI/CD 持续集成 持续交付

golang开发语言后端算法数据结构visual studioide

构建Spring Boot应用的持续集成与持续部署(CI/CD)

spring bootci/cd后端jar集成测试HarmonyOS后端开发

经验笔记：持续集成/持续部署（CI/CD）流程

openstacklinux网络

『中级篇』CI/CD持续集成/持续部署（69）

「中级篇」学习docker践行devOps理念devops：...程序员Openshi...企业级应用系统...Docker容器k8s那点事儿Docker

Java中的持续集成与持续部署（CI/CD）

javaci/cd开发语言

Vue中如何进行自动化部署与持续集成（CI/CD）

mavenjavajunit
0 条评论